Michelle Barker avatar Michelle Barker

Optimising SVGs for the Web

Screenshot of “Optimising SVGs for the Web”

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […] In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

Even if I've been using SVG for years (hint), I learned a few useful tricks, thanks Michelle!

  1. How I build my SVG sprites

    I'm using an SVG sprite on this site to make sure I don't repeat SVG code for icons that are used multiple times, and I inline it so the rendering doesn't depend on another resource loading. Here's how I build this sprite from individual SVG icons.