SVG implementation tips
We’re almost at the end of this chapter now, but there is still so much we could talk about regarding SVG. Therefore, at this point, I’ll just list a few unrelated considerations. They aren’t necessarily worthy of protracted explanations, but I’ll list them here in note form to save you from hours of searching Stack Overflow or asking your AI chatbot of choice:
- If you have no need to animate your SVGs, opt for an image sprite of your assets or use data URIs in your style sheet.
- Automate as many steps in the asset creation process as possible; this reduces human error and produces predictable results faster.
- To insert static SVGs in a project, pick a single delivery mechanism and stick to it (image sprite, data URI, or inline
mask-image
). It can become a burden to produce some assets one way and some another and maintain the various implementations. - There is no easy “one size fits all” choice...