DEV Community

loading...
Cover image for Shrinking SVG code: ❮path❯ not always bigger

Shrinking SVG code: ❮path❯ not always bigger

Christoph Grabo
*mörb*
・2 min read

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"/>
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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. 🤷🏻‍♂️

Discussion (0)