How to Create and Manage SVG Sprites

SVG is winning the race when it comes to graphics that scale on the web. Designers and developers are choosing SVG in lieu of icon fonts, raster images, and raster sprites.

The benefits of using SVG are numerous but to me, it boils down to scalability.

Using SVG can be as simple as copying and pasting the exported code from a vector-based program. From there the problem lies with delivering those graphics in the most efficient manner.

Enter SVG sprites. These work in a similar pattern as image sprites do though, how they are created and included on a web page is very different.

WHY USE SPRITES AT ALL?

Sprites help increase speed, maintain a consistent development workflow, and make the creation of icons much faster. SVG sprites are typically created using icons of a similar shape or form whereas larger scale graphics are one-off applications.

In many cases, an icon library will scale in size. Adding new icons needs to be efficient and ultimately easy. SVG sprites help make this a reality.

EXPORTING SVG CODE

SVGs can be exported from your favorite vector graphic program. I tend to use a mix of tools and have found that all of them have great support for exporting SVGs. Sketchstands out in particular because you can select an icon or graphic and hit command + c and have that SVG code copied to your clipboard. Then you can head to your code editor, paste the code, and have the graphic appear before your eyes in the browser.

OPTIMIZING SVG FOR WEB

Sadly, if you were to copy and paste from Sketch you may find that the code is suboptimal and could be better optimized. There are some tools for that.

If you use Sketch in particular, check out the SVGO Compressor plugin. As you export SVGs the plugin automatically optimizes them before saving the file.

If you don’t use Sketch check out the same functionality in app form or if you prefer web apps, Jake Archibald put together one for you.

Read Full Article

Leave a Reply

Your email address will not be published.