A look at what SVG is, the similarities and differences to the HTML5 canvas element. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.

1. SVG

2. SVG is an XML
based vector
graphics format.
can be part of do
m

3. <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>

4. Ca
nva
s
SV
G

5. Retained m
ode api
Canvas: Pixel SVG:
Array Document Tree
immediate mode api
use this color <svg>
ctx.strokeStyle = '#c66';
ctx.lineWidth = 1; <rect> size: 10, 10
color: grey
ctx.strokeRect( 0.5, 60.5, position: 10, 10
150, 50);
e
to draw a shap <circle> size: 13, 37
color: grey
position: 10, 69

6. Canvas: Pixels SVG: Vectors

7. Canvas: Only SVG: Graphics
in Browser Format t of dom,
can be par nvas
like ca

8. Canvas: SVG:
Low Level High Level
+ 2d performance
high throughput
+ Redrawing
movement immediately
drawn
+ Draw pixels
drawing not limited
to primatives
+ Interactive
Easy to hang listeners
on events
+ Vectors
Resolution independent
scaling
+ import/export
it’s a graphics
file format

9. Canvas SVG
<canvas id=c></canvas> <svg version="1.1" xmlns=
"http://www.w3.org/2000/svg">
<script> <path d="M10 10 H 90 V 90
var c = document. H 10 Z"/>
getElementsById('c'); <circle cx="10" cy="10"
c.width = c.width; r="2" fill="red"/>
var ctx = c.getContext('2d'); <circle cx="90" cy="90"
ctx.strokeStyle = 'pink'; r="2" fill="red"/>
ctx.lineWidth = 3; <circle cx="90" cy="10"
ctx.strokeRect( 10, 20, r="2" fill="red"/>
13, 37); <circle cx="10" cy="90"
</script> r="2" fill="red"/>
</svg>

10. http://raphaeljs.com/analytics.html

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

12. Browser
Support 66%

13. Summary SVG
SVG 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.

14. Material Used
Banksy “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/

15. Material Used
3d 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/