My process for create and publishing SVGs on the web is a little cumbersome. The goal of this walk-through is to be able to write a script (Grunt process) that’ll take care of this tedium for me.
Feel free to skip the backstory and go right to the script demo at the bottom.
To start I need an example of images that should be SVGs. As a designer and illustrator, I have these icons that I call my Tools of the Trade on my homepage:
- A Pencil for sketching – modeled after the Dixon® Ticonderoga #2 (my favorite toy)
- A Pen for illustrating – modeled after the Stabilo® .88 Drawing Pen
- A Marker for UX & whiteboarding – modeled after Standard Expo® Dry Erase Marker
- A Tablet Pen for design – modeled after Wacom® Intuos2 pen
I use them as background images in my header using the class .tooltime (a friendly nod to Tim “The Tool Man” Taylor and Al “The Bore Man” Boreland).
What’s Wrong with Images?
My biggest problem with these icons is that they aren’t transparent! Why are they even PNGs?! I could just re-export each one with an alpha channel, but because they were originally designed and exported using Illustrator why not clean them up and improve my design workflow at the same time.
Performance – SVGs instead of images FTW!
I already increased the performance using lazyload (actually LazySizes) taking the total payload of my single page portfolio site from ~4MB to 1mb; A 400% reduction (right?). So how big are these PNGs? Each one is about 3.6kb, plus the network request. I think we should be able to dramatically reduce that using SVG. (In fact we can, it’s only 1.1kb, plus no request).
Creating SVGs – Step-by-Step
1. In Adobe® Illustrator, create a new document that is the desired dimensions, or viewport. In this case it is 90x300px.
2. Open the original artwork, highlight the shapes and paths, copy and paste the graphic into the new document (step 1).
3. Next choose “Save As…” and change the format to “SVG”. Then click “Save”.
4. Next, select “SVG Code…” at the bottom.
5. Highlight and Copy the text in that SVG code dialog window.
6. Visit the SVG Editor from Google: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html
7. In the top left Select the SVG icon.
8. Paste the SVG Code from Illustrator into this SVG editor. Then click Apply Changes.
9. Now, Click the icon in the SVG Editor once more and copy the edited SVG code.
10. Open Peter Collingridge’s SVG Optimizer:
11. Paste the SVG Code in the the box and click “Load” button.
12. Choose the level of “Optimisation” (Conservative or Extreme).
13. Download the optimized SVG.
Now I’ll rename the SVG from “optimised.svg” to something more meaningful, i.e., tool-pencil.svg. Then upload to my server. Remember, even on the server I can still edit it, add groups, titles, CSS, fill and stroke colors, even animate it because SVG is markup. They are made for customizing. Also, remember original PNG was ~4kb. As an optimized SVG it is now only 1kb.
The process for optimizing SVGs isn’t hard, it just requires a few steps and tools. The goal of jotting this process down is because I would like to automate it instead of Copying & Pasting. I think I could build a script to do this. Essentially, saving the SVG right from Adobe® Illustrator that is optimized and ready for the web. Stay tuned for developments and thanks for reading!
CSS Tricks – Intro to SVG
Chris Coyier. Enough said. Tons of great resources here: https://css-tricks.com/using-svg/
Drawing Basic Shapes
Basic shapes are easier to draw than polygons. So if you find yourself needing a or element use the SVG shape syntax instead. It’s simpler to read and edit.
More Advanced Shapes
If you’re feeling adventurous and want to understand how the and element work, here are a few useful resources that I’ve found to teach you how to edit SVG paths:
Turn your SVGs into Base64 encoded images that you can quickly reference: http://www.mobilefish.com/services/base64/base64.php