LearnCreate an SVG Sprite Sheet

   
Avatar

Guil Hernandez
writes on January 14, 2015

Image sprites are still a useful feature in web design. They’re also important for website optimization because they combine several images into one image file to reduce HTTP requests.

In this tutorial, we’ll learn how to create an SVG sprite sheet with IcoMoon.io, one of my favorite apps for creating SVG sprites.

Download Project Files

Learn more about HTML and CSS at Treehouse!

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

10 Responses to “Create an SVG Sprite Sheet”

  1. Really awesome feature that I didn’t know even know existed until now. Definitely adding these to my site, should also increase site speed too!

  2. Very Informative but how to implement cross-browser SVG sprites? I know some of the others way I’m looking for the best answer.

  3. they are using symbol tag in place of g tag

  4. Icomoon has changed their SVG generation method. Now they are using in place of . Can you share a similar tutorial of rendering the svg icons using that. I m having a lot of issues in rendering the svg file because of that

  5. What about editing the sprite sheets? For example, if you have a sprite sheet with 20 icons fully set up for your website, but maybe one of the SVGs changes, or is deleted? How do you handle the sheet without screwing up the locations of all of the other SVGs?

  6. Finally found a great informative article on SVG sprite sheet, thanks a lot.

  7. I would vote for Mickey Mouse if I thought it would do any good!

  8. Fantastic resource for something I really had no idea about! I will certainly be trying this in my next project.

  9. Hey I was looking exactly for this kind of video, in fact I did not know that such a detailed tutorial for creating SVG will be available. Thanks so much this is indeed helpful video for me, Thanks a ton 🙂

  10. Connor Katz on January 14, 2015 at 2:15 pm said:

    That was great, thank you!

    How about changing fill colors based on state (ie, hover, click… etc)…?

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop