O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Web Vector Graphics

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Intro to SVG
Intro to SVG
Carregando em…3
×

Confira estes a seguir

1 de 63 Anúncio

Mais Conteúdo rRelacionado

Semelhante a Web Vector Graphics (20)

Anúncio

Mais recentes (20)

Anúncio

Web Vector Graphics

  1. Web Vector Graphics Web Directions South ’08 Dmitry Baranovskiy
  2. Web Myths:
  3. Web is text only
  4. Web pages are static
  5. Web is synchronous
  6. Web is rectangular
  7. Canvas SVG
  8. Canvas SVG !
  9. Canvas SVG !
  10. Canvas SVG
  11. SVG
  12. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <!DOCTYPE svg PUBLIC quot;-//W3C//DTD SVG 1.1//ENquot; quot;http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtdquot;> <svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot; xmlns:xlink=quot;http://www.w3.org/1999/xlinkquot;> <rect fill=quot;#333quot; width=quot;426quot; height=quot;260.667quot;/> <ellipse cx=quot;213quot; cy=quot;130quot; rx=quot;205quot; ry=quot;117quot;> <animate attributeName=quot;fillquot; attributeType=quot;CSSquot; begin=quot;0squot; dur=quot;6squot; fill=quot;freezequot; from=quot;#000quot; to=quot;#f00quot;/> <animate attributeName=quot;rxquot; begin=quot;0squot; dur=quot;6squot; fill=quot;freezequot; from=quot;205quot; to=quot;117quot;/> </ellipse> <path fill=quot;nonequot; stroke=quot;#fffquot; stroke-width=quot;5quot; stroke-linecap=quot;roundquot; d=quot;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.01quot;/> </svg>
  13. Canvas
  14. window.onload = function () { var elem = document.createElement(quot;canvasquot;); elem.width = 500; elem.height = 500; document.body.appendChild( elem ); var context = elem.getContext(quot;2dquot;); context.fillRect(0, 0, elem.width, elem.height); var pos = 0, dir = 1; setInterval(function () { context.rotate( 15 ); context.fillStyle = quot;rgba(0,0,0,0.05)quot;; context.fillRect(0, 0, elem.width, elem.height); context.fillStyle = quot;rgba(255, 0, 0, 1)quot;; context.fillRect(pos, pos, 20, 20); pos += dir; if ( pos > elem.width ) { dir = -1; } else if ( pos + 20 < 0 ) { dir = 1; } }, 10); };
  15. Canvas
  16. Canvas SVG
  17. Support
  18. Does browser support Canvas?
  19. Does browser support Canvas? if (window.CanvasRenderingContext2D) { … }
  20. Does browser support SVG?
  21. Does browser support SVG? if (window.SVGAngle) { … }
  22. 178
  23. 6 SVGAngle SVGLength SVGPathSeg SVGPreserveAspectRatio SVGTransform SVGUnitTypes
  24. 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/
  25. 203 118 469 160 Canvas SVG 64%
  26. 182 60 490 218 Canvas SVG 76%
  27. 30 184 248 488 Canvas SVG 81%
  28. What does it mean?
  29. ere is support
  30. …with one Important Exception
  31. 0%
  32. VML
  33. VML
  34. VML
  35. VML
  36. So, what can you do with Canvas ! SVG?
  37. Shapes
  38. Images
  39. Text
  40. Canvas SVG VML JavaScript off CSS Result pixels DOM DOM Animation Filters Image Data Text Stand alone Easy to use
  41. SVG Canvas VML
  42. What stops you from using this now?
  43. How to do this across all the browsers?
  44. DojoX http://dojotoolkit.org/projects/dojox/
  45. ExCanvas.js ! mooCanvas.js http://excanvas.sourceforge.net/ http://ibolmo.com/projects/moocanvas/
  46. Raphaël http://raphaeljs.com/
  47. Cappuccino http://cappuccino.org/
  48. Just go and do it!
  49. ank You http://dmitry.baranovskiy.com/ dmitry@baranovskiy.com

×