Re: Spritesheets & viewBoxes
I’m using embedded SVG spritesheets in several projects currently, and they’re working well. Here are several resources that might help with the implementation:
- 5 Gotchas You’re Gonna Face Getting Inline SVG Into Production
- Ways to Do State Changes for SVG Sprite Icons
- Using Two Colors in a Sprite
- I created this CodePen template for writing your own SVG spritesheets, which actually isn’t too difficult. I’ll be going over that workflow in the course, but I’ve already made the template freely available. It provides the SVG stucture within which to add your
<symbol>elements, and it automatically generates previews of every symbol in the spritesheet.
Regarding bounding boxes and Adobe Illustrator SVG export, both Sketch and AI have various little quirks in how they write SVG. Sketch, however, recently released an update that prevents this issue; it’s now much smarter at extending the SVG bounding box (“viewBox”) to the edge of your layers. But—at least in Sketch—this should only be an issue when you aren’t using and exporting an Artboard.
I always recommend creating an Artboard around any design that you export as SVG. In Sketch, you can then export the Artboard itself, rather than the whole file or certain layers, and the resulting SVG will adhere to the dimensions of that Artboard. So no layers get cropped out unless you explicitly want them to.
