Vectors Aren’t (Just) Graphics — Why ♥ is prettier than ♥

TL;DR… Vectors are also code. Treat them accordingly.

Let’s draw a heart. I’m drawing using spiros because that’s how I can draw curves fast. Our heart looks like this:

You can see the Spiro nodes in the second picture.

Unfortunately only a few applications support this way of drawing vectors so we convert it to bezier curves and now our heart looks like this (code shown below):

The result would look similar if we had used e.g. our pen tablet.

Many of the icons on thenounproject, iconfinder and other places looks like this and the only way to find out is to download them.

Why, then, is a path like that a problem?

1. The file size is unnecessary big and your website visitors will get slower loading times.
2. The resulting code is bloated. It makes it harder to work with (animations and other fun stuff).
3. You can’t really modify it. Say you downloaded the above heart icon but you want to alter the shape of the left half a little bit so it isn’t symmetrical any more. You would have to alter the position and handles of some 10 nodes to do that.

Got it. How then do we improve it?

Many graphic tools (Illustrator, Inkscape, Affinity Designer etc) can optimise the path for you. Just remember to duplicate the shape prior to optimising it so you can fix any distortions easily. This how it looks after doing that:

The path is cleaner now with drastically fewer nodes making it easily editable and the resulting code is a lot more compact.

I’m assuming this isn’t good enough for you?

Correct! The code could be a lot more compact so let’s try and save it into a “magic” folder and without any extra effort we have this:

Less is always more but does the heart still look the same?

I’d say the differences are imperceptible but look at the two hearts below and tell for yourself.

The first one is the original image. The second one is the optimised version

Conclussion

We went from 20 to 6 nodes so our heart is now easy to edit. We also reduced the file size by 82% (1.128 to 206 bytes).

Not too bad from just optimising the path before saving to a magic folder.

The Magic Folder

The following tutorial is for Mac computers

It’s a simple folder action. To get it you just a little bit of terminal skills. Ask your coder friend if you’re entering unchartered waters.

Install npm

Tutorial on e.g. teamtreehouse.com

Install SVGO

Type this in your terminal

sudo npm install -g svgo

Create a folder

I’ve called mine SVGO and put it inside my home directory but anything goes.

Add the folder action

Open Automator.app on your mac and create a new folder action. Choose your SVGO folder. Then drag “Run AppleScript” into the flow and replace the example code with the following:

Save

That’s basically it. Now whenever you add a .svg file to your SVGO folder it get’s optimised automagically.

If the end result is too distorted you will have to increase the size of your drawing prior to exporting it. So if your viewbox is e.g. 48x48 then try to increase it to 480x480 as in the example above.

The distorting occurs because we round all values to integers. That rounding will be relatively bigger the lower the resolution the canvas has.