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.
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)…?