Skip to main content
Creating An SVG Sprite

Creating An SVG Sprite

The Challenge:

With the combination of retina displays and RWD (responsive web design), traditional pixel-based sprites have become obsolete. Results from continued use of pixel sprites include:

  1. Pixilation
  2. Larger workload
  3. Increased load times

Pixilation is becoming an issue since the web isn’t just for a 1024×768 anymore. With the inception of RWD, designers and developers must consider the numerous viewport sizes and adapt the design accordingly. Altering the design to accommodate the viewer can result in objects growing and/or shrinking in size. The dreaded pixilation monster starts to show his ugly face when pixels are used as units for these scalable objects.

When using pixel sprites, designers have to create two files, one regular size (x1) and one retina size (x2), which results in a larger workload. The additional file means one extra file will need to be maintained. What if a new screen resolution, such as double retina, becomes available? Then, designers will need to create 3 files: 1x, 2x, & 4x.

Increased load times can occur if a developer decides to only load the retina sprite and resize it accordingly for various devices. As we all know, retina images are twice the size of a regular image. Some devices require optimal load times to achieve the best user experience. Sending a 400kb icon sprite will inevitably increase the load times, which will reduce the quality of the user experience.

Pixels are limiting. We want something that can scale to fit any device resolution. So, are there any solutions to this problem?


One solution is creating a SVG (sprite with a PNG backup). SVG stands for scalable vector graphic… BINGO!

Hold your horses…

It isn’t as easy as saving the sprite as a new file. There are a few changes in how the developer has to code the sprite. So, now you’re wondering how to make a SVG sprite? Let’s look at the process from both the designer and developer’s perspective.

As a Designer

I created this design.

Next I create a sprite based on the design.

To save the file as a SVG, I selected Save As in Illustrator and then selected the SVG format.

**If you aren’t using Adobe Illustrator, there are other resources for converting your artwork into SVG’s. I’ve included a few of these resources at the end of this article.

Now I have a SVG file of my sprite. I also want to save a PNG fallback for my developer. Using the same file, I can save the regular PNG fallback. Now, I know what you’re thinking, “But you’re creating two images!” I am saving two images, not creating two images. There is a big difference between the two.

I can also save a compressed SVG for my developer to use, which saves loading time. To save a SVGZ, navigate to the Save As dialog box.

As a Developer

I just received a design, a svg sprite and png backup sprite from the designer. I have written the HTML and CSS based off of the design. The designer has planned for an adaptive layout with a zoomable grid. With this knowledge, I have coded all of my sizes using ems instead of pixels.

Traditionally, I would have coded the various sprite icons by declaring the .png as the background in the CSS file and moving it around using background position. Similar to below:

a { background: transparent url(icon-sprite.png) no-repeat 12px 0;}

a.icon { background-position: 12px -48px;}

This would work for the traditional static development of years past, but remember, the designer has planned for an adaptive layout with a zoomable grid.

If I use the png sprite, the icons become pixelated as the grid zooms at the various breakpoints.

Pixel Sprite = Pixelated Icons

The designer wants crisp icons that look great at the different breakpoints. Now, we will use the SVG sprite. If I sub a .svg file for the .png, my problem should be solved, right?

Wrong. Unfortunately, it’s not that easy. The image below shows what happens if you try switching the .svg for the .png.

Sub the SVG for the PNG

The SVG sprite seems to remain the same size at the various breakpoints. This is due to the SVG’s code. Scalable Vector Graphicsare based on XML. If I open the .svg file in a text editor I will notice it declares a specific size based in pixels. In our case, the size is 16px wide by 167px tall with a viewbox of 0 0 16 167. Because of this declaration, the background sprite will not adapt at the various breakpoints unless we redefine the size of the SVG as an em.

CSS3’s background-size to the rescue! If we add background-size: 1em 10.4375em; everything falls nicely into place.

Background-Size Applied to SVG

TA-DAH! We now have crisp icons at all the various breakpoints.

To Sum It Up

SVG sprites reduce pixelation, workload, and load times. They are simple to create and easy to implement. Below is a list of resources for creating SVGs if Illustrator isn’t at your disposal. The power of SVG is not limited to sprites. How are you using SVG in web development?

SVG Resources:

About the Author

Richard Alvarez began his career at Microsoft, during which he wrote his first book on Adobe Flash, which was published by New Riders. He has worked with multiple start-up companies, which has taught him that the digital space is constantly evolving.

Prior to joining Saggezza, Richard helped form Method Engine’s philosophy of strategic design. He worked as lead IT at a small creative agency. During that time, he was key in creating technical solutions, based on consumer driven best practices.

Saggezza is a proven technology and consulting partner that delivers personalized, high-value solutions to accelerate business growth.

Share This
Related Articles
The Smart Workplace: How 3 Local Companies Are Using the IoT

August 8, 2019 Via New IT Alliance The Internet of Things (IoT) has made your home smart; you can program […]

World Kindness Day 2018