SVG Strikes Back

06b03e8f46b702647fae572f68725ae0?s=47 Matt Baxter
October 07, 2014

SVG Strikes Back

SVG was first introduced on the web in 2001 and finally came around to being a practical web technology in 2011. Thanks to wide browser support and the popularity of retina screens, SVG is a powerful and flexible technology that everyone should have in their web development toolbox. In this talk, I'll tell you why should be using SVGs now and how to integrate SVGs into responsive websites, use it in iconography for resolution independence, and use JavaScript and CSS to create animations and interactive prototypes.

I gave this talk at Front Porch in Dallas, TX on October 7th. http://frontporch.io/

06b03e8f46b702647fae572f68725ae0?s=128

Matt Baxter

October 07, 2014
Tweet

Transcript

  1. 3.
  2. 10.
  3. 11.
  4. 12.
  5. 13.
  6. 14.
  7. 15.
  8. 29.

    Pixel density in 2014 iOS 1x 2x 3x LDPI HDPI

    XXHDPI MDPI XHDPI XXXHDPI Android
  9. 37.
  10. 43.
  11. 44.
  12. 45.

    Be careful with this. 
 Your SVG won’t have a

    width/ height and Internet Explorer may not render correctly.
  13. 46.
  14. 48.
  15. 53.

    • Are difficult to position • Use a single color

    • Annoying to update • Browser inconsistencies Icon fonts…
  16. 54.
  17. 57.

    • Resolution independent • Small in file size • Cross-browser

    compatible • Simple to use SVG is… Start using it today!
  18. 60.
  19. 63.
  20. 67.
  21. 70.
  22. 76.
  23. 79.
  24. 80.
  25. 85.
  26. 86.