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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SVG vs Canvas - Showdown of the Painters

896
views

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.

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
896
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
109
Comments
0
Likes
7
Embeds 0
No embeds

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/