SVG Strikes Back

Presented by Matt Baxter at the 2014 Front Porch Front End Web Developer Conference in Dallas, Texas.

@mbxtr bit.ly/svg-strikes-back

SV-what?
Scalable Vector Graphics
or
So very good

SVG is for any illustrated vector images

  • logos
  • icons

Scalability

  • Vector - stays crisp
  • Raster - gets blurry

File Size

  • SVG - 2kb
  • PNG - 88kb

True resolution independence

Responsive design is more than just mobile/tablet/desktop

SVG is Old - 13 years

Browser adoption
The need for resolution-independent images is greater today
Pixel density in

  • 2001 = 1x
  • 2014
    • 1x
    • 2x
    • 3x

SVG was made for the multi-device web

Drawbacks? - NONE!

If it can be SVG, it should be SVG.

Creating SVGs

  • Manually
  • Vector programs
    • Illustrator
    • Sketch
    • Inkscape

Illustrator

  • Responsive box, will remove height and width breaking it in IE

Optimize with SVGO

Use SVG

  • just like any other image on the web
  • fallback for other browsers
    • Inline fallback
    • CSS fallback

What about icon fonts?

  • Are difficult to position
  • Use a single color
  • Annoying to update
  • Browser inconsistencies

SVG…

  • Precision positioning
  • Multiple colors
  • simple to update
  • better brewer consistency

 Start using it today!

But, that’s not all…

The DOM

  • Inject it into HTML
  • Inspect with Dev Tools
  • Manipulate with CSS
  • CSS transitions
  • Media queries
  • JavaScript
    • Attach events
    • SVG.js
    • Trianglify (d3.js)

Prototype

  • Wireframes
  • Organize Layers and name
  • Export to SVG w/responsive checked
  • Load into HTML with jQuery
  • Add Interactivity
    • jQuery selectors
    • Events
  • Start local server
  • Emulate in Chrome
  • Open browser

And Much, Much, More

www.css-tricks.com/mega-list-of-svg

This post is from the Front Porch Conference Series. If you enjoyed it, please check out the others below.