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/

Transcript

1. SVG STRIKES BACK Matt Baxter • @mbxtr • October 7, 2014
2. Matt Baxter @mbxtr
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
45. Be careful with this. 
 Your SVG won’t have a width/ height and Internet Explorer may not render correctly.
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
64. http://www.opera.com/docs/specs/presto25/svg/cssproperties/ Style with CSS
65. CSS Transitions
66. Media Queries
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.
77. Load into HTML
78. Add Interactivity
81. Start Local Server
82. Set Emulation
83. Set Emulation
84. Open Browser
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