SVG vs Canvas - Showdown of the Painters
-
Upload
phil-reither -
Category
Technology
-
view
963 -
download
2
description
Transcript of SVG vs Canvas - Showdown of the Painters
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/