About SVG Sprites

I responded to a message in the HighEdWeb Slack today from someone who was having trouble editing an SVG. According to the poster, the SVG file had shape information in it but appeared empty when opened in Adobe Illustrator. After some back-and-forth, the person shared a link to the file.

I was able to inspect the file and it indeed contained shape information. Lots of shape information. It was an SVG sprite! It contained multiple icon shapes and a few variations of a logo.

It's been a very long time since I used a sprite file for anything. Since web fonts – especially icon fonts – became common, I found an icon font to be easier to use and more flexible. Icons from a font can be used in CSS pseudoelements; they can be easily colored and resized. However, I wonder if there is some performance advantage to using a sprite over a subsetted font.

And of course, there are multiple online tools that will accept your SVG files and turn them into a sprite file. There must also be npm packages that allow you to generate SVG sprites. The person who created the sprite that confused the person on Slack today probably never intended for it to be edited directly. If you have good build tools, you simply update your individual SVG icons/files, and then regenerate your sprite.