SVG

SVG is an XML based vector graphics format.

can be part of dom

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />

</svg>

Canv

as SVG

Canvas: Pixel Array

SVG:Document Tree

ctx.strokeStyle = '#c66';ctx.lineWidth = 1;ctx.strokeRect( 0.5, 60.5, 150, 50);

use this color

to draw a shape

immediate mode api

Retained mode api

<svg><rect>

<circle>

size: 10, 10color: grey

position: 10, 10

size: 13, 37color: grey

position: 10, 69

Canvas: Pixels SVG: Vectors

Canvas: Onlyin Browser

SVG: Graphics Format

can be part of dom,

like canvas

Canvas:Low Level

SVG:High Level

+ 2d performancehigh throughput

+ Redrawingmovement immediatelydrawn

+ InteractiveEasy to hang listenerson events

+ Draw pixelsdrawing not limitedto primatives

+ VectorsResolution independentscaling

+ import/exportit’s a graphicsfile format

Canvas SVG

<canvas id=c></canvas>

<script> var c = document. getElementsById('c'); c.width = c.width; var ctx = c.getContext('2d'); ctx.strokeStyle = 'pink'; ctx.lineWidth = 3; ctx.strokeRect( 10, 20, 13, 37);</script>

<svg version="1.1" xmlns= "http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 Z"/> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/></svg>

http://raphaeljs.com/analytics.html

http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg

66%Browser Support

Summary SVGSVG is a vector graphics document that can be used like a normal html element. It is higher level than canvas. you define objects, attributes and animations - redrawing is done automatically for you.

Material UsedBanksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/

Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/

Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/

Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpg

Banksy “You have got to be kidding me” http://www.banksy.co.uk/

Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/

Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/

Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/

Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/

Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/

Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/

Material Used3d teapot model http://resumbrae.com/ub/dms423_f08/10/

Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/

furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/

Television Icon http://thenounproject.com/noun/television/#icon-No416

Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/

Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/

Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/