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 full-size slide

  2. @jvhellemond
    @frontlab
    Jan van Hellemond

    View full-size slide

  3. Bitmaps are sooo 2012

    View full-size slide

  4. Mathematically
    de!ned shapes

    View full-size slide

  5. Bitmap Vector

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  10. background-image: url()
    CSS

    View full-size slide


  11. !
    !!
    !!!
    !!!
    !!
    !

    View full-size slide


  12. !
    !!
    !!!
    !!!
    !!
    !

    View full-size slide

  13. Responsvive!
    Adaptive!
    Retina!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  17. !

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

    View full-size slide

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

    View full-size slide

  19. Raphaël
    raphaeljs.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. SVG Font
    WOFF
    TrueType

    View full-size slide

  24. fontsquirrel.com/tools/webfont-generator

    View full-size slide

  25. Notepad
    TextEdit

    View full-size slide

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

    View full-size slide

  27. Adobe Illustrator

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide