This document discusses web vector graphics and compares Canvas and SVG technologies. It provides examples of code for creating shapes with Canvas and SVG. It also analyzes browser support for Canvas and SVG over time, finding that support for both has increased, though SVG support levels have surpassed Canvas. The document recommends libraries like DojoX, ExCanvas, and Raphael that can help support Canvas and SVG across different browsers.

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

8. Canvas SVG

9. Canvas SVG
!

10. Canvas SVG
!

11. Canvas SVG

12. SVG

13. <?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>

15. Canvas

16. 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);
};

20. Canvas

21. Canvas
SVG

23. Support

24. Does browser support
Canvas?

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

26. Does browser support
SVG?

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

28. 178

29. 6
SVGAngle
SVGLength
SVGPathSeg
SVGPreserveAspectRatio
SVGTransform
SVGUnitTypes

30. 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/

31. 203
118
469
160
Canvas SVG
64%

32. 182 60
490 218
Canvas SVG
76%

34. 30
184
248
488
Canvas SVG
81%

35. What does it mean?

36. ere is support

37. …with one
Important Exception

38. 0%

39. VML

40. VML

41. VML

42. VML

43. So, what can you do
with Canvas ! SVG?

44. Shapes

47. Images

49. Text

51. Canvas SVG VML
JavaScript off
CSS
Result pixels DOM DOM
Animation
Filters
Image Data
Text
Stand alone
Easy to use

52. SVG
Canvas VML

55. What stops you from
using this now?

56. How to do this across
all the browsers?

58. DojoX
http://dojotoolkit.org/projects/dojox/

59. ExCanvas.js
!
mooCanvas.js
http://excanvas.sourceforge.net/
http://ibolmo.com/projects/moocanvas/

60. Raphaël
http://raphaeljs.com/

61. Cappuccino
http://cappuccino.org/

62. Just go and do it!

63. ank You
http://dmitry.baranovskiy.com/
dmitry@baranovskiy.com