Recently I found myself playing about on the snap.svg site (take a look if you haven’t used it yourself yet). It has a really nice SVG polygon background on the header, which weighs in at a meagre 2.2Kb. Because I’m weird, I decided to try and make it smaller.
In Illustrator
The SVG file itself looks like this when opened up in Illustrator:
Then if you check the outline view (View > Outline) you see all the vector paths laid out without fill colours:
“What a mess!” I thought “I’m sure I can tidy that up and reduce the file size.” So I went about cleaning up the lines to remove all the unnecessary over-lapping.
Puzzling
With the Pathfinder tool you can use objects to “cookie cut” their form from objects underneath. In this way you can avoid having any shapes over-lapping, instead creating a more “jigsaw puzzle” effect.
Much better. Once I’d done the same with the whole illustration, I was looking at this:
I Was Wrong
In doing this, the file size didn’t shrink, it grew. Whereas the original weighed 2.217Kb, the new version weighed 2.269Kb. A tiny difference in real terms, but “tidying” things up had nevertheless made the file heavier. On a larger graphic the effect could have made a big difference.
But why? It’s all down to nodes, or anchors; the joints along a vector path. SVG files are nothing but XML data, and each node along a path requires additional coordinates. The original file may have been built from a bunch of over-lapping triangles, but layering doesn’t cost file size at all (any objects within an XML document are inherently displayed in order). What created the extra size was my having made quadrilateral (four-sided) polygons from the triangles. Oops.
Here’s how they look as SVG code, first one of the originals:
<polygon fill="#46CEB4" points="1434.5,-21.75 1644.5,-21.75 1524.5,158.25 "/>
And now one of my “improved” shapes:
<polygon fill="#97E8DA" points="1584.5,258.2 1744.5,228.2 1745,228.2 1634.5,88.2 1550.2,256.8 "/>
More data. Simple as that.
Clean Your Nodes
The take away lesson from this is to remove any unwanted nodes from your SVG files, but don’t worry about overlapping. Shedding nodes is the number one way of reducing complexity and thereby file size.
Use the Delete Anchor Point tool (-) to remove an anchor from a path. You’ll be surprised how few anchors a vector path needs whilst still retaining its form! One well-placed anchor will do the job of three poorly thought out ones.
Stray Points
One final tip is to remove stray points from your SVG. Stray points are often invisible because they can’t be filled, but they’ll cost you data all the same. In Illustrator, go to Select > Object > Stray Points to select them all, then hit delete to remove them.
I hope you learned something from this! It’s one of those seemingly obvious things which I’d just never thought about before. Had you?
