SVGito: Little Optimizations for SVGs
A web-app with new optimizations for your SVG files—especially those exported from Sketch.
Today I’m releasing a free little web-app for optimizing (“cleaning up”) SVG files. It’s called SVGito.
If the idea of SVG code or optimization is new to you, take a moment to read this other article explaining how to think about SVG.
As its name suggests*, SVGito is a small tool. It helps designers and developers by automating a few improvements to SVGs that you would normally have to do by manually editing the code. These improvements typically reduce an SVG’s complexity and file size, while retaining the same visual appearance.
Today SVGito is launching with just a few optimizations (listed below). Most of these cannot be found in other SVG optimizers, and more optimizations will come in the future. What you see today is a starting point; a foundation.
Using it is simple: you paste your SVG code, SVGito quickly runs optimizations on it, then you copy the resulting code.
What it is and what it isn’t:
- It is primarily focused on cleaning up SVGs exported from Sketch. SVGs generated from other design tools should work, but were not the focus.
- It is useful for targeting specific issues in certain SVG files—there are many SVGs that will not benefit from these optimizations.
- It is not a replacement for other SVG optimizers. SVGito offers additional optimizations you won’t find in other tools.
- It is most effective when you use it before other optimizers.
🗜 The Optimizations
☑️ Clean Up Sketch Layers with Fills + Inside/Outside Borders
This optimization inpired SVGito in the first place. Starting with version 43, Sketch writes a lot of extra SVG code for layers with a fill and an inside or outside border. I cover the details in the second half of this article:
SVGito performs the optimization I suggest in that article, which transfers the fill attribute onto the element being used for the stroke. It also fixes the antialiasing edges issue, which makes this the only optimization in SVGito that should change the visuals your graphic.
- Intended only for SVGs exported from Sketch
- Works with multiple fills and/or multiple borders per layer
- Maintains the fill rule and fill opacity on your layer
- The Sketch SVGO plugin sometimes eliminates information from the SVG that can be critical to detecting when this optimization should run. I suggest turning the plugin off if you intend to use this optimization.
☑️ Replace “Single-Instance” <use> Elements with Their Reference
In SVG,<use> elements are a lot like Symbols in Sketch. Any element with an ID (often tucked away in the <defs> area of an SVG) can be cloned with any number of <use> elements. So these <use> elements are a lot like Symbol instances.
This optimization looks for any <use> elements in the SVG that are the only instance of the element they reference. When it finds one, SVGito replaces that <use> element with the thing it referenced.
- This is a no-brainer improvement; single-instance
<use>elements are almost never practical and always add file size to an SVG. - If you prefer not to use the Fill + Inside/Outside Border optimization for a particular SVG, you can at least clean up any unnecessary single-instance
<use>elements from Sketch’s markup with this optimization.
☑️ Remove Unnecessary Fill-Rule Attributes
This optimization removes fill-rule attributes from types of elements that would never need them. For example, fill-rule is never going to change the appearance of a <circle> element.
- This optimization won’t remove the attribute from types of elements with a possibility of being affected by
fill-rule, such as<path>elements. fill-ruleattributes on groups will only be removed if the elements inside wouldn’t be affected.
Only a super intelligent program could analyze every fill-rule attribute for whether or not it affects the appearance of your graphic. This optimization is intended to address the low-hanging fruit; you can often find additional fill-rule attributes to remove if you manually edit the code.
☑️ Remove <defs> if there’s nothing inside
This optimization simply removes the <defs> element if it’s empty, after all of the other optimizations are done. Many SVG optimizers, like those based on SVGO, do this too.
Is there an optimization you’d like to add?
See below for how to contact me about suggestions and contributions.
* What’s behind the name?
I recently moved to Buenos Aires, Argentina. In Spanish, ito is a diminutive suffix; something you add to a word that makes it seem small or endearing. The name SVGito plays off making an SVG smaller through optimization.
You can pronounce it however you’re used to saying “SVG” — just add “ito” to the end!
I’m fully aware that the pronunciation will change in different languages. Speaking in English, I pronounce it “es · vee · jee · toe”. In Spanish, the letters “S · V · G” are pronounced differently, so adding “ito” makes it sound kind of similar to “ese viejito” 👴🏼. It’s just a silly name—say it however you’d like.
📨 Suggestions, contributions, and bug reports are welcome!
This is the first version of SVGito and it’s just complete enough to release into the world. I’m excited for you to use it and share your feedback!
contact@sketchmaster.com (or through the Sketch Master Contact page)
Please note that SVGito is a side project, made freely available; it is not my primary work, so suggestions or bug reports may take some time to reply to.
Known bugs and recent fixes are listed here.
🐞 If you are reporting a bug, please include your SVG file and screenshots of the issue.
🛠 ✏️ If you’re interested in contributing code to SVGito, such as writing or improving an optimization, I love your enthusiasm and we should talk. The app uses React, and optimizations can be written in vanilla JavaScript or jQuery. In the future I hope to open-source SVGito and all of its optimizations.
SVGito is a spin-off project of my new course, SVG Workflows in Sketch:
Special thanks to Satish Kunisi for spearheading the engineering of SVGito.
