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
   

   View Slide

2. Matt Baxter
   @mbxtr
   

   View Slide

3. View Slide

4. UX Designer
   Design + Code
   

   View Slide

5. SV-WHAT?
   

   View Slide

6. Scalable
   Vector
   Graphics
   

   View Slide

7. So
   Very
   Good
   

   View Slide

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

   View Slide

9. SVG
   is for any illustrated
   image.
   

   View Slide

10. Logos
    

    View Slide

11. Logos
    

    View Slide

12. Icons
    

    View Slide

13. Icons
    

    View Slide

14. LOLcats
    

    View Slide

15. LOLcats
    

    View Slide

16. Scalability
    Vector Raster
    

    View Slide

17. Vector Raster
    Scalability
    

    View Slide

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

    View Slide

19. True resolution
    independence
    

    View Slide

20. Responsive design is
    more than just 

    mobile/tablet/desktop
    a
    

    View Slide

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

    View Slide

22. 1.0 Recommendation
    …back in 2001
    

    View Slide

23. Where has it been
    for 13 years?
    

    View Slide

24. 2001 2006
    2005
    2011
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. Pixel density in 2014
    iOS
    1x
    2x
    3x
    LDPI
    HDPI
    XXHDPI
    MDPI
    XHDPI
    XXXHDPI
    Android
    

    View Slide

30. SVG was 

    made for the
    multi-device web.
    

    View Slide

31. Desktop Support
    All modern desktop

    browsers (IE 9+)
    http://caniuse.com/#feat=svg
    

    View Slide

32. Mobile Support
    All modern mobile

    browsers (Android 4+)
    http://caniuse.com/#feat=svg
    

    View Slide

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

    View Slide

34. Finally, SVG is a
    practical web
    technology.
    

    View Slide

35. If it can be SVG, 

    it should be SVG.
    

    View Slide

36. CREATING
    SVG
    

    View Slide

37. Manually
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. Vector Programs
    Illustrator Sketch Inkscape
    

    View Slide

42. My weapon of choice
    Vector Programs
    

    View Slide

43. View Slide

44. View Slide

45. Be careful with this. 

    Your SVG won’t have a width/
    height and Internet Explorer
    may not render correctly.
    

    View Slide

46. View Slide

47. https://github.com/svg/svgo
    Optimize with SVGO
    

    View Slide

48. USING
    SVG
    

    View Slide

49. Just like any other image
    

    View Slide

50. CSS Fallback
    

    View Slide

51. Inline Fallback
    

    View Slide

52. What about
    icon fonts?
    

    View Slide

53. • Are difficult to position
    • Use a single color
    • Annoying to update
    • Browser inconsistencies
    Icon fonts…
    

    View Slide

54. • Precision positioning
    • Multiple colors
    • Simple to update
    • Better browser consistency
    SVG…
    

    View Slide

55. To Recap…
    

    View Slide

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

    View Slide

57. • Resolution independent
    • Small in file size
    • Cross-browser compatible
    • Simple to use
    SVG is…
    Start using it today!
    

    View Slide

58. But, that’s
    not all…
    

    View Slide

59. Since it’s XML…
    

    View Slide

60. THE DOM
    

    View Slide

61. Inject into HTML
    

    View Slide

62. Inspect w/ Dev Tools
    

    View Slide

63. View Slide

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

    View Slide

65. CSS Transitions
    

    View Slide

66. Media Queries
    

    View Slide

67. View Slide

68. Attach Events
    

    View Slide

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

    View Slide

70. SVG.JS
    

    View Slide

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

    View Slide

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

    View Slide

73. Wireframes
    

    View Slide

74. Organize Layers
    

    View Slide

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

    View Slide

76. View Slide

77. Load into HTML
    

    View Slide

78. Add Interactivity
    

    View Slide

79. View Slide

80. View Slide

81. Start Local Server
    

    View Slide

82. Set Emulation
    

    View Slide

83. Set Emulation
    

    View Slide

84. Open Browser
    

    View Slide

85. View Slide

86. AND MORE
    

    View Slide

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

    View Slide

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

    View Slide