Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Canvas vs SVG
Search
Davidson Fellipe
April 24, 2012
Programming
1
140
Canvas vs SVG
Davidson Fellipe
April 24, 2012
Tweet
Share
More Decks by Davidson Fellipe
See All by Davidson Fellipe
Adventures from Enzyme to React Testing Library
fellipe
1
220
O melhor da monitoração de web performance
fellipe
0
380
Guia do Front-end das galáxias
fellipe
3
230
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
96
Como é trabalhar na Globo.com?
fellipe
3
88
Guia prático de desenvolvimento front-end para django devs
fellipe
1
120
Practical guide for front-end development for Django Devs
fellipe
0
57
Esse cara é o Grunt
fellipe
9
590
It's Javascript Time
fellipe
6
440
Other Decks in Programming
See All in Programming
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
900
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Code Reviews
bkuhlmann
4
890
Ruby Function Composition
bkuhlmann
1
330
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Git Lint
bkuhlmann
4
750
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
ゆるい個人開発のススメ
kuroppe1819
10
980
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
210
Featured
See All Featured
A designer walks into a library…
pauljervisheath
200
23k
Teambox: Starting and Learning
jrom
128
8.4k
Scaling GitHub
holman
457
140k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
The Invisible Customer
myddelton
114
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Building Your Own Lightsaber
phodgson
99
5.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Transcript
DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM CANVAS vs SVG FRONT
IN RIO 2011
PIXEL VS VETOR
DOCUMENTO VS SCRIPT
DESIGN VS 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
CANVAS VS SVG
SUPORTE
PARA NÃO VARIAR...
EXPLORERCANVAS VS 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 ON códigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio
None
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 RIO OBRIGADO DAVIDSON FELLIPE FELLIPE.COM @EUPROGRAMO | @DAVIDSONFELLIPE
DEVELOPER FRONTEND AT GLOBO.COM