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. Bitmaps: ✔ Less creative constraint ✔ Do not need e"ects

    ✔ Better support, currently ✔ Better tools
  2. Filter e"ects: - Linear gradient - Radial gradients - Blur

    and noise - RGB color channel manipulation - Matrix transforms
  3. @media screen and (max-width: 50px) { ! #circle { !

    ! fill: #a8c45f; ! } } CSS media queries
  4. Icon fonts: ✔ Vectors, in!nitely scalable ✔ Small, fewer bytes

    ✔ Single request, cachable ✘ Single color ✘ Simple shapes
  5. Summary: ✔ Vectors are cool ✔ Use in HTML5 today

    ✔ Detect support, supply fallback ✔ Embed instead of link ✔ Don't go overboard