Squeezing KB's from SVG's
Welcome to the ever evolving guide on how to optimize our SVG's for the web, ᴋeller style. The below is a very opinionated guide on squeezing every last possible bit of (kilo)byte from our SVG's before putting them on our website. Less KBs are always better. Performance baby, yeah!
I've used Adobe's Illustrator for quite a while, so this guide features it to optimize an SVG. However, I've found other software can do the steps described equally well:
Update
Since writing this guide, I've had a lot of fun optimizing SVG's with Figma and SVGOMG , the latter being an fantastic PWA that performs most of the tasks listed below. Check it out!
Before we start, we need to make some changes to our Illustrator setup:
Set up Illustrator
In Illustrator, go to Edit → Keyboard Shortcuts in the main menu. The following pop-up should appear:
We'll likely need to make our own keyboard shortcuts set. I've set mine up as "Jochem", but you can do whatever you prefer. Switch the dropdown to Menu Commands and search for bounds. There should be 1 entry listed, without a default keyboard shortcut.
Now add a keyboard shortcut for this command, because we'll be using it a lot. I have it setup to the following keyboard shortcut:
I prefer it that way, but again, you do you!
Congrats! We've set up Illustrator for effortless SVG manipulation. Now, let's optimize an SVG.
In Illustrator
Open our SVG with Illustrator. It should look something like this:
If not, I recommend we set up our panels in a similar fashion to the screenshot above, for easier optimizing. The Layers panel is especially important going forward.
Strokes & fills
The first goal is to transfer the outline of a path to the fill of the path, for better cross browser compatibility. Review the bottom half of the left most panel. Does it look like this?
This means we have to transfer the color from the stroke to the fill. Do this by going to Object → Path → Outline Stroke in the main menu. This should invert the stroke to the fill, like so:
Do this for every path that has a stroke instead of a fill.
Groups
Now it's time to ungroup and combine all paths. Review the Layers panel again:
Select everything with ⌘ + A, then ungroup everything with ⌘ + ⇧ + G. We can do this multiple times, until we see no more Group's in the Layers panel. Our Layers panel should now look something like this:
Pathfinder
Now we turn to the Pathfinder, to combine every path to the most minimal amount possible. With single color icons like the one in this example, our goal should be 1 path and 1 path only. For multi color icons the most ideal result is 1 path per individual color.
If we can't find our Pathfinder window, open it up via the main menu: Window → Pathfinder. Now, with all the paths selected, press this button:
This should merge close to all the paths and turn our Layers panel from this:
To this:
1 Group to rule them all. Now once more, ungroup everything with ⌘ + ⇧ + G, which turns the Layers panel to the following:
Mostly nothing's changed right? In this example it didn't. But I can guarantee you this is a required step, so never skip it. Also, please review our SVG after these Pathfinder changes. Stuff can break. If I find an example of stuff breaking in the Pathfinder step, I'll add it to this guide. WIP, I guess.
Compound path
Now it's time to turn all these paths to one single Compound Path (or individual Compound Paths for every path with a color). With all the paths still selected, go to the main menu and Object → Compound Path → Release (or ⇧ + ⌘ + ⌥ + 8). This should turn our Layers panel from this:
To this:
Now create 1 single Compound Path by going to the main menu again and Object → Compound Path → Make (or ⌘ + 8):
Great success! We now have 1 single Compound Path in 1 color.
Fit to Artwork Bounds
Remember the keyboard shortcut from the beginning? If not, here it is (in my instance): ⌘ + *
Go ahead and run it. The artboard should shrink to the icon like so:
Export SVG
Now it's time to export. Do this by going to the following menu item in the main menu: File → Export → Export As.... The following screen should appear:
Check the Use Artboards option, give our icon a descriptive name and then press Export. This following screen should appear:
Our options probably aren't the same initially, but make sure every option matches with the above screenshot. Click OK, and we're done here!
Further optimizations
As a last step, we can squeeze some last (kilo)bytes from our SVG by removing the fill. Open the SVG we recently exported in an editor like Sublime Text. We should see something like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 155.59 211.13">
<title>icon-bulb-advanced</title>
<path
d="M45.51,57l-2.68,0c-3.54,0-12.67,2.66-12.67,14.73V100c0,5.92,3.38,14.73,12.68,14.73h2.69c3.53,0,12.68-2.65,12.68-14.73V71.71C58.21,65.79,54.83,57,45.51,57Zm6.7,43c0,8.12-5.61,8.7-6.68,8.73H42.84c-6.38,0-6.67-7.86-6.68-8.73V71.73c0-8.09,5.57-8.69,6.72-8.73l2.65,0c6.38,0,6.67,7.86,6.68,8.73ZM48.92,72.55a4.73,4.73,0,0,1-4.77,4.69l0,0h0a4.71,4.71,0,1,1,4.79-4.65ZM79.89,57l-2.68,0c-3.54,0-12.67,2.66-12.67,14.73V100c0,5.92,3.38,14.73,12.68,14.73h2.69c3.53,0,12.68-2.65,12.68-14.73V71.71C92.59,65.79,89.21,57,79.89,57Zm6.7,43c0,8.12-5.61,8.7-6.68,8.73H77.22c-6.39,0-6.67-7.86-6.68-8.73V71.73c0-8.09,5.57-8.69,6.72-8.73l2.65,0c6.38,0,6.67,7.86,6.68,8.73Zm-3.25-1.06a4.73,4.73,0,0,1-4.77,4.69l0,0h0a4.71,4.71,0,1,1,4.79-4.65ZM79.45,206.13a5,5,0,0,1-5,5H50.12a5,5,0,0,1,0-10H74.45A5,5,0,0,1,79.45,206.13ZM62.29,23.41h-.06a62.23,62.23,0,0,0-40.3,109.65c4.37,4.61,7.18,10.71,8.37,18.14a5,5,0,0,0,4.94,4.21H89.31a5,5,0,0,0,4.94-4.21c.81-5.1,2.81-12.25,7.72-17.51A62.28,62.28,0,0,0,62.29,23.41ZM95.38,126.16l-.44.41a40.64,40.64,0,0,0-9.73,18.84H39.33A41.68,41.68,0,0,0,29,125.94l-.38-.35A52.23,52.23,0,0,1,62.23,33.41h.06a52.28,52.28,0,0,1,33.09,92.75Zm.93,46.2a5,5,0,0,1-5,5H33.24a5,5,0,0,1,0-10H91.31A5,5,0,0,1,96.31,172.36Zm0,16.89a5,5,0,0,1-5,5H33.24a5,5,0,0,1,0-10H91.31A5,5,0,0,1,96.31,189.25ZM130.42,46.67a3,3,0,0,1-2,3.73,2.9,2.9,0,0,1-.86.13,3,3,0,0,1-2.87-2.14A27.83,27.83,0,0,0,121,40.7a28.45,28.45,0,0,0-5.56-6.17,16.53,16.53,0,0,0-5-2.89A3,3,0,1,1,112.53,26a22.42,22.42,0,0,1,6.75,3.93,34.15,34.15,0,0,1,6.68,7.4A33.62,33.62,0,0,1,130.42,46.67ZM142,43.53a3,3,0,0,1-2,3.73,2.9,2.9,0,0,1-.86.13,3,3,0,0,1-2.88-2.14,42.56,42.56,0,0,0-5.71-12A43.71,43.71,0,0,0,122,23.69a26,26,0,0,0-7.88-4.59,3,3,0,1,1,2.06-5.64,31.93,31.93,0,0,1,9.67,5.63,49.73,49.73,0,0,1,9.76,10.85A48.72,48.72,0,0,1,142,43.53Zm11.41,4.53a2.9,2.9,0,0,1-.86.13,3,3,0,0,1-2.87-2.14,65.9,65.9,0,0,0-8.79-18.35A67.5,67.5,0,0,0,127.71,13a41,41,0,0,0-12.27-7.16A3,3,0,1,1,117.52.19a47,47,0,0,1,14,8.18,73.31,73.31,0,0,1,14.36,16,71.75,71.75,0,0,1,9.55,20A3,3,0,0,1,153.45,48.06Z"
fill="#f28e1e"
/>
</svg>
Note the fill="<color>" at the end there? Go ahead and remove it, since the color of our SVG's are handled by our CSS 99,9% of the time.
Final change before we're done; go ahead and change the <title> value to something human friendly & readable. This greatly improves a11y (more about a11y ), which is always a win. So from the above example, change this:
<title>icon-bulb-advanced</title>
To something like this:
<title>Icon of a lightbulb, indicating an idea</title>
The more time you invest in subtle changes like this, the more people will thank you for it later. You're making the web a better place, one SVG at a time 👍
Eureka
We're done. Go ahead and add this optimized SVG to a website. There are several ways to do this, which I'll describe in a later blog.
Enjoy your squeezed SVG's! 🧙♂️