Optimizing SVG Files
SVG Optimization Tools
SVGO
Command-line tool for SVG optimization — powerful but not user-friendly.
SVGOMG
SVGO's missing GUI — the visual interface that makes SVGO accessible.
Open or Paste
Open existing SVG files or paste in their code to optimize directly in browser.
Live Preview & Diff
See the optimized graphic preview plus before/after code so you know exactly what changed.
Noble Desktop's Web Design Certificate teaches Figma, HTML, CSS, and responsive design.
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).
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.