Web Vector Graphics

Web Directions South ’08Dmitry 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

6SVGAngleSVGLengthSVGPathSegSVGPreserveAspectRatioSVGTransformSVGUnitTypes

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/

64%Canvas

203

469

SVG

118

160

76%Canvas

182

490

SVG

60

218

81%Canvas

184

488

SVG

30

248

What does it mean?

$ere is support

…with oneImportant Exception

0%

VML

VML

VML

VML

So, what can you do with Canvas ! SVG?

Shapes

Images

Text

Canvas SVG VMLJavaScript o! ☆☆ ★★ ★★CSS ☆☆ ★★ ★☆Result pixels DOM DOMAnimation ☆☆ ★★ ☆☆Filters ☆☆ ★★ ★☆Image Data ★★ ☆☆ ☆☆Text ★☆ ★★ ★☆Stand"alone ☆☆ ★★ ★☆Easy to use ★★ ★☆ ☆☆

SVG

VMLCanvas

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