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%

I forked the plugin for my own uses, but I hope it’ll come in hand for others. Feel free to fork and improve it, although you’ll have to get used to the wonky JavaScript format of Fireworks plugins.

Download SVG for Web from GitHub

Notice: Array to string conversion in /var/www/ on line 22

Fatal error: Uncaught Error: Function name must be a string in /var/www/ Stack trace: #0 /var/www/ tags(Object(page)) #1 /var/www/ require('/var/www/joshem...') #2 /var/www/ tpl::loadFile('/var/www/joshem...', Array, true) #3 /var/www/ tpl::load('post', Array, true) #4 /var/www/ site->load() #5 /var/www/ require_once('/var/www/joshem...') #6 {main} thrown in /var/www/ on line 22