SVG Strikes Back
•
2 likes•937 views
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/
Report
Share
SVG Strikes Back
- 1. SVG STRIKES BACK Matt Baxter • @mbxtr • October 7, 2014
- 4. UX Designer Design + Code
- 5. SV-WHAT?
- 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
- 18. File Size 512x512 SVG (2kb) PNG (88kb)
- 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 65% 800x600 30% 1024x768 http://www.nngroup.com/articles/computer-screens-getting-bigger/
- 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 Android LDPI HDPI XXHDPI MDPI XHDPI XXXHDPI
- 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
- 39. Good luck with that! https://developer.mozilla.org/en-US/docs/Web/SVG/Element
- 40. But seriously, it can be useful to know a little. https://developer.mozilla.org/en-US/docs/Web/SVG/Element
- 41. Vector Programs Illustrator Sketch Inkscape
- 42. Vector Programs My weapon of choice
- 45. Be careful with this. Your SVG won’t have a width/ height and Internet Explorer may not render correctly.
- 47. Optimize with SVGO https://github.com/svg/svgo
- 48. USING SVG
- 49. Just like any other image
- 50. CSS Fallback
- 51. Inline Fallback
- 52. What about icon fonts?
- 53. Icon fonts… • Are difficult to position • Use a single color • Annoying to update • Browser inconsistencies
- 54. SVG… • Precision positioning • Multiple colors • Simple to update • Better browser consistency
- 55. To Recap…
- 56. SVG is… • Resolution independent • Small in file size • Cross-browser compatible • Simple to use
- 57. SVG is… • Resolution independent • Small in file size • Cross-browser compatible • Simple to use 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. Style with CSS http://www.opera.com/docs/specs/presto25/svg/cssproperties/
- 65. CSS Transitions
- 66. Media Queries
- 68. Attach Events
- 70. SVG.JS
- 73. Wireframes
- 74. Organize Layers
- 75. Export to SVG This time, we want responsive.
- 77. Load into HTML
- 82. Set Emulation
- 83. Set Emulation
- 84. Open Browser
- 86. AND MORE
- 88. THANKS! Slides: http://bit.ly/svg-strikes-back Tweet at me: @mbxtr