SVG for Web
I recently gave a talk at Front End London about creating resolution independent graphics. It was similar to the talk I gave at Responsive Day Out, except that I did a live coding session on animating SVG’s.
The talk went pretty well, but at the end someone noticed that I was exporting my SVG files with 4 decimal places of precision. They asked if that was a little overkill and if I had thought about reducing that down. Embarrassing.
Well in order to redeem myself, I’ve modified the amazing Fireworks plugin, Export and made the changes I wanted to it. These mainly relate to creating much smaller SVG files than the plugin made by default. The original plugin wasn’t bad, but it needed a bit of yak shaving. I’ve called my version SVG for Web.
Using this new plugin on an existing SVG file, I was able to reduce the file size by 38% from 8,486 bytes to 5,278 bytes, and after gzipping the file was reduced by 46% from 3,817 bytes to 2,075 bytes. Nice!
When you install the plugin and click
Commands → SVG for Web → Export SVG you’ll get asked a series of questions:
- If you’ve selected items you will be asked whether to just export selected items
- Next, you’ll get asked to specify how many decimal places of precision you’d like
- The next dialog asks whether to set the width and height to 100% so the resulting SVG scales automatically
- Finally, you’ll get asked where to save the file
If that seems a little to arduous, don’t sweat! I also made an option
Export SVG Quick which has the following defaults:
- Export selected items if there is a selection
- One decimal place of precision
- Scale the SVG to 100%