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 <path>. The <path> 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 independant shapes, Object > Compound Path > Make) that's how it outputs. Can lead to simplified/optimized SVG output.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag