SVG for the Responsive Web

On the occasion of the Fronteers Meeting at eBuddy, 30 May 2013.

See the video for this talk at http://vimeo.com/80191459

Transcript

1. SVG for
   Responsive HTML5
   

   View Slide

2. @jvhellemond
   @frontlab
   Jan van Hellemond
   

   View Slide

3. Bitmaps are sooo 2012
   

   View Slide

4. Mathematically
   de!ned shapes
   

   View Slide

5. Bitmap Vector
   

   View Slide

6. Vectors:
   ✔ In!nitely scalable
   ✔ Resolution independent
   ✔ Fewer bytes
   ✔ Editable
   ✔ Stylable
   

   View Slide

7. Bitmaps:
   ✔ Less creative constraint
   ✔ Do not need e"ects
   ✔ Better support, currently
   ✔ Better tools
   

   View Slide

8. View Slide

9. View Slide

10. SVG = XML
    

    View Slide

11. 
    !!!width="100" height="100">
    
    

    View Slide

12. 
    
    
    
    
    
    Shapes:
    

    View Slide

13. Paths:
    

    View Slide

14. Boooooring
    

    View Slide

15. Boooooring
    

    View Slide

16. Boooooring
    

    View Slide

17. Boooooring
    

    View Slide

18. Boooooring
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. Filter e"ects:
    - Linear gradient
    - Radial gradients
    - Blur and noise
    - RGB color channel manipulation
    - Matrix transforms
    

    View Slide

24. 
    HTML
    

    View Slide

25. View Slide

26. 
    HTML
    

    View Slide

27. View Slide

28. background-image: url()
    CSS
    

    View Slide

29. View Slide

30. View Slide

31. 
    HTML5
    

    View Slide

32. 
    !
    !!
    !!!
    !!!
    !!
    !
    
    

    View Slide

33. SVG = XML
    

    View Slide

34. 
    !
    !!
    !!!
    !!!
    !!
    !
    
    

    View Slide

35. Responsvive!
    Adaptive!
    Retina!
    

    View Slide

36. 90%+
    

    View Slide

37. if (Modernizr.svg) {
    !// Supports SVG
    }
    

    View Slide

38. .svg .foobar {
    !background: url(foo.svg);
    }
    

    View Slide

39. <br/>#whizzo {<br/>!stroke-width: 3px;<br/>!fill-color: #336699;<br/>}<br/>
    

    View Slide

40. 
    !
    
    <br/>#foo:hover {<br/>!fill-color: red;<br/>}<br/>
    

    View Slide

41. 
    Animation
    

    View Slide

42. 
    Animation
    

    View Slide

43. #rect:hover {
    !transition: ... ;
    }
    CSS3 transitions
    

    View Slide

44. Raphaël
    raphaeljs.com
    

    View Slide

45. @media screen and (max-width: 50px) {
    ! #circle {
    ! ! fill: #a8c45f;
    ! }
    }
    CSS media queries
    

    View Slide

46. @font-face { ... }
    SVG Fonts
    

    View Slide

47. Icon fonts
    

    View Slide

48. Icon fonts:
    ✔ Vectors, in!nitely scalable
    ✔ Small, fewer bytes
    ✔ Single request, cachable
    ✘ Single color
    ✘ Simple shapes
    

    View Slide

49. View Slide

50. SVG Font
    WOFF
    TrueType
    

    View Slide

51. fontsquirrel.com/tools/webfont-generator
    

    View Slide

52. icomoon.io
    

    View Slide

53. Tools
    

    View Slide

54. Notepad
    TextEdit
    

    View Slide

55. bohemiancodin.com/sketch/
    inkscape.org
    Inkscape Sketch
    

    View Slide

56. Adobe Illustrator
    

    View Slide

57. svg-edit
    code.google.com/p/svg-edit
    

    View Slide

58. Summary:
    ✔ Vectors are cool
    ✔ Use in HTML5 today
    ✔ Detect support, supply fallback
    ✔ Embed instead of link
    ✔ Don't go overboard
    

    View Slide

59. @jvhellemond
    @frontlab
    These slides on
    slideshare.net/frontlab
    

    View Slide