CANVAS vs SVG @ FrontInRio 2011

2.996 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.996
No SlideShare
0
A partir de incorporações
0
Número de incorporações
751
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×