Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG Strikes Back

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/

Matt Baxter

October 07, 2014
Tweet

More Decks by Matt Baxter

Other Decks in Technology

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