Command Line Tools
- SVGO (Seems like the biggest player)
- Scour
- svgcleaner
Unfortunately, none¹ of them are maintained anymore. You also don’t need to use just one².
SVGO with a Task Runner
Desktop Apps
- ImageOptim (macOS)
- macOS “folder action”
- Before macOS 10.15 Catalina, you could use SVGO GUI, but it’s 32-bit which makes it obsolete.
There are generic app for optimizing images on Windows and Linux, but I haven’t yet confirmed any of them do SVG.
Web Apps
The idea with these tools is that you have an SVG on your machine and you upload it to this web app to optimize this one SVG.
APIs
- ImageOptim Web Service API
- Kraken
- Imgix supports SVG if you opt-in.
- It’s not entirely clear if Cloudinary actually optimizes SVG, and their API is uploading-focused, but they do support “transformations” on SVG, and their fetch URL format is API-like.
Optimizing Directly Out of Design Tools
Typically, when you export SVG out of a design tool it is in dire need of optimization. Hence, all the tools in this article. The design tool itself can help though, at least somewhat.
- Sketch’s svgo-compressor (there is also a Sketch-specific web app for this called SVGito)
- Figma does its best by default
- Illustrator has SVG NOW
- Inkscape can export as “Optimized SVG” (uses Scour internally) or use SVGO-Inkscape
Deep Dive Articles
- Michelle Barker: Optimising SVGs for the Web
- Jayden Seric: How to optimize SVG
- Sara Soueidan: Tips for Creating and Exporting Better SVGs for the Web & Useful SVGO[ptimization] Tools
- Cosima Mielke: Tools And Resources For Editing, Converting And Optimizing SVG
- Jake Giltsoff: SVG on the Web, Preparing & Optimising
- Andreas Larsen: Optimising SVGs for Web Use
- Josh Stoik: Optimizing SVGs For Web Use
Manual/Hand SVG Optimization Work
- Raymond Schwartz: Understanding and Manually Improving SVG Optimization
- Amberd Design Studio: How to Optimize an SVG File Step-by-Step
- Video from us: Reducing vector points in Illustrator
- Video from Kevin Powell: How to create, clean up, and optimize an SVG
- Presentation by Brenda Storer: Cracking the SVG Code
- Dudley Storey: SVG Optimisation: The Basics
- No longer maintained references: SVGO, Scour, svgcleaner. UPDATE: SVGO has a maintainer again.
- Johannes Kalliauer at Wikipedia (who informed me of the broader landscape of command-line tools) tells me that each of the tools have their advantages. While SVGO is popular, it is also the buggiest. svgcleaner is the fastest. Scour and svgcleaner can also repair damaged SVG while SVGO cannot.
Lifesaver! I’ve been looking for a tool that would automatically inline styles in an SVG tag. Looks like Vecta does it. Thanks!
Note that if you need something faster than SVGO (which also works as a standalone binary), svgcleaner might be right up your alley :)
@chriscoyier There are three (not one) common command-line-tools: scour, svgcleaner and svgo. All three are not (actively) developed/bugfixed any more see References [16-18] in https://commons.wikimedia.org/wiki/Help:SVG#Tidying_up . svgo is imho the bugiest one (at least for wikimedia-files) of those three optimizers.
svgo is reported in https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/ as not developed any more, which is confimed by the developer: https://github.com/svg/svgo/issues/1055#issuecomment-431913656
Please read https://commons.wikimedia.org/wiki/User:JoKalliauer/Optimization#Using_Optizatiors it has usefull information of different optimization tools (instead of one using in several implementations).
scour and svgcleaner can be used to repair damaged (or wrong rendered) SVGs in https://tools.wmflabs.org/svgworkaroundbot/ which svgo imho can’t (few exceptions).
svgcleaner is much faster (whith the same cleaning ratio) als svgo, see https://github.com/RazrFalcon/svgcleaner#charts
Recommending https://github.com/juanfran/svgo-inkscape without mentioning scour is absurd, since scour is a build-in-function, just save it as “Optimized SVG (*.svg)”, no need for installing anything additionally.
I’m not saying svgo is worse than scour or svgcleaner, I’m just saying there exist three opimizers, which each one having their own advangages. For newbies I would more recommend to use scour or svgcleaner, since they are imho less buggy.
I also found svgcleaner recently. It’s an alternative to SVGO written in rust that outputs faster, smaller and more correct SVG.
I would recommend against SVGO as it will strip out license information by default from your SVGs which could be illegal if using SVGO blindly (say deep in the dependency chain like creat-react-app). One example could be
CC BY.
In the case of someone embedding the license information from an editor like Inkscape already have all of this information in a reasonable manner that won’t be a violation. Unless there’s a separate build step to extract this information it will be lost and a violation. SVGO treats this metadata as “editor data” and cannot be separated: you either get all of the editor’s extra data it appends to make editing in the future better or you get a large file. The author’s stated this is not a bug but many tools depend on SVGO in the front-end tooling workspace which has the side-effect of license violations by default and users may not know.