Vector vs Raster Graphics: SVG, Canvas, and CSS3 Options

Vector Graphics on the Web
Pascal Rettig
@cykod

Vector vs. Raster
Raster = Pixels = Bitmaps = .PNG, .JPEG ...
Vector = Primitives = Shapes = .AI, .SVG

Vectors can easily be “Rasterized” at a
certain resolution into Bitmaps
Rasters cannot easily be “Vectorized”
without a whole lot of work

Why do we care?
• Designers often create as vectors anyway.

Why do we care?
• Resolution independent

Why do we care?
• Smaller ﬁle size (when used appropriately)

Why do we care?
• Smaller ﬁle size (when used appropriately)
Hmm, sounds like they would be good for
mobile...

What are the options:
• Two W3C approved: SVG, Canvas

• One “IE Special”: VML

• One “IE Special”: VML

• One “Sorta-kinda-vectorlike”: CSS3

SVG
• XML based format
• SVG 1.1 W3C Recommendation since 2003
• Not something you generally write by hand -
Create with Illustrator or Inkscape
• Paths, Shapes, Fonts,Text, Fills, Gradients, Patterns,

The Dream
(not reality)

Use as an image:
<img src=‘images/tiger.svgz’/>

The Dream
(not reality)

Use as an image:
<img src=‘images/tiger.svgz’/>

or Embed Directly:
<html xmlns:svg="http://www.w3.org/2000/svg">
...
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2"
fill="red" />
</svg:svg>

The reality

http://en.wikipedia.org/wiki/
Comparison_of_layout_engines_(Scalable_Vector_Graphics)

The Reality (TL;DR)
• Only Chrome, FF4 support gzipped SVG
• Only Chrome, FF4 support HTML5 Direct
Embedding
• IE Support only coming in IE9

The Solution?
Use a library!
SVG Web
Use’s Native SVG or Flash
You still write SVG ﬁles / data
http://code.google.com/p/svgweb/

Raphael.js
Uses Native SVG or VML
Javascript API
http://raphaeljs.com/

SVG Web
<script src="svg.js"></script>

Then embed with an object tag or:
<script type="image/svg+xml">
<svg width="400" height="300" id="svg11242"> ... </svg>
</script>

Scriptable from JavaScript pretty much normally

Raphael.js

var paper = Raphael(10, 50, 320, 200);

var circle = paper.circle(50, 40, 10);

circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

Other Common uses

Protovis - the graphing library you always wanted
Cufon - font replacement with SVG/VML

HTML5 Canvas Tag
• Standardized by the WHATWG (2007)
• Grew out of WebKit (Dashboard Widgets)
• Javascript interface to a bunch o’ Pixels

Pixels?
Where are the Vectors?

Pixels?
Where are the Vectors?
<canvas> only stores pixel data.
But, <canvas> has drawing primitives for:
Rectangles, Lines, Quadtratic & Beizer Curves, Arcs,
Fills, Text, Gradients...
All drawing is done via a Javascript API

Canvas Example
<canvas id=”canvas” width=”150″ height=”150″>
Your Browser don’t be supporting canvas
</canvas>

var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(100,0,0)”;
ctx.fillRect (0, 0, 100, 100);
}

https://developer.mozilla.org/en/
drawing_graphics_with_canvas

Example #2: JS1K

http://marijnhaverbeke.nl/js1k/
c=document.body.children[0];h=t=150;L=w=c.width=800;u=D=50;H=[];R=Math.random;for($ in C=
c.getContext('2d'))C[$[J=X=Y=0]+($[6]||'')]=C[$];setInterval("if(D)for(x=405,i=y=I=0;i<1e4;)L=
H[i++]=i<9|L<w&R()<.3?w:R()*u+80|0;$=++t%99-u;$=$*$/8+20;y+=Y;x+=y-H[(x+X)/u|0]>9?0:X;j=H[o=
x/u|0];Y=y<j|Y<0?Y+1:(y=j,J?-10:0);with(C){A=function(c,x,y,r){r&&a(x,y,r,0,7,0);fillStyle=c.P
?c:'#'+'ceff99ff78f86eeaaffffd45333'.substr(c*3,3);f();ba()};for(D=Z=0;Z<21;Z++){Z<7&&A(Z%6,w/
2,235,Z?250-15*Z:w);i=o-5+Z;S=x-i*u;B=S>9&S<41;ta(u-S,0);G=cL(0,T=H[i],0,T+9);T%6||(A(2,25,T-7
,5),y^j||B&&(H[i]-=.1,I++));G.P=G.addColorStop;G.P(0,i%7?'#7e3':(i^o||y^T||(y=H[i]+=$/99),
'#c7a'));G.P(1,'#ca6');i%4&&A(6,t/2%200,9,i%2?27:33);m(-6,h);qt(-6,T,3,T);l(47,T);qt(56,T,56,
h);A(G);i%3?0:T<w?(A(G,33,T-15,10),fc(31,T-7,4,9)):(A(7,25,$,9),A(G,25,$,5),fc(24,$,2,h),D=B&y
>$-9?1:D);ta(S-u,0)}A(6,u,y-9,11);A(5,M=u+X*.7,Q=y-9+Y/5,8);A(8,M,Q,5);fx(I+'¢',5,15)}D=y>h?1:D"
,u);onkeydown=onkeyup=function(e){E=e.type[5]?4:0;e=e.keyCode;J=e^38?J:E;X=e^37?e^39?X:E:-E}

Canvas Reality...
• No native IE support

Canvas Reality...
• No native IE support
• Current browser implementations are slow

Canvas Near future...

• IE Support in IE9 (IE6-IE8 w/ excanvas.js)


• Next-gen browser support hardware-
accelerated-awesomeness across the board


• Next-gen browser support hardware-
accelerated-awesomeness across the board
• WebGL support

Canvas Status

Q1 2010 Q4 2010 Q2 2011 Q4 2011

CSS3 features that replace
bitmap hacks:
Rounded corners - *-border-radius
Drop shadows: *-box-shadow
Text Shadows: text-shadow
Gradients: *-gradient
Fonts: @font-face

CSS3 Caveats
You probably want to use a CSS Framework
such as SASS/LESS to DRY the vendor preﬁxes.

IE6-8 - fake it with http://css3pie.com/

What also can be done:

http://graphicpeel.com/cssiosicons

How
• Gradients, Rounded Corners, Shadows +
• Borders
• Rotations
• Pseudo-elements
• Transforms
• Z-index Masking
• A bunch of nested <div>’s

A Good idea? Maybe.
• CSS3 Icons probably not worth the markup
complexity.
• But a re-scalable pure CSS logo...

http://www.csstemplateheaven.com/articlestutorials/pure-
css3-logo/

SVG vs. Canvas
SVG Canvas

SVG vs. Canvas
SVG Canvas

Persistent Scene Graph
Hover, Click Events
Browser does the work

SVG vs. Canvas
SVG Canvas

Persistent Scene Graph Just Pixels (can R/W)
Hover, Click Events Own Event calculations
Browser does the work Full canvas refresh

Yo Dawg, I heard you
like vector graphics...

http://burst.bocoup.com/

Yo Dawg, I heard you
like vector graphics...
So I put SVG in your Canvas so you could
animate while you rasterize.

http://burst.bocoup.com/

Thanks!
pascal@cykod.com
@cykod

Vector vs Raster Graphics: SVG, Canvas, and CSS3 Options

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Vector vs Raster Graphics: SVG, Canvas, and CSS3 Options

Semelhante a Vector vs Raster Graphics: SVG, Canvas, and CSS3 Options (20)

Mais de Pascal Rettig

Mais de Pascal Rettig (9)

Último

Último (20)

Vector vs Raster Graphics: SVG, Canvas, and CSS3 Options

Notas do Editor