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=\"1.0\" encoding=\"utf-8\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd\">
<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"
xmlns:xlink=\"http://www.w3.org/1999/xlink\">
<rect fill=\"#333\" width=\"426\" height=\"260.667\"/>
<ellipse cx=\"213\" cy=\"130\" rx=\"205\" ry=\"117\">
<animate attributeName=\"fill\" attributeType=\"CSS\"
begin=\"0s\" dur=\"6s\" fill=\"freeze\"
from=\"#000\" to=\"#f00\"/>
<animate attributeName=\"rx\" begin=\"0s\" dur=\"6s\"
fill=\"freeze\" from=\"205\" to=\"117\"/>
</ellipse>
<path fill=\"none\" stroke=\"#fff\" stroke-width=\"5\"
stroke-linecap=\"round\"
d=\"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.01\"/>
</svg>

Canvas

window.onload = function () {
var elem = document.createElement(\"canvas\");
elem.width = 500;
elem.height = 500;
document.body.appendChild( elem );
var context = elem.getContext(\"2d\");
context.fillRect(0, 0, elem.width, elem.height);
var pos = 0, dir = 1;
setInterval(function () {
context.rotate( 15 );
context.fillStyle = \"rgba(0,0,0,0.05)\";
context.fillRect(0, 0, elem.width, elem.height);
context.fillStyle = \"rgba(255, 0, 0, 1)\";
context.fillRect(pos, pos, 20, 20);
pos += dir;
if ( pos > elem.width ) {
dir = -1;
} else if ( pos + 20 < 0 ) {
dir = 1;
}
}, 10);
};

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 : http://philip.html5.org/tests/canvas/suite/tests/

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 to use

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