Successfully reported this slideshow.

CANVAS vs SVG @ FrontInRio 2011

5

Share

Loading in …3
×
1 of 20
1 of 20

CANVAS vs SVG @ FrontInRio 2011

5

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

CANVAS vs SVG @ FrontInRio 2011

  1. 1. CANVAS vs SVG FRONT IN RIO 2011 DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM
  2. 2. PIXEL VS VETOR
  3. 3. DOCUMENTO VS SCRIPT
  4. 4. DESIGN VS DEVELOPMENT
  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 drawing library •cufon •flot
  15. 15. SVG LIBRARIES •RaphaelJS •Processing.js
  16. 16. HANDS ON có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

×