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

SVG for the Responsive Web

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

Jan van Hellemond

May 30, 2013
Tweet

More Decks by Jan van Hellemond

Other Decks in Technology

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