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
140
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
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
110
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
260
エラーって何種類あるの?
kajitack
5
150
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.6k
単体テストの始め方/作り方
toms74209200
0
460
C++20 射影変換
faithandbrave
0
480
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
Select API from Kotlin Coroutine
jmatsu
1
160
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
280
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
230
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
120
Java on Azure で LangGraph!
kohei3110
0
130
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Bash Introduction
62gerente
614
210k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Speed Design
sergeychernyshev
31
990
Side Projects
sachag
455
42k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
930
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
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