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

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.
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.
OBRIGADO FRONT IN RIO
DAVIDSON FELLIPE
FELLIPE.COM
@EUPROGRAMO | @DAVIDSONFELLIPE
DEVELOPER FRONTEND AT GLOBO.COM