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

753d76fb50296086339abdf80bcb1fc5?s=128

Jan van Hellemond

May 30, 2013
Tweet

Transcript

  1. SVG for Responsive HTML5

  2. @jvhellemond @frontlab Jan van Hellemond

  3. Bitmaps are sooo 2012

  4. Mathematically de!ned shapes

  5. Bitmap Vector

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

    ✔ Editable ✔ Stylable
  7. Bitmaps: ✔ Less creative constraint ✔ Do not need e"ects

    ✔ Better support, currently ✔ Better tools
  8. None
  9. None
  10. SVG = XML

  11. <svg> !<rect x="0" y="5" !!width="100" height="100"> </svg>

  12. <line/> <rect/> <circle/> <ellipse/> <polyline/> <polygon/> Shapes:

  13. Paths:

  14. Boooooring

  15. Boooooring

  16. Boooooring

  17. Boooooring

  18. Boooooring

  19. None
  20. None
  21. None
  22. None
  23. Filter e"ects: - Linear gradient - Radial gradients - Blur

    and noise - RGB color channel manipulation - Matrix transforms
  24. <object data="" type=""> HTML

  25. None
  26. <img src=""> HTML

  27. None
  28. background-image: url() CSS

  29. None
  30. None
  31. <svg></svg> HTML5

  32. <body> !<div> !!<svg> !!!<rect x="0" y="10".../> !!!<path d="..."/> !!</svg> !</div>

    </body>
  33. SVG = XML

  34. <body> !<div> !!<svg xmlns="..."> !!!<rect x="0" y="10".../> !!!<path d="..."/> !!</svg>

    !</div> </body>
  35. Responsvive! Adaptive! Retina!

  36. 90%+

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

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

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

  40. <svg> !<path id="foo" d="..."/> </svg> <style> #foo:hover { !fill-color: red;

    } </style>
  41. <animate from="" to=""/> Animation

  42. <animateTransform .../> Animation

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

  44. Raphaël raphaeljs.com

  45. @media screen and (max-width: 50px) { ! #circle { !

    ! fill: #a8c45f; ! } } CSS media queries
  46. @font-face { ... } SVG Fonts

  47. Icon fonts

  48. Icon fonts: ✔ Vectors, in!nitely scalable ✔ Small, fewer bytes

    ✔ Single request, cachable ✘ Single color ✘ Simple shapes
  49. None
  50. SVG Font WOFF TrueType

  51. fontsquirrel.com/tools/webfont-generator

  52. icomoon.io

  53. Tools

  54. Notepad TextEdit

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

  56. Adobe Illustrator

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

  58. Summary: ✔ Vectors are cool ✔ Use in HTML5 today

    ✔ Detect support, supply fallback ✔ Embed instead of link ✔ Don't go overboard
  59. @jvhellemond @frontlab These slides on slideshare.net/frontlab