No video for this one, but here’s some useful information for manually optimizing SVGs in Adobe Illustrator beyond what the app does automatically.
Sometimes the SVG you want to use looks perfectly good in Illustrator, but it’s not quite how you would want to use it on the web.
One of the things we look at in this video is a simple shape that seems like it would be a single shape but is actually four shapes sitting on top of each other. To simplify that, we just select all the shapes and use the Pathfinder tools in Illustrator to combine them into a single shape. We can see that reflected immediately in the code. Sometimes it’s kinda fun to have the SVG file open both in Illustrator and in a code editor so as you save it you can see what it’s doing to the code.
The Pathfinder is great for manual optimization of shapes – it’s worth getting to know what those buttons do – and what they do with the option key pressed as well.
The size of an SVG file is, to a large degree, determined by how many points there are going on in the shapes. There are other factors, but that’s the biggie. Another thing we look at in this video is using Illustrators Simplify Path feature to reduce the number of points on some texture-ish shapes to bring the file size way down.
Another thing to know: compound paths can be useful. Two shapes that are totally separate from one another can still be one path. Like, literally one. The syntax allows for essentially “pick up the pen, move it somewhere else, draw something new”. So when you create a compound path in Illustrator (e.g. multiple independent shapes, Object > Compound Path > Make) that’s how it outputs. Can lead to simplified/optimized SVG output.
