• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SVG vs Canvas - Showdown of the Painters
 

SVG vs Canvas - Showdown of the Painters

on

  • 992 views

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.

Statistics

Views

Total Views
992
Views on SlideShare
991
Embed Views
1

Actions

Likes
7
Downloads
107
Comments
0

1 Embed 1

http://www.verious.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SVG vs Canvas - Showdown of the Painters SVG vs Canvas - Showdown of the Painters Presentation Transcript

    • 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" fill="transparent" stroke-width="5" /></svg>
    • Ca nva s SVG
    • 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
    • Canvas: Pixels SVG: Vectors
    • Canvas: Only SVG: Graphics in Browser Format t of dom, can be par nvas like ca
    • 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
    • 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>
    • 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. you define objects, attributesand animations - redrawing is done automatically for you.
    • 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/
    • 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/