Vector Graphics on the Web: SVG, Canvas, CSS3
Upcoming SlideShare
Loading in...5
×
 

Vector Graphics on the Web: SVG, Canvas, CSS3

on

  • 9,896 views

An overview of the current state of Vector graphics on the web, why we would want to use them, what the options are. Presented to the Boston Ruby group at the January 2011 meeting.

An overview of the current state of Vector graphics on the web, why we would want to use them, what the options are. Presented to the Boston Ruby group at the January 2011 meeting.

Statistics

Views

Total Views
9,896
Views on SlideShare
8,917
Embed Views
979

Actions

Likes
1
Downloads
55
Comments
0

6 Embeds 979

http://cykod.com 966
http://translate.googleusercontent.com 8
http://webcache.googleusercontent.com 2
http://localhost 1
http://admin.totalmarketing.com 1
http://www.twylah.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Vector Graphics on the Web: SVG, Canvas, CSS3 Vector Graphics on the Web: SVG, Canvas, CSS3 Presentation Transcript

  • Vector Graphics on the Web Pascal Rettig @cykod
  • Vector vs. RasterRaster = Pixels = Bitmaps = .PNG, .JPEG ...Vector = Primitives = Shapes = .AI, .SVGVectors can easily be “Rasterized” at acertain resolution into BitmapsRasters cannot easily be “Vectorized”without a whole lot of work
  • Why do we care?
  • Why do we care?• Designers often create as vectors anyway.
  • Why do we care?• Designers often create as vectors anyway.• Resolution independent
  • Why do we care?• Designers often create as vectors anyway.• Resolution independent• Smaller file size (when used appropriately)
  • 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...
  • What are the options:
  • What are the options:• Two W3C approved: SVG, Canvas
  • What are the options:• Two W3C approved: SVG, Canvas• One “IE Special”: VML
  • What are the options:• Two W3C approved: SVG, Canvas• One “IE Special”: VML• One “Sorta-kinda-vectorlike”: CSS3
  • Scalable Vector Graphics
  • 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)
  • 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
  • The reality http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics)
  • The Reality (TL;DR)
  • 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 WebUse’s Native SVG or FlashYou still write SVG files / datahttp://code.google.com/p/svgweb/Raphael.jsUses Native SVG or VMLJavascript APIhttp://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.jsvar paper = Raphael(10, 50, 320, 200);var circle = paper.circle(50, 40, 10);circle.attr("fill", "#f00");circle.attr("stroke", "#fff");
  • Other Common usesProtovis - the graphing library you always wanted Cufon - font replacement with SVG/VML
  • Attack Vector B: <canvas>
  • 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...
  • Canvas Reality...• No native IE support
  • Canvas Reality...• No native IE support• Current browser implementations are slow
  • Canvas Near future...
  • Canvas Near future...• IE Support in IE9 (IE6-IE8 w/ excanvas.js)
  • Canvas Near future...• IE Support in IE9 (IE6-IE8 w/ excanvas.js)• Next-gen browser support hardware- accelerated-awesomeness across the board
  • Canvas Near future...• IE Support in IE9 (IE6-IE8 w/ excanvas.js)• Next-gen browser support hardware- accelerated-awesomeness across the board• WebGL support
  • Canvas StatusQ1 2010 Q4 2010 Q2 2011 Q4 2011
  • The pseudo-option: CSS3
  • CSS3 features that replace bitmap hacks:Rounded corners - *-border-radiusDrop shadows: *-box-shadowText Shadows: text-shadowGradients: *-gradientFonts: @font-face
  • CSS3 Caveats You probably want to use a CSS Frameworksuch as SASS/LESS to DRY the vendor prefixes. 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/
  • So SVG or Canvas?
  • SVG vs. Canvas
  • SVG vs. CanvasSVG
  • SVG vs. CanvasSVG Canvas
  • SVG vs. Canvas SVG CanvasPersistent Scene Graph Hover, Click EventsBrowser does the work
  • SVG vs. Canvas SVG CanvasPersistent Scene Graph Just Pixels (can R/W) Hover, Click Events Own Event calculationsBrowser does the work Full canvas refresh
  • Bonus
  • Yo Dawg, I heard youlike vector graphics... http://burst.bocoup.com/
  • Yo Dawg, I heard youlike vector graphics...So I put SVG in your Canvas so you could animate while you rasterize. http://burst.bocoup.com/
  • Yo Dawg, I heard youlike 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