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. SVG STRIKES BACK Matt Baxter • @mbxtr • October 7,

    2014
  2. Matt Baxter @mbxtr

  3. None
  4. UX Designer Design + Code

  5. SV-WHAT?

  6. Scalable Vector Graphics

  7. So Very Good

  8. SVG is an open graphics standard, made for the web,

    based on XML.
  9. SVG is for any illustrated image.

  10. Logos

  11. Logos

  12. Icons

  13. Icons

  14. LOLcats

  15. LOLcats

  16. Scalability Vector Raster

  17. Vector Raster Scalability

  18. File Size SVG (2kb) PNG (88kb) 512x512

  19. True resolution independence

  20. Responsive design is more than just 
 mobile/tablet/desktop a

  21. SVG is Old (in web years, anyways)

  22. 1.0 Recommendation …back in 2001

  23. Where has it been for 13 years?

  24. 2001 2006 2005 2011

  25. The need for resolution- independent images is greater than ever.

  26. Screens in 2001 http://www.nngroup.com/articles/computer-screens-getting-bigger/ 65% 800x600 30% 1024x768

  27. Screens in 2014 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

  28. Pixel density in 2001 1x (standard monitor)

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

    XXHDPI MDPI XHDPI XXXHDPI Android
  30. SVG was 
 made for the multi-device web.

  31. Desktop Support All modern desktop
 browsers (IE 9+) http://caniuse.com/#feat=svg

  32. Mobile Support All modern mobile
 browsers (Android 4+) http://caniuse.com/#feat=svg

  33. Drawbacks? None (with correct images and fallbacks)

  34. Finally, SVG is a practical web technology.

  35. If it can be SVG, 
 it should be SVG.

  36. CREATING SVG

  37. Manually

  38. https://developer.mozilla.org/en-US/docs/Web/SVG/Element

  39. https://developer.mozilla.org/en-US/docs/Web/SVG/Element Good luck with that!

  40. https://developer.mozilla.org/en-US/docs/Web/SVG/Element But seriously, it can be useful to know a

    little.
  41. Vector Programs Illustrator Sketch Inkscape

  42. My weapon of choice Vector Programs

  43. None
  44. None
  45. Be careful with this. 
 Your SVG won’t have a

    width/ height and Internet Explorer may not render correctly.
  46. None
  47. https://github.com/svg/svgo Optimize with SVGO

  48. USING SVG

  49. Just like any other image

  50. CSS Fallback

  51. Inline Fallback

  52. What about icon fonts?

  53. • Are difficult to position • Use a single color

    • Annoying to update • Browser inconsistencies Icon fonts…
  54. • Precision positioning • Multiple colors • Simple to update

    • Better browser consistency SVG…
  55. To Recap…

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

    compatible • Simple to use SVG is…
  57. • Resolution independent • Small in file size • Cross-browser

    compatible • Simple to use SVG is… Start using it today!
  58. But, that’s not all…

  59. Since it’s XML…

  60. THE DOM

  61. Inject into HTML

  62. Inspect w/ Dev Tools

  63. None
  64. http://www.opera.com/docs/specs/presto25/svg/cssproperties/ Style with CSS

  65. CSS Transitions

  66. Media Queries

  67. None
  68. Attach Events

  69. SVG.JS http://svgjs.com

  70. SVG.JS

  71. Trianglify (D3.js) http://qrohlf.com/trianglify/

  72. http://tomgermeau.com/2014/02/how-designers-can- create-interactive-prototypes-with-illustrator/ PROTOTYPE

  73. Wireframes

  74. Organize Layers

  75. Export to SVG This time, we want responsive.

  76. None
  77. Load into HTML

  78. Add Interactivity

  79. None
  80. None
  81. Start Local Server

  82. Set Emulation

  83. Set Emulation

  84. Open Browser

  85. None
  86. AND MORE

  87. http://css-tricks.com/mega-list-svg-information/

  88. THANKS! Slides: http://bit.ly/svg-strikes-back Tweet at me: @mbxtr