Guil Hernandez
January 14, 2015
-
1 min read
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.
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 StartedYou might also like other posts...
Front-End vs. Back-End: The Complete Guide
If you're new to coding, you may be wondering what the difference is between front-end vs. back-end. Find your answers in our latest Treehouse blog.
Should I Learn HTML Before Python?
Starting your coding journey and wondering if you should learn HTML before Python? We've got you covered. Keep reading to learn the key differences in our latest blog.
How to Use the Browser Developer Tools Console
The developer console can help you debug your front-end web applications. Learn more about the browser developer tools in this quick and simple guide.
Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.
Learn more
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!
Very Informative but how to implement cross-browser SVG sprites? I know some of the others way I’m looking for the best answer.
they are using symbol tag in place of g tag
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
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?
Finally found a great informative article on SVG sprite sheet, thanks a lot.
I would vote for Mickey Mouse if I thought it would do any good!
Fantastic resource for something I really had no idea about! I will certainly be trying this in my next project.
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 🙂
That was great, thank you!
How about changing fill colors based on state (ie, hover, click… etc)…?