CANVAS vs SVG @ FrontInRio 2011

2,998 views

Published on

Conheça as principais diferenças entre os dois formatos e tenha uma visão do que se pode fazer com ambas tecnologias.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,998
On SlideShare
0
From Embeds
0
Number of Embeds
752
Actions
Shares
0
Downloads
33
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

CANVAS vs SVG @ FrontInRio 2011

  1. 1. CANVAS vs SVG FRONT IN RIO 2011 DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM
  2. 2. PIXEL VSVETOR
  3. 3. DOCUMENTO VS SCRIPT
  4. 4. DESIGN VSDEVELOPMENT
  5. 5. CANVAS• Criado para widgets do Dashboard OS X e Safari• Desenhos bitmap 2D, 3D• HTML5• API JAVASCRIPT• ESPECIFICAÇÃO W3C
  6. 6. CANVAS• Drawing tools (retângulos, arcos, linhas)• Efeitos (fill, bordas, gradientes, transparência)• Transformações (rotação, translação, matrizes )• Carregar dados a partir de um data URI
  7. 7. SVG• Sun Microsystems, Adobe, Apple, IBM, e Kodak são uma das que estão envolvidas com o padrão.• Independente de resolução (vetor)• Controle dos elementos via DOM• Imagens representadas em XML• Processamentolento a medida que aumenta a complexidade da DOM
  8. 8. CANVAS VS SVG
  9. 9. SUPORTE
  10. 10. PARA NÃO VARIAR...
  11. 11. EXPLORERCANVAS VS SVGWEB
  12. 12. EXCANVAS<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->var el = document.createElement(canvas);G_vmlCanvasManager.initElement(el);var ctx = el.getContext(2d);
  13. 13. SVGWEB<!--[if lt IE9]><meta name="svg.render.forceflash"content="true"><![endif]--><script src="svg.js"></script>
  14. 14. CANVAS LIBRARIES•draw2D javascript drawinglibrary•cufon•flot
  15. 15. SVG LIBRARIES•RaphaelJS•Processing.js
  16. 16. HANDS ONcódigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio
  17. 17. LINKS• http://berjon.com/blog/2010/09/bouncy.xhtml• http://raphaeljs.com/australia.html• http://raphaeljs.com/analytics.html• http://futpedia.globo.com/confronto/vasco-x-flamengo• http://raphaeljs.com/image-rotation.html• http://dev.w3.org/html5/spec/Overview.html• http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
  18. 18. MAIS LINKS• http://camanjs.com/examples/presets• http://www.ro.me/tech/• http://excanvas.sourceforge.net/• http://code.google.com/p/svgweb/• http://inkscape.org/• http://www.w3.org/Graphics/SVG/• http://fellipe.com/blog/
  19. 19. OBRIGADO FRONT IN RIO DAVIDSON FELLIPE FELLIPE.COM @EUPROGRAMO | @DAVIDSONFELLIPE DEVELOPER FRONTEND AT GLOBO.COM

×