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
160
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
300
O melhor da monitoração de web performance
fellipe
0
420
Guia do Front-end das galáxias
fellipe
3
250
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
120
Como é trabalhar na Globo.com?
fellipe
3
100
Guia prático de desenvolvimento front-end para django devs
fellipe
1
150
Practical guide for front-end development for Django Devs
fellipe
0
76
Esse cara é o Grunt
fellipe
9
770
It's Javascript Time
fellipe
6
480
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
480
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
240
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
Building an army of robots
kneath
306
45k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
A better future with KSS
kneath
239
17k
Music & Morning Musume
bryan
46
6.6k
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