Yelp Facebook LinkedIn YouTube Twitter Instagram

Noble Desktop Blog | Tutorials, Resources, Tips & Tricks

Optimizing SVG Files

What is SVG?

SVG stands for scalable vector graphics. It’s an XML-based coded file format that enables us to use vector graphics in webpages.

Why Should You Optimize SVG Files?

Design apps such as Sketch, Adobe XD, and Illustrator code SVG files differently. Some produce cleaner code than others. Regardless of what app codes the SVG file, it’s likely that the code can be further optimized, offering cleaner code and a smaller file (which downloads faster). Loading speed is important because website speed is one factor that affects your website’s Google ranking.

Optimizing SVG files can have other benefits. Once we had an SVG file that Illustrator didn’t like. The SVG was exported from Sketch, and we were trying to open it in Illustrator. We got an error message and it appeared wrong in Illustrator. After optimizing the SVG file, it imported without error and looked correct!

How to Optimize SVG Files

SVGO is a command-line tool to optimize SVG files. It’s not the most user-friendly thing, which is where SVGOMG comes in. It’s SVGO’s Missing GUI (graphical user interface). 

Screenshot of the SVGOMG website

With SVGOMG you can open existing SVG files (or paste in their code) and you’ll see the variety of different options to optimize the file. You can see a preview of the optimized graphic, as well as a before and after view of the code, so you can see exactly what code is changing.

Learn Design & Coding at Noble Desktop

Sketch Web Design Web Development UI Design Illustrator Adobe XD

Back to Blog