Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads.
Web Vector Graphics



    Web Directions South ’08
     Dmitry Baranovskiy
Web Myths:
Web is text only
Web pages are static
Web is synchronous
Web is rectangular
Canvas   SVG
Canvas   SVG

 !
Canvas   SVG

 !
Canvas   SVG
SVG
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<!DOCTYPE svg PUBLIC quot;-//W3C//DTD SVG 1.1//ENquot; quot;http://...
Canvas
window.onload = function () {
    var elem = document.createElement(quot;canvasquot;);
    elem.width = 500;
    elem.heig...
Canvas
Canvas


 SVG
Support
Does browser support
      Canvas?
Does browser support
          Canvas?

if (window.CanvasRenderingContext2D) {
    …
}
Does browser support
       SVG?
Does browser support
           SVG?

if (window.SVGAngle) {
    …
}
178
6
SVGAngle
SVGLength
SVGPathSeg
SVGPreserveAspectRatio
SVGTransform
SVGUnitTypes
Tests:

SVG 178 : http://www.w3.org/Graphics/SVG/Test/20061213/
            htmlObjectHarness/full index.html

Canvas 672 ...
203
           118



   469
           160


  Canvas   SVG




64%
182     60



   490     218



  Canvas   SVG




76%
30
   184


           248
   488



  Canvas   SVG




81%
What does it mean?
ere is support
…with one
Important Exception
0%
VML
VML
VML
VML
So, what can you do
with Canvas ! SVG?
Shapes
Images
Text
Canvas   SVG   VML
JavaScript off
CSS
Result          pixels   DOM   DOM
Animation
Filters
Image Data
Text
Stand alone
Easy...
SVG

Canvas VML
What stops you from
 using this now?
How to do this across
  all the browsers?
DojoX

http://dojotoolkit.org/projects/dojox/
ExCanvas.js
           !
       mooCanvas.js

    http://excanvas.sourceforge.net/
http://ibolmo.com/projects/moocanvas/
Raphaël

http://raphaeljs.com/
Cappuccino

http://cappuccino.org/
Just go and do it!
ank You



http://dmitry.baranovskiy.com/
   dmitry@baranovskiy.com
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Upcoming SlideShare
Loading in …5
×
13,526 views

Published on

Canvas

Published in: Technology, Art & Photos
www.best-cooler.reviews

www.best-cooler.reviews/category/oa-gear/

best-cooler.reviews

×