canvas vs svg @ frontinrio 2011
DESCRIPTION
Conheça as principais diferenças entre os dois formatos e tenha uma visão do que se pode fazer com ambas tecnologias.TRANSCRIPT
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