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
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Web Vector Graphics
Upcoming SlideShare
Loading in …5
×

Web Vector Graphics

12,354 views

Published on

My presentation on vector graphics at Web Directions South ’08

Published in: Technology, Art & Photos
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
12,354
On SlideShare
0
From Embeds
0
Number of Embeds
863
Actions
Shares
0
Downloads
185
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Web Vector Graphics

  1. Web Vector Graphics Web Directions South ’08 Dmitry Baranovskiy
  2. Web Myths:
  3. Web is text only
  4. Web pages are static
  5. Web is synchronous
  6. Web is rectangular
  7. Canvas SVG
  8. Canvas SVG !
  9. Canvas SVG !
  10. Canvas SVG
  11. SVG
  12. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <!DOCTYPE svg PUBLIC quot;-//W3C//DTD SVG 1.1//ENquot; quot;http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtdquot;> <svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot; xmlns:xlink=quot;http://www.w3.org/1999/xlinkquot;> <rect fill=quot;#333quot; width=quot;426quot; height=quot;260.667quot;/> <ellipse cx=quot;213quot; cy=quot;130quot; rx=quot;205quot; ry=quot;117quot;> <animate attributeName=quot;fillquot; attributeType=quot;CSSquot; begin=quot;0squot; dur=quot;6squot; fill=quot;freezequot; from=quot;#000quot; to=quot;#f00quot;/> <animate attributeName=quot;rxquot; begin=quot;0squot; dur=quot;6squot; fill=quot;freezequot; from=quot;205quot; to=quot;117quot;/> </ellipse> <path fill=quot;nonequot; stroke=quot;#fffquot; stroke-width=quot;5quot; stroke-linecap=quot;roundquot; d=quot;M24.397,99.601c0,0,12.537,0,16.805,0s10.137, 5.869,10.137,5.869s16.273,43.75,18.94,49.885 ... s-1.601,63.224,12.805,63.224h28.01quot;/> </svg>
  13. Canvas
  14. window.onload = function () { var elem = document.createElement(quot;canvasquot;); elem.width = 500; elem.height = 500; document.body.appendChild( elem ); var context = elem.getContext(quot;2dquot;); context.fillRect(0, 0, elem.width, elem.height); var pos = 0, dir = 1; setInterval(function () { context.rotate( 15 ); context.fillStyle = quot;rgba(0,0,0,0.05)quot;; context.fillRect(0, 0, elem.width, elem.height); context.fillStyle = quot;rgba(255, 0, 0, 1)quot;; context.fillRect(pos, pos, 20, 20); pos += dir; if ( pos > elem.width ) { dir = -1; } else if ( pos + 20 < 0 ) { dir = 1; } }, 10); };
  15. Canvas
  16. Canvas SVG
  17. Support
  18. Does browser support Canvas?
  19. Does browser support Canvas? if (window.CanvasRenderingContext2D) { … }
  20. Does browser support SVG?
  21. Does browser support SVG? if (window.SVGAngle) { … }
  22. 178
  23. 6 SVGAngle SVGLength SVGPathSeg SVGPreserveAspectRatio SVGTransform SVGUnitTypes
  24. Tests: SVG 178 : http://www.w3.org/Graphics/SVG/Test/20061213/ htmlObjectHarness/full index.html Canvas 672 : http://philip.html5.org/tests/canvas/suite/tests/
  25. 203 118 469 160 Canvas SVG 64%
  26. 182 60 490 218 Canvas SVG 76%
  27. 30 184 248 488 Canvas SVG 81%
  28. What does it mean?
  29. ere is support
  30. …with one Important Exception
  31. 0%
  32. VML
  33. VML
  34. VML
  35. VML
  36. So, what can you do with Canvas ! SVG?
  37. Shapes
  38. Images
  39. Text
  40. Canvas SVG VML JavaScript off CSS Result pixels DOM DOM Animation Filters Image Data Text Stand alone Easy to use
  41. SVG Canvas VML
  42. What stops you from using this now?
  43. How to do this across all the browsers?
  44. DojoX http://dojotoolkit.org/projects/dojox/
  45. ExCanvas.js ! mooCanvas.js http://excanvas.sourceforge.net/ http://ibolmo.com/projects/moocanvas/
  46. Raphaël http://raphaeljs.com/
  47. Cappuccino http://cappuccino.org/
  48. Just go and do it!
  49. ank You http://dmitry.baranovskiy.com/ dmitry@baranovskiy.com

×