SVG for the Responsive Web

SVG for Responsive HTML5

@jvhellemond @frontlab Jan van Hellemond

Bitmaps are sooo 2012

Mathematically de!ned shapes

Bitmap Vector

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

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

SVG = XML

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

Paths:

Boooooring

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

<img src=""> HTML

background-image: url() CSS

<svg></svg> HTML5

SVG = XML

Responsvive! Adaptive! Retina!

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

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

<animate from="" to=""/> Animation

<animateTransform .../> Animation

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

Raphaël raphaeljs.com

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

@font-face { ... } SVG Fonts

Icon fonts

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

SVG Font WOFF TrueType

fontsquirrel.com/tools/webfont-generator

icomoon.io

Notepad TextEdit

bohemiancodin.com/sketch/ inkscape.org Inkscape Sketch

Adobe Illustrator

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

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

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

More Decks by Jan van Hellemond