SVG

SCALABLE VECTOR GRAPHICS

Why NOW?


(http://beta.caniuse.com/#feat=svg)

RASTER IMAGES


SVG IS A set of instructions


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="360px" height="360px" viewBox="0 0 360 360" enable-background="new 0 0 360 360" xml:space="preserve">
  <circle fill="#ED1C24" cx="126" cy="126" r="90"/>
  <rect x="144" y="144" fill="#21409A" width="180" height="180"/>
</svg>
( http://codepen.io/xiwcx/pen/ifHzn?editors=100 )

svg for the web
General Guidelines


"Good" "Bad"
Flat Textured
Simple Incredibly detailed
Illustrated Photorealistic

SVGs are...


...resolution independent
...small (ideally)

INcluding svg


<img>
css background-image
<object>
inline svg

( http://css-tricks.com/using-svg )

SVG HAS SUPERPOWERS

SVG SUPERPOWER:
scalable, searchable text


http://css-tricks.com/svg-text-typographic-designs

http://codepen.io/xiwcx/pen/IEGza?editors=100

SVG SuperPOWER:
ELEMENT QUERIES


http://timkadlec.com/2013/04/media-queries-within-svg/

http://timkadlec.com/test/mq-svg/object.html

SVG Superpower:
ANIMATION & INTERACTIVITY


http://css-tricks.com/animating-svg-css/
http://d3js.org/
http://datamaps.github.io/
http://snapsvg.io/

EXTRA RESOURCES


http://5by5.tv/webahead/67 (SVG)
http://5by5.tv/webahead/70 (d3)
https://petercollingridge.appspot.com/svg-editor
http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map
Made with Slides.com