From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create an optimized SVG sprite with SVGO and spritesh

Create an optimized SVG sprite with SVGO and spritesh

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Create an optimized SVG sprite with SVGO and spritesh

“

- [Voiceover] If you're with me so far, I'm sure you'll agree that using inline SVG sprites and simply referencing the symbols within that sprites to display icons on a page is a really simple and straightforward way of using SVGs, especially in elements like menu items. However, manually generating that SVG sprite can be quite a challenge, especially if you have a lot of SVGs. Right now I only have four SVGs and they're all the same size, but I've worked with projects that have 50 or 100 SVGs of different sizes, and a lot of them were way more complex than what you see here. Those SVG sprites are impossible to manage manually, and to add to that complexity, in projects like this you'll often have to update your SVGs on the fly, and, doing that, when you have this huge manual file, just becomes unwieldy and impossible. The good news is, you don't have to do any of that. We can automate this entire process using Command Line Tools. Now, before we continue, a point of order. If you're…

Contents