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

1. CANVAS vs SVG
FRONT IN RIO 2011
DAVIDSON FELLIPE
SOFTWARE DEVELOPER AT GLOBO.COM

2. PIXEL
VS
VETOR

3. DOCUMENTO
VS
SCRIPT

4. DESIGN
VS
DEVELOPMENT

5. CANVAS
• Criado para widgets do Dashboard OS X e Safari
• Desenhos bitmap 2D, 3D
• HTML5
• API JAVASCRIPT
• ESPECIFICAÇÃO W3C

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. 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. CANVAS
VS
SVG

9. SUPORTE

10. PARA NÃO VARIAR...

11. EXPLORERCANVAS
VS
SVGWEB

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. SVGWEB
<!--[if lt IE9]>
<meta name="svg.render.forceflash"
content="true">
<![endif]-->
<script src="svg.js"></script>

14. CANVAS LIBRARIES
•draw2D javascript drawing
library
•cufon
•flot

15. SVG LIBRARIES
•RaphaelJS
•Processing.js

16. HANDS ON
códigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio

18. 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

19. 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/

20. OBRIGADO FRONT IN RIO
DAVIDSON FELLIPE
FELLIPE.COM
@EUPROGRAMO | @DAVIDSONFELLIPE
DEVELOPER FRONTEND AT GLOBO.COM