Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SVG Strikes Back

723 views

Published on

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/

Published in: Software
  • Be the first to comment

SVG Strikes Back

  1. 1. SVG STRIKES BACK Matt Baxter • @mbxtr • October 7, 2014
  2. 2. Matt Baxter @mbxtr
  3. 3. UX Designer Design + Code
  4. 4. SV-WHAT?
  5. 5. Scalable Vector Graphics
  6. 6. So Very Good
  7. 7. SVG is an open graphics standard, made for the web, based on XML.
  8. 8. SVG is for any illustrated image.
  9. 9. Logos
  10. 10. Logos
  11. 11. Icons
  12. 12. Icons
  13. 13. LOLcats
  14. 14. LOLcats
  15. 15. Scalability Vector Raster
  16. 16. Scalability Vector Raster
  17. 17. File Size 512x512 SVG (2kb) PNG (88kb)
  18. 18. True resolution independence
  19. 19. Responsive design is more than just mobile/tablet/desktop a
  20. 20. SVG is Old (in web years, anyways)
  21. 21. 1.0 Recommendation …back in 2001
  22. 22. Where has it been for 13 years?
  23. 23. 2001 2006 2005 2011
  24. 24. The need for resolution-independent images is greater than ever.
  25. 25. Screens in 2001 65% 800x600 30% 1024x768 http://www.nngroup.com/articles/computer-screens-getting-bigger/
  26. 26. Screens in 2014 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  27. 27. Pixel density in 2001 1x (standard monitor)
  28. 28. Pixel density in 2014 iOS 1x 2x 3x Android LDPI HDPI XXHDPI MDPI XHDPI XXXHDPI
  29. 29. SVG was made for the multi-device web.
  30. 30. Desktop Support All modern desktop browsers (IE 9+) http://caniuse.com/#feat=svg
  31. 31. Mobile Support All modern mobile browsers (Android 4+) http://caniuse.com/#feat=svg
  32. 32. Drawbacks? None (with correct images and fallbacks)
  33. 33. Finally, SVG is a practical web technology.
  34. 34. If it can be SVG, it should be SVG.
  35. 35. CREATING SVG
  36. 36. Manually
  37. 37. https://developer.mozilla.org/en-US/docs/Web/SVG/Element
  38. 38. Good luck with that! https://developer.mozilla.org/en-US/docs/Web/SVG/Element
  39. 39. But seriously, it can be useful to know a little. https://developer.mozilla.org/en-US/docs/Web/SVG/Element
  40. 40. Vector Programs Illustrator Sketch Inkscape
  41. 41. Vector Programs My weapon of choice
  42. 42. Be careful with this. Your SVG won’t have a width/ height and Internet Explorer may not render correctly.
  43. 43. Optimize with SVGO https://github.com/svg/svgo
  44. 44. USING SVG
  45. 45. Just like any other image
  46. 46. CSS Fallback
  47. 47. Inline Fallback
  48. 48. What about icon fonts?
  49. 49. Icon fonts… • Are difficult to position • Use a single color • Annoying to update • Browser inconsistencies
  50. 50. SVG… • Precision positioning • Multiple colors • Simple to update • Better browser consistency
  51. 51. To Recap…
  52. 52. SVG is… • Resolution independent • Small in file size • Cross-browser compatible • Simple to use
  53. 53. SVG is… • Resolution independent • Small in file size • Cross-browser compatible • Simple to use Start using it today!
  54. 54. But, that’s not all…
  55. 55. Since it’s XML…
  56. 56. THE DOM
  57. 57. Inject into HTML
  58. 58. Inspect w/ Dev Tools
  59. 59. Style with CSS http://www.opera.com/docs/specs/presto25/svg/cssproperties/
  60. 60. CSS Transitions
  61. 61. Media Queries
  62. 62. Attach Events
  63. 63. SVG.JS http://svgjs.com
  64. 64. SVG.JS
  65. 65. Trianglify (D3.js) http://qrohlf.com/trianglify/
  66. 66. PROTOTYPE http://tomgermeau.com/2014/02/how-designers-can-create- interactive-prototypes-with-illustrator/
  67. 67. Wireframes
  68. 68. Organize Layers
  69. 69. Export to SVG This time, we want responsive.
  70. 70. Load into HTML
  71. 71. Add Interactivity
  72. 72. Start Local Server
  73. 73. Set Emulation
  74. 74. Set Emulation
  75. 75. Open Browser
  76. 76. AND MORE
  77. 77. http://css-tricks.com/mega-list-svg-information/
  78. 78. THANKS! Slides: http://bit.ly/svg-strikes-back Tweet at me: @mbxtr

×