I love vector graphics. I love SVG. And I love a good session of byte squeezing.
When I was triggered by Medium's new logo, I played around with their SVG source for the symbol icon, what they call "Unfinished Ellipses" — let's not go into the "beauty" of it … (to be honest I don't like it; it does not look very inspiring to me)
This post is more about some tiny revelation I had during my SVG icon optimization session earlier today.
Most of the time the <path> element is used for more or less complex graphics. But in the case of Medium's symbol, it was clear they could have used very simple shapes (aka primitives) like <circle>, <ellipse> (yes, Medium, that is a thing! :P), and others.
And most of the time the final code with such primitives should be much shorter, as a circle or ellipse can be described in a very concise fashion, while a path only knows how to draw straight lines, curves, and arcs. All of them involve usually more data than the primitive version.
Example: circle vs path
<!-- simple shape: a circle -->
<circle cx="500" cy="500" r="500"/>
<!-- converted to path -->
<path d="M1000 500a500 500 0 01-500 500A500 500 0 010 500 500 500 0
01500 0a500 500 0 01500 500z"/>
So all is good and we can go home, right?
Well, not so fast.
TIL There are exceptions when the code of your primitive can be bigger than a complete path definition. And I think the line element will be always heavier compared to its path counterpart.
Example: line vs path
<!-- line primitive: -->
<line x1="0" y1="80" x2="100" y2="20" />
<!-- path equivalent: -->
<path d="M0 80l100-60"/><!-- 16 chr -->
A single line would not make such a difference, but with many of them that can add up easily. And given that you usually combine many lines into a single path you will start saving even more.
So, unless you draw only a few circles, ellipses, and rectangles you will probably be better off with a single or combined path element.
Oh, and a very easy way to optimize your SVG code is the site SVGOMG. I know I can install svgo, but for a quick and dirty pass I always visit that page and paste my source and see how much it can reduce.
Final note: Always verify your assumptions. I was not 100 % sure about the overhead or savings of the primitive shapes, I'm glad I ran tests to get some proof. And don't be afraid if your experiments tells that you were wrong. That's life. 🤷🏻♂️
Top comments (0)