SVG Optimization

End-all, Be-all Edition

Created by Kyle Foster / @hkfoster

If you haven't already...

  1. Watch my first video
  2. Read Chris Coyier's article

Workflow suggestions

  1. Use Sublime Text 2's “Join” shortcut
  2. base64 encode in the Terminal
  3. Use SVGO instead of SVG Optimiser

Sublime Text 2's “Join” shortcut

 cmd + j ... seriously, that's it

Shell script for base64 encoding

 openssl base64 < path/to/file.png | tr -d '\n' | pbcopy 
 cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy 

Even better base64 encoding

Emmet in Sublime Text 2

SVG optimization breakdown

See the example on CodePen: Editor View or Full-screen

 

Best to Worst:

  1. SVGO*
  2. SVG Optimiser
  3. Hand Optimized
  4. Flattened
  5. Raw

 

*Not so fast, partner...

The problem(s) with SVGO

  1. Homebrew + Xcode + node + npm
  2. Declares width/height instead of viewbox
  3. Only works at original artboard dimensions
  4. Can't be resized via CSS

 

Official recommendation? Stick to SVG Optimiser. Peter will be updating it soon anyway.

Takeaway

  1. Any optimization (even by hand) is better than no optimization at all
  2. Read/view as much as you can and do what works best for you
  3. Raphaël.js is pretty boss
  4. GSAP + SVG is pretty boss as well

Relevant Links:

  1. An Optimized SVG Workflow
  2. Using SVG
  3. SVGO + SVGO GUI
  4. Emmet
  5. Emmet Encoding Docs
  6. SVG Optimiser
  7. Raphaël.js
  8. GSAP + SVG Pen
  9. SVG Optimization Pen