Making SVG Sprites Work
When used properly, icons can be powerful elements in your web application’s design. They can represent common actions and serve as visual guides to help users in their tasks. Because of this, we have decided to write a third post on the topic of logos and iconography in order to describe how we actually use icons in our web applications.
In our designs, we regularly end up making our own icons. Luckily we usually have the budget where we can spend time thinking about the correct icons to use in our applications. We also have the time to craft a set of pictograms that can become a second language to communicate with our users. We do this to ensure that the users have a better and more productive experience when interacting with our systems. We also work to match the look-and-feel of the application thereby creating a more coherent experience.
However, when creating a set of custom icons there are some common problems that you can encounter:
- The first is how to manage the large number of icons. Everyone who has worked in web design knows that you have to be smart early on in the design process with your naming convention.
- The second problem is rendering. What sizes do you display your icons in? How do you manage to keep your icons looking crisp at different sizes? Do you create icons at multiple sizes and store them as PNGs or do you veer into the land of SVGs where icons can get fuzzy when rendered at odd sizes?
- The third is load time. You don’t want to drain load time by having to render multiple individual images. How do you balance keeping file sizes small with maximizing the number of times you load an image?
The solution that we’ve arrived at and mastered is SVG sprites. I know it sounds weird. When you hear the words “SVG” and “Sprites” you don’t necessarily think of them together. Most people are much more familiar with the term Icon Font, which is a set of SVGs that are stored in a font. SVG Sprites, on the other hand, are a whole bunch of SVGs layered on top of each other into a single file.
There are many reasons we went with this solution. The first is that SVG Sprites are fast, flexible, cheap to load, and fairly browser friendly. However, the biggest reason we went with them is that they work well in virtualized environments. Many of our users work in restrictive environments; using SVG Sprites ensures that our icons load properly and look good.
The second reason that we went with this solution is because fonts can become pixelated and render differently depending on the browser, operating system, and other factors. We found that SVG sprites are just as easy to make as fonts and don’t have these same problems with ensuring the same look-and-feel. So if you have users looking at your software in multiple kinds of environments SVG sprites could help ensure the same look and feel across the different environments.
We aren’t saying that it is the best solution; we’re saying it is the best solution for our environment and our users. Because of this fact, I would be remiss if I didn’t point you to some other articles that do a much better job outlining the pros and cons of different image formats along with a great history on the topic.
To make SVG Sprites work we’ve developed a couple of tips and tricks:
First, start with a consistent canvas size.
We primarily use Adobe Illustrator to make our icons. Illustrator has a great feature where you can save your images as SVGs (other tools do as well — we’re not married to Illustrator).
- When you create your icons, know what size is going to be your base and then make your canvas match.
- Every icon should fit on that canvas. If you start with all of your icons the same size and on the same canvas you’ll have less problems with fuzzy pixels later on.
Second, address fuzzy pixels.
Fuzzy pixels happen for two reasons. First, the SVG path itself is not pixel aligned. This is easily fixed by making sure the icons you design in your tool of choice are pixel aligned. Otherwise, there’s no fixing this in the browser. Second, your perfectly pixel-fit SVG gets aligned to half-pixels when rendered in the browser. This generally happens when the icon is centered, either horizontally (e.g. with margins or text align) or vertically (e.g. with line height), in a space with an odd-numbered width or height. Normal HTML elements know to round up or down, but SVGs are “helpful” and align precisely to half-pixels, causing your once beautifully crisp icons to suddenly look quite fuzzy.
You can try to avoid half-pixel alignment by not centering your icons, but sometimes it is unavoidable, especially with line height. Keeping your icons to a common grid size helps avoid centering, but not all the time. Thankfully, there exists a simple trick to fix ALL half-pixel alignment issues with SVG sprites! Yes, sometimes magic bullets are real. The trick is simple, just add the following CSS property to whatever rule you had created for your icon class, e.g.:
.icon{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Third, encourage adoption.
This may sound silly, but we’ve had problems with getting developers to use SVG Sprites. I think it is primarily because developers are just used to more common methods. We’ve developed a web app that clearly shows each icon at a common size with the icon’s name from the sprite. When the developer clicks on the icon, code is pasted to the developer’s clipboard so that he or she can easily drop it into their code. Also, we include a section on how to use the SVG Sprite with sample code at the bottom of the web app.
Fourth, use “symbol” and “g” tags to construct your sprites.
As outlined in this great tutorial, wrapping each icon within the sprite with the <symbol> tab allows you to create a custom viewBox. I like using the same viewBox for all of my SVGs, but this format is more malleable. Using internal <g> tags also makes it easier for setting colors that should not change during run time for complex images.
Fifth, it is fill, not color.
Here is the one snag that got me. I got all the way through making a whole sprite and then I went to put it in the application and I tried to use CSS on it like it was a font. Remember these are still glyphs and treat them as such in your CSS.
There is a simple trick to getting fill and color to work the same. Icons can inherit their fill color from whatever the text color is. Presto, your SVGs will work exactly like font icons! Add the following CSS property to your icon class:
.icon{ fill: currentColor; }
Icons and using them can be critical to making a workflow easy and visually engaging. In this post we’ve proposed tips and tricks for using SVG sprites to make using icons work in a consistent and fast manner. This is the third post on visual design. Please let us know if you are enjoying the series.
This post was written with help from Ryan Heffner and Jonathan Pautsch. Thriving on coffee and a desire to make life better for users everywhere, Ryan Heffner brings 10+ years of graphic, web, and UX design experience to bear when solving UX challenges. Ryan served in the Air National Guard while studying graphic design at Shepherd University in West Virginia. He enjoys music, cooking, and spending time with his wife and son.
Jonathan Pautsch is a code-monkey turned User Experience Engineer, with a Masters in Information Systems & Human-Centered Computing from University of Maryland, Baltimore County. He loves collaborating with like-minded designers to create awesome interfaces that solve real problems facing real users. When not kicking some usability butt, he enjoys video games, TV, and hanging out with his wife and daughter.
If you are interested in learning more about Next Century, please check our website below:
