Downloaded 92 times
![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}](https://image.slidesharecdn.com/vectorsv2-110112080828-phpapp01/85/Vector-Graphics-on-the-Web-SVG-Canvas-CSS3-30-320.jpg)
![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}](https://image.slidesharecdn.com/vectorsv2-110112080828-phpapp01/75/Vector-Graphics-on-the-Web-SVG-Canvas-CSS3-30-2048.jpg)
More Related Content
Similar to Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
- 1. Vector Graphics onthe Web Pascal Rettig @cykod
- 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
- 3. Why do wecare?
- 4. Why do wecare? • Designers often create as vectors anyway.
- 5. Why do wecare? • Designers often create as vectors anyway. • Resolution independent
- 6. Why do wecare? • Designers often create as vectors anyway. • Resolution independent • Smaller file size (when used appropriately)
- 7. Why do wecare? • Designers often create as vectors anyway. • Resolution independent • Smaller file size (when used appropriately) Hmm, sounds like they would be good for mobile...
- 8. What are theoptions:
- 9. What are theoptions: • Two W3C approved: SVG, Canvas
- 10. What are theoptions: • Two W3C approved: SVG, Canvas • One “IE Special”: VML
- 11. What are theoptions: • Two W3C approved: SVG, Canvas • One “IE Special”: VML • One “Sorta-kinda-vectorlike”: CSS3
- 12.
- 13. SVG • XML basedformat • 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,
- 14. The Dream (not reality)
- 15. The Dream (not reality) Use as an image: <img src=‘images/tiger.svgz’/>
- 16. 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>
- 17.
- 18. The reality http://en.wikipedia.org/wiki/ Comparison_of_layout_engines_(Scalable_Vector_Graphics)
- 19.
- 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 alibrary! 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> Thenembed 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
- 25. Attack Vector B: <canvas>
- 26. HTML5 Canvas Tag •Standardized by the WHATWG (2007) • Grew out of WebKit (Dashboard Widgets) • Javascript interface to a bunch o’ Pixels
- 27. Pixels? Where are theVectors?
- 28. Pixels? Where are theVectors? <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}
- 31.
- 32. Canvas Reality... • Nonative IE support
- 33. Canvas Reality... • Nonative IE support • Current browser implementations are slow
- 34.
- 35. Canvas Near future... •IE Support in IE9 (IE6-IE8 w/ excanvas.js)
- 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
- 38. Canvas Status Q1 2010 Q4 2010 Q2 2011 Q4 2011
- 39. The pseudo-option: CSS3
- 40. CSS3 features thatreplace bitmap hacks: Rounded corners - *-border-radius Drop shadows: *-box-shadow Text Shadows: text-shadow Gradients: *-gradient Fonts: @font-face
- 41. CSS3 Caveats Youprobably 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 canbe done: http://graphicpeel.com/cssiosicons
- 43. How • Gradients, RoundedCorners, 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/
- 45. So SVG orCanvas?
- 46.
- 47.
- 48. SVG vs. Canvas SVG Canvas
- 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
- 51.
- 52. Yo Dawg, Iheard you like vector graphics... http://burst.bocoup.com/
- 53. Yo Dawg, Iheard you like vector graphics... So I put SVG in your Canvas so you could animate while you rasterize. http://burst.bocoup.com/
- 54. Yo Dawg, Iheard you like vector graphics... So I put SVG in your Canvas so you could animate while you rasterize. http://burst.bocoup.com/
- 55. Thanks! pascal@cykod.com @cykod
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n