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
310
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
80
Esse cara é o Grunt
fellipe
9
770
It's Javascript Time
fellipe
6
490
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
750
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
640
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
230
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
25
7.3k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.9k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
36
13k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
310
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
500
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
210
TypeScriptでDXを上げろ! Hono編
yusukebe
3
820
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
Why Our Code Smells
bkeepers
PRO
337
57k
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