Creating an SVG Sprite

By: Saggezza Interactive Services

User Experience

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?

Answer:

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 Graphics are 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:


Email to someoneShare on LinkedInTweet about this on TwitterShare on Facebook