Hi Sara,

Fantastic post – your SVG knowledge is amaing. I always look forward to reading your posts as I learn something new every time. Looking forward to being able to use a fragment identifier on an ‘inline’ image – saving even more HTTP requests!

In-house, we use gulp to compile an SVG sprite (with PNG fallback for IE8). This then creates a Scss map with the dimensions and co-ordinates of each icon. Using Mixins we can call the particular icon to be compiled into CSS with the correct dimensions and co-ordinates (in ems for text scaling).

This has the benefit of auto-updating the co-ordinates and dimensions should the icon change – I did do a write up of how we go from individual SVG icons to using the sprite (https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/) if you are interested!

Thanks for a wonderful article. Here’s an example ramping up accessibility and providing a .png fallback.

<svg class=“search-icon” role=“image” aria-labeledby=“icon-search-glass-title”> <use xlink:href=”#icon-search-glass”></use> <image class=“search-icon” src=“images/svg/search-glass.png”> <title id=“icon-search-glass-title”>Fancy Title Goes Here</title>
</svg>

Hi,
With the last option, is it possible to style the SVG icon with CSS? I think the answer is no, but this downside is only listed as a drawback for the second option, which kind of implies it’s not also a drawback of the last option. Some clarification would be appreciated… thanks!

Great article! I must admit I still a big fan and user of the “traditional” sprite technique. I place all my SVG icons inside a single image in Illustrator, export from there and then target them using background-position. Thats kind-of a mixture of technique 2 and 3. I also export the same sprite as a PNG for browser support.

It’s definitely not the most up-to-date way of doing it. I would like to export one sprite then change the colors using CSS. But I’m still exporting the different color variations when they’re required.

But it works pretty much 100% of the time – all the time.

Hi Sara,
Wow great article. I really love your work (writing and talks) never knew anything about
SVG (and was even avoiding it) but from your talks I developed the love in it and now I’m confident in using it.

I was looking for an article in svg sprites and this came up and was like wow!! here she is!

Really big fan of your work I love the last one, I think I knew all but the last one (Fragment identifiers) with any embedding method!
I learned a lot from this article (and everything about svg from you) :-)
Keep up with the great work you are doing …

Cheers
M.

Ps. “Cheers S” made me smile.. :P

Hi Sarah, Thanks for your article.

I use http://icomoon.io/app to generate my sprites (svgdef, symbols).

Icomoon defaults to inlining the sprite into the html, so I load it dynamically into the DOM with JavaScript and so it works everywhere without any PNG/GIF.

It is also cacheable since it’s an ajax request (or you can inline it into your JS like with browserify brfs).

Many thanks!

Thanks Sara! Aside from Chris Coyier’s extensive resources, you’ve solidified yourself in my mind as one of the prime sources of SVG knowledge.

The main difficulty I keep running into is that each individual solution carries it’s own pros and cons. There doesn’t seem to be one SVG method that does everything yet. Want to be able to style your icons with CSS? Don’t use the <use> method. Want to enable cached assets and avoid embedding massive svgmaps? Then lose some control over that styling.

I love the techniques and have been trying to make use of them all the same, I’ve just had trouble getting it all working to my standards in a production environment. It’s a work in progress though, and I’ll keep experimenting. Thanks for shedding even more light on a couple of new techniques. :)

Hey, Jem!

Thank you for your comment (and nice words!). So happy to hear that!

And yes, I totally agree. This is why I think the third technique is best—and also why it’s my favorite.

It believe it’s the nature of SVG (is it text? is it an image? Ehm, It’s both.) that is behind the pros and cons of each technique, but at the same time it is the reason why SVG is so powerful.

We may not have the perfect solution now, but it’s great to have many options, so we can choose whichever one we need depending on our project’s requirements.

Thanks again for your comment! =)

Cheers,
Sara

Thanks for this article Sara…I’ve added most of the articles/book that you suggested in my to read list for this month :) Will obviously share it on twitter!

Hello Sara,

In solution 1, “HTML INLINE SVG SPRITES”, section b, “Referencing an external SVG sprite in HTML”.

You have the following code block:

```
<svg class=“twitter-icon”> <use xlink:href=“path/to/icons.svg#twitter-icon”></use>
<svg>
```

Including the `xmlns` attribute to the `svg` tag improves support a bunch:

`xmlns=“http://www.w3.org/2000/svg”`

Source: [Chris Coyier](http://css-tricks.com/svg-sprites-use-better-icon-fonts/), who cites the testing of Jonathan Neal (of svg4everybody fame).

Hello Sara, Thanks for this great and helpful article, i have a question regarding SVG, can we create an Animated SVG file like “.GIF “ for animating colorful icons.

Great article Sara. I am so glad that I found this article and about your blog.

I was wondering how to intergrate/automate the SVG sprite process with the build flow. I dont want to seperate code for dev/prod environments. Do you know of any seamless process where I can automate the svg sprite creation process and update my HTML/CSS files without manually chaning them.

I converted SVGs to base64 strings and used them in the angular application via directive. That works like a snap, but for my current project I am using Backbone and RequireJS with ANT as a build tool. I dont have much flexiblity to change anything. Thanks in advance for any pointer.

— VA

Found this article just in time as I decided to go the SVG route with my website redesign. Unfortunately, I had a few inconsistencies trying to get the sprites working between older windows phones and newer browsers trying to use css backgrounds-I have read there is still issues using svgs in this way. For now I went back to png for my social media sprites but am up for the challenge to learn more. SVG’s have to be the way to go for great looking sites on any device! Great article and thanks for the inspiration!

Hey Mike!

Of course I am! I was just reading the comment and thinking “I hope there is a writeup somewhere”, and then you added the link. Perfect!

Thank you for commenting and sharing this. I’ll be more than happy to share it on Twitter today!

Cheers!
S