Most of the time, automated optimizers for SVG are relatively bad, though, and rewriting the SVG by hand can get a 2KiB svgo result down to 200 bytes or less.
Minify Your SVGs
11–20 of 66 posts
Re: Minify Your SVGs
#12Don't SVGs have to have an XML declaration? I think that magic will fail to identify the content type of an SVG if it's not a valid XML file.
Re: Minify Your SVGs
#13Yet another alternative that has benchmarks against svgo and scour is svgcleaner: https://github.com/RazrFalcon/svgcleaner.
It is written in Rust and has been my go to for SVG optimization due to its speed.
Re: Minify Your SVGs
#14Would be more compelling with the sizes of that neutral net in the different passes. As it is, this is like comparing two algorithms on a small dataset without accounting for growth in data on behavior.
Re: Minify Your SVGs
#15Related: https://jakearchibald.github.io/svgomg/
I use it every time I'm using SVG for the web.
My only problem is that when pasting SVG directly from Illustrator it finds an invalid character at the end and refuses to use it. I have to paste the SVG into an editor, remove some invisible character at the end, and then paste to svgomg.
I reported this and offered to PR but never got an answer: https://github.com/jakearchibald/svgomg/issues/145
Re: Minify Your SVGs
#16Illustrator has an export SVG function (as opposed to just saving as an SVG, which I was doing and then using a minifer for a long time) that will minify it for you. That said, it currently appears unable to reopen those minified SVGs (go figure).
FYI you can copy any vector in Illustrator and when you paste it somewhere it is actually SVG code.
Re: Minify Your SVGs
#17A related (but less automated) advantage is if you're building react components that render SVG, this minified output will be much shorter and hopefully easier to reach through and figure out where you want to insert your own colours/child components.
Re: Minify Your SVGs
#18Pro tip for people with SVGs that have an image inside. You can pull that base64 image out of the svg, convert to image, compress it (tinypng, pngcrush etc) then convert back to base64 and out back in the SVG. We automated this with a slackbot but it’s often overlooked with all SVG optimization scripts.
Somewhat related: a while ago realized that the SVGs that draw.io generates (exports) have an interesting property. If you include an SVG inside such a drawing and you export it to SVG, that SVG is actually embedded as base64. This is unfortunately not supported by some programs (e.g., Microsoft Office). A quick fix is to actually expand the SVG into the big SVG. I wrote a quick tool for this that does this for you (I should consider open sourcing this maybe).
Anyway, I bet doing this and then minimizing the SVG could result in more savings?
Re: Minify Your SVGs
#19This is an excellent post! It does a fantastic job of defining the problem and walking the reader through the process of solving it. The language is so succinct and clear that even if the reader had never heard of SVGs before, they would understand this post. Well done, Victor!
Thanks, appreciate that!
Re: Minify Your SVGs
#20Unfortunately the reference to the actual minifier, SVGO (https://github.com/svg/svgo), is buried in the middle of the post.
SVGO is an incredible project driven by a single volunteer in spare time (originally Kir Belevich https://twitter.com/deepsweet , and for the last few years Lev Solntsev https://twitter.com/ruGreLI). It's the type of project you probably use regularly behind another tool like Sketch or SVGOMG (https://jakearchibald.github.io/svgomg/). They accept donations (https://www.paypal.me/deepsweet) and you should definitely consider contributing if you find it useful.