On the occasion of the Fronteers Meeting at eBuddy, 30 May 2013.
See the video for this talk at http://vimeo.com/80191459
SVG forResponsive HTML5
View Slide
@jvhellemond@frontlabJan van Hellemond
Bitmaps are sooo 2012
Mathematicallyde!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
!!!width="100" height="100">
Shapes:
Paths:
Boooooring
Filter e"ects:- Linear gradient- Radial gradients- Blur and noise- RGB color channel manipulation- Matrix transforms
HTML
background-image: url()CSS
HTML5
!!!!!!!!!!!!
Responsvive!Adaptive!Retina!
90%+
if (Modernizr.svg) {!// Supports SVG}
.svg .foobar {!background: url(foo.svg);}
<br/>#whizzo {<br/>!stroke-width: 3px;<br/>!fill-color: #336699;<br/>}<br/>
!<br/>#foo:hover {<br/>!fill-color: red;<br/>}<br/>
Animation
#rect:hover {!transition: ... ;}CSS3 transitions
Raphaëlraphaeljs.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 FontWOFFTrueType
fontsquirrel.com/tools/webfont-generator
icomoon.io
Tools
NotepadTextEdit
bohemiancodin.com/sketch/inkscape.orgInkscape Sketch
Adobe Illustrator
svg-editcode.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@frontlabThese slides onslideshare.net/frontlab