• Like
SVG vs Canvas - Showdown of the Painters
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

SVG vs Canvas - Showdown of the Painters


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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. SVG
  • 2. SVG is an XMLbased vectorgraphics 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 SVG
  • 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. 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. BrowserSupport 66%
  • 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. 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/