canvas vs svg @ frontinrio 2011

DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM

CANVAS vs SVGFRONT IN RIO 2011

PIXELVS

VETOR

DOCUMENTOVS

SCRIPT

DESIGNVS

DEVELOPMENT

CANVAS

•Criado para widgets do Dashboard OS X e Safari

•Desenhos bitmap 2D, 3D

•HTML5

•API JAVASCRIPT

•ESPECIFICAÇÃO W3C

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

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

•Processamento lento a medida que aumenta a complexidade da DOM

CANVASVS

SVG

SUPORTE

PARA NÃO VARIAR...

EXPLORERCANVASVS

SVGWEB

<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->

EXCANVAS

var el = document.createElement('canvas');G_vmlCanvasManager.initElement(el);var ctx = el.getContext('2d');

<!--[if lt IE9]><meta name="svg.render.forceflash" content="true"><![endif]-->

<script src="svg.js"></script>

SVGWEB

CANVAS LIBRARIES

•draw2D javascript drawing library

•cufon

•flot

SVG LIBRARIES

•RaphaelJS

•Processing.js

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

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

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/

FRONT IN RIOOBRIGADO

DAVIDSON FELLIPEFELLIPE.COM

@EUPROGRAMO | @DAVIDSONFELLIPEDEVELOPER FRONTEND AT GLOBO.COM