This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.
2. 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
4. Why do we care?
• Designers often create as vectors anyway.
5. Why do we care?
• Designers often create as vectors anyway.
• Resolution independent
6. Why do we care?
• Designers often create as vectors anyway.
• Resolution independent
• Smaller file size (when used appropriately)
7. Why do we care?
• Designers often create as vectors anyway.
• Resolution independent
• Smaller file size (when used appropriately)
Hmm, sounds like they would be good for
mobile...
13. 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,
20. The Reality (TL;DR)
• Only Chrome, FF4 support gzipped SVG
• Only Chrome, FF4 support HTML5 Direct
Embedding
• IE Support only coming in IE9
21. The Solution?
Use a library!
SVG Web
Use’s Native SVG or Flash
You still write SVG files / data
http://code.google.com/p/svgweb/
Raphael.js
Uses Native SVG or VML
Javascript API
http://raphaeljs.com/
22. 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
23. Raphael.js
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
24. Other Common uses
Protovis - the graphing library you always wanted
Cufon - font replacement with SVG/VML
28. 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
29. 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
30. 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}
36. Canvas Near future...
• IE Support in IE9 (IE6-IE8 w/ excanvas.js)
• Next-gen browser support hardware-
accelerated-awesomeness across the board
37. Canvas Near future...
• IE Support in IE9 (IE6-IE8 w/ excanvas.js)
• Next-gen browser support hardware-
accelerated-awesomeness across the board
• WebGL support
40. CSS3 features that replace
bitmap hacks:
Rounded corners - *-border-radius
Drop shadows: *-box-shadow
Text Shadows: text-shadow
Gradients: *-gradient
Fonts: @font-face
41. CSS3 Caveats
You probably want to use a CSS Framework
such as SASS/LESS to DRY the vendor prefixes.
IE6-8 - fake it with http://css3pie.com/
42. What also can be done:
http://graphicpeel.com/cssiosicons
43. How
• Gradients, Rounded Corners, Shadows +
• Borders
• Rotations
• Pseudo-elements
• Transforms
• Z-index Masking
• A bunch of nested <div>’s
44. 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/
49. SVG vs. Canvas
SVG Canvas
Persistent Scene Graph
Hover, Click Events
Browser does the work
50. 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