SVG
SVG is an XMLbased vectorgraphics format.            can be part of do                             m
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg">  <rect x="10" y="10"    width="30" height="30"    stroke="black" f...
Ca    nva       s SVG
Retained m                                                       ode api Canvas: Pixel                       SVG:    Array...
Canvas: Pixels   SVG: Vectors
Canvas: Only   SVG: Graphics in Browser       Format      t of dom,                    can be par nvas                    ...
Canvas:                    SVG: Low Level                 High Level+  2d performance   high throughput                   ...
Canvas                               SVG<canvas id=c></canvas>            <svg version="1.1" xmlns=                       ...
http://raphaeljs.com/analytics.html
http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg
BrowserSupport   66%
Summary SVGSVG is a vector graphics document that can be used like a normal htmlelement. It is higher level than canvas. y...
Material Used            Banksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/            Banksy “Flowi...
Material Used       3d teapot model http://resumbrae.com/ub/dms423_f08/10/ Metal Teapot http://www.flickr.com/photos/11273...
Upcoming SlideShare
Loading in...5
×

SVG vs Canvas - Showdown of the Painters

994

Published on

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.

Published in: Technology, Art & Photos
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
994
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
114
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

SVG vs Canvas - Showdown of the Painters

  1. 1. SVG
  2. 2. SVG is an XMLbased vectorgraphics format. can be part of do m
  3. 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. 4. Ca nva s SVG
  5. 5. Retained m ode api Canvas: Pixel SVG: Array Document Treeimmediate 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. 6. Canvas: Pixels SVG: Vectors
  7. 7. Canvas: Only SVG: Graphics in Browser Format t of dom, can be par nvas like ca
  8. 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. 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. 10. http://raphaeljs.com/analytics.html
  11. 11. http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg
  12. 12. BrowserSupport 66%
  13. 13. Summary SVGSVG is a vector graphics document that can be used like a normal htmlelement. It is higher level than canvas. you define objects, attributesand animations - redrawing is done automatically for you.
  14. 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. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×