Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
Designer working across UI/UX, web, branding, & traditional forms of graphic design. Creator of Sketch Master — online training courses for Sketch. pnowell.com
May 2
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.
Optimizations are processed on an SVG in the order they are listed.
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.
<use>
Elements with Their ReferenceIn 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.
<use>
elements are almost never practical and always add file size to an SVG.<use>
elements from Sketch’s markup with this optimization.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.
fill-rule
, such as <path>
elements.fill-rule
attributes 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.
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.
See below for how to contact me about suggestions and contributions.
The most notable bug right now is that Safari and Firefox occasionally show an innacurate visual “Preview” of your SVG. This isn’t an issue in Chrome. And it’s just a bug with the preview; your SVG code is always problem-free.
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.
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!
[email protected] (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.
🐞 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.
Special thanks to Satish Kunisi for spearheading the engineering of SVGito.
SVGito is a spin-off project of my upcoming course on SVG Workflows in Sketch. You can sign up to be notified when it’s released.
AI-driven updates, curated by humans and hand-edited for the Prototypr community