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

Like this? Share it with your network

Share

SVG vs Canvas - Showdown of the Painters

  • 1,120 views
Uploaded 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.

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,120
On Slideshare
1,119
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
107
Comments
0
Likes
7

Embeds 1

http://www.verious.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/