CANVAS vs SVG @ FrontInRio 2011

Davidson Fellipe
Davidson FellipeSenior Front-end Engineer
CANVAS vs SVG
                FRONT IN RIO 2011


                DAVIDSON FELLIPE
   SOFTWARE DEVELOPER AT GLOBO.COM
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
• Processamentolento a medida que aumenta a
 complexidade da DOM
CANVAS
   VS
  SVG
SUPORTE
PARA NÃO VARIAR...
EXPLORERCANVAS
     VS
   SVGWEB
EXCANVAS

<!--[if lt IE9]>
<script src="excanvas.js"></script>
<![endif]-->


var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');
SVGWEB
<!--[if lt IE9]>
<meta name="svg.render.forceflash"
content="true">
<![endif]-->


<script src="svg.js"></script>
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
CANVAS vs SVG @ FrontInRio 2011
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/
OBRIGADO     FRONT IN RIO




               DAVIDSON FELLIPE
                        FELLIPE.COM
    @EUPROGRAMO | @DAVIDSONFELLIPE
   DEVELOPER FRONTEND AT GLOBO.COM
1 of 20

Recommended

JavaScript para Graficos y Visualizacion de Datos by
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datosphilogb
3.1K views25 slides
Biological Modeling, Powered by AngularJS by
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSGil Fink
301 views43 slides
Next generation Graphics: SVG by
Next generation Graphics: SVGNext generation Graphics: SVG
Next generation Graphics: SVGDavid Corbacho Román
7.3K views84 slides
Biological modeling, powered by angular js by
Biological modeling, powered by angular jsBiological modeling, powered by angular js
Biological modeling, powered by angular jsGil Fink
315 views44 slides
HTML5 and SVG by
HTML5 and SVGHTML5 and SVG
HTML5 and SVGyarcub
3.9K views34 slides
Web Vector Graphics by
Web Vector GraphicsWeb Vector Graphics
Web Vector GraphicsDmitry Baranovskiy
7.3K views63 slides

More Related Content

What's hot

SVG - Scalable Vector Graphic by
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicAkila Iroshan
1.2K views34 slides
LiveCycle Scripting & Validations by
LiveCycle Scripting & ValidationsLiveCycle Scripting & Validations
LiveCycle Scripting & Validationsxrum
1K views7 slides
AWS Lambda with ClaudiaJS by
AWS Lambda with ClaudiaJSAWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJSRiza Fahmi
526 views34 slides
Developer skills by
Developer skillsDeveloper skills
Developer skillswebger
211 views5 slides
WebDriver Lamda - Next Gen Scalable Test by
WebDriver Lamda - Next Gen Scalable TestWebDriver Lamda - Next Gen Scalable Test
WebDriver Lamda - Next Gen Scalable TestVodqaBLR
388 views29 slides
Dive into HTML5: SVG and Canvas by
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDoris Chen
2.7K views57 slides

What's hot(6)

SVG - Scalable Vector Graphic by Akila Iroshan
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
Akila Iroshan1.2K views
LiveCycle Scripting & Validations by xrum
LiveCycle Scripting & ValidationsLiveCycle Scripting & Validations
LiveCycle Scripting & Validations
xrum1K views
AWS Lambda with ClaudiaJS by Riza Fahmi
AWS Lambda with ClaudiaJSAWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJS
Riza Fahmi526 views
Developer skills by webger
Developer skillsDeveloper skills
Developer skills
webger211 views
WebDriver Lamda - Next Gen Scalable Test by VodqaBLR
WebDriver Lamda - Next Gen Scalable TestWebDriver Lamda - Next Gen Scalable Test
WebDriver Lamda - Next Gen Scalable Test
VodqaBLR388 views
Dive into HTML5: SVG and Canvas by Doris Chen
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen2.7K views

Viewers also liked

Kodak and the Digital Destruction of Value Chains by
Kodak and the Digital Destruction of Value ChainsKodak and the Digital Destruction of Value Chains
Kodak and the Digital Destruction of Value ChainsChris Sandström
5.2K views55 slides
Disruptive Innovation and the Camera Industry by
Disruptive Innovation and the Camera IndustryDisruptive Innovation and the Camera Industry
Disruptive Innovation and the Camera IndustryChris Sandström
7.2K views133 slides
SVG Essencial by
SVG EssencialSVG Essencial
SVG EssencialHelder da Rocha
1.6K views72 slides
SVG como exemplo de XML by
SVG como exemplo de XMLSVG como exemplo de XML
SVG como exemplo de XMLJosé Maria Silveira Neto
642 views18 slides
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB by
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
2.4K views43 slides
Mintzberg final by
Mintzberg  finalMintzberg  final
Mintzberg finalmarianabrunaldi
5.6K views51 slides

Viewers also liked(12)

Kodak and the Digital Destruction of Value Chains by Chris Sandström
Kodak and the Digital Destruction of Value ChainsKodak and the Digital Destruction of Value Chains
Kodak and the Digital Destruction of Value Chains
Chris Sandström5.2K views
Disruptive Innovation and the Camera Industry by Chris Sandström
Disruptive Innovation and the Camera IndustryDisruptive Innovation and the Camera Industry
Disruptive Innovation and the Camera Industry
Chris Sandström7.2K views
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB by Fábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Fábio Flatschart2.4K views
Gráficos Vetoriais na Web com SVG by Helder da Rocha
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
Helder da Rocha2.7K views
Desenvolvimento Web : HTML5, CSS3 & JavaScript by Fábio Flatschart
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart10.2K views
Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com by Raul Batalha
Introdução a estrutura de dados   josé lucas rangel - raulzinho.cb@hotmail.comIntrodução a estrutura de dados   josé lucas rangel - raulzinho.cb@hotmail.com
Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com
Raul Batalha13K views

Similar to CANVAS vs SVG @ FrontInRio 2011

Vector Graphics on the Web: SVG, Canvas, CSS3 by
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
3.9K views55 slides
Thats Not Flash? by
Thats Not Flash?Thats Not Flash?
Thats Not Flash?Mike Wilcox
563 views19 slides
JavaONE 2012 Using Java with HTML5 and CSS3 by
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha
822 views35 slides
Html5 more than just html5 v final by
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v finalLohith Goudagere Nagaraj
562 views32 slides
Html5 Canvas and Mobile Graphics by
Html5 Canvas and Mobile GraphicsHtml5 Canvas and Mobile Graphics
Html5 Canvas and Mobile GraphicsEngin Hatay
2.3K views17 slides
Make your own Print & Play card game using SVG and JavaScript by
Make your own Print & Play card game using SVG and JavaScriptMake your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
4.3K views104 slides

Similar to CANVAS vs SVG @ FrontInRio 2011(20)

Vector Graphics on the Web: SVG, Canvas, CSS3 by Pascal Rettig
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig3.9K views
Thats Not Flash? by Mike Wilcox
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
Mike Wilcox563 views
JavaONE 2012 Using Java with HTML5 and CSS3 by Helder da Rocha
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha822 views
Html5 Canvas and Mobile Graphics by Engin Hatay
Html5 Canvas and Mobile GraphicsHtml5 Canvas and Mobile Graphics
Html5 Canvas and Mobile Graphics
Engin Hatay2.3K views
Make your own Print & Play card game using SVG and JavaScript by Kevin Hakanson
Make your own Print & Play card game using SVG and JavaScriptMake your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScript
Kevin Hakanson4.3K views
The Image that called me - Active Content Injection with SVG Files by Mario Heiderich
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
Mario Heiderich10.1K views
JavaScript: Past, Present, Future by Jungryul Choi
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
Jungryul Choi1.5K views
Sugarcoating your frontend one ViewModel at a time by Einar Ingebrigtsen
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
Einar Ingebrigtsen773 views
SVG Strikes Back by Matt Baxter
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
Matt Baxter934 views
Rich Media Advertising with SVG and JavaScript by Gjokica Zafirovski
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
Gjokica Zafirovski1.2K views
(2018) Webpack Encore - Asset Management for the rest of us by Stefan Adolf
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
Stefan Adolf1.1K views
D3 Basic Tutorial by Tao Jiang
D3 Basic TutorialD3 Basic Tutorial
D3 Basic Tutorial
Tao Jiang678 views
What is Mean Stack Development ? by Balajihope
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
Balajihope158 views
The Modern Web, Part 2: HTML5 by David Pallmann
The Modern Web, Part 2: HTML5The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5
David Pallmann1.8K views
Css3 transitions and animations + graceful degradation with jQuery by Andrea Verlicchi
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Andrea Verlicchi7.1K views

More from Davidson Fellipe

O melhor da monitoração de web performance by
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performanceDavidson Fellipe
2.7K views68 slides
Guia do Front-end das Galáxias by
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
17.6K views115 slides
Workflow para desenvolvimento Web & Mobile usando grunt.js by
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe
3K views55 slides
Como é trabalhar na globocom? by
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?Davidson Fellipe
2.5K views52 slides
Practical guide for front-end development for django devs by
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devsDavidson Fellipe
2.1K views62 slides
Guia prático de desenvolvimento front-end para django devs by
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsDavidson Fellipe
2.6K views62 slides

More from Davidson Fellipe(20)

O melhor da monitoração de web performance by Davidson Fellipe
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performance
Davidson Fellipe2.7K views
Guia do Front-end das Galáxias by Davidson Fellipe
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
Davidson Fellipe17.6K views
Workflow para desenvolvimento Web & Mobile usando grunt.js by Davidson Fellipe
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
Davidson Fellipe3K views
Practical guide for front-end development for django devs by Davidson Fellipe
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devs
Davidson Fellipe2.1K views
Guia prático de desenvolvimento front-end para django devs by Davidson Fellipe
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe2.6K views
Frontend Engineers: passado, presente e futuro by Davidson Fellipe
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Davidson Fellipe1.4K views
Turbinando seu workflow para o desenvolvimento de webapps by Davidson Fellipe
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Davidson Fellipe2K views
Workflow Open Source para Frontend Developers by Davidson Fellipe
Workflow Open Source para Frontend DevelopersWorkflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Davidson Fellipe1.7K views
Os segredos dos front end engineers by Davidson Fellipe
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineers
Davidson Fellipe1.4K views
RioJS - Apresentação sobre o grupo by Davidson Fellipe
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupo
Davidson Fellipe1.1K views
Tutorial Crição De Imagens Panoramicas Hugin by Davidson Fellipe
Tutorial Crição De Imagens Panoramicas HuginTutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas Hugin
Davidson Fellipe996 views
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC by Davidson Fellipe
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Davidson Fellipe23.3K views
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC by Davidson Fellipe
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Davidson Fellipe6.2K views

Recently uploaded

"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ... by
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ..."Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...Fwdays
33 views39 slides
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum... by
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...NUS-ISS
28 views35 slides
ChatGPT and AI for Web Developers by
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
174 views82 slides
The Research Portal of Catalonia: Growing more (information) & more (services) by
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)CSUC - Consorci de Serveis Universitaris de Catalunya
66 views25 slides
Future of Learning - Khoong Chan Meng by
Future of Learning - Khoong Chan MengFuture of Learning - Khoong Chan Meng
Future of Learning - Khoong Chan MengNUS-ISS
31 views7 slides
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy by
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
"Role of a CTO in software outsourcing company", Yuriy NakonechnyyFwdays
40 views21 slides

Recently uploaded(20)

"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ... by Fwdays
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ..."Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
Fwdays33 views
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum... by NUS-ISS
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
NUS-ISS28 views
Future of Learning - Khoong Chan Meng by NUS-ISS
Future of Learning - Khoong Chan MengFuture of Learning - Khoong Chan Meng
Future of Learning - Khoong Chan Meng
NUS-ISS31 views
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy by Fwdays
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
Fwdays40 views
MemVerge: Past Present and Future of CXL by CXL Forum
MemVerge: Past Present and Future of CXLMemVerge: Past Present and Future of CXL
MemVerge: Past Present and Future of CXL
CXL Forum110 views
Web Dev - 1 PPT.pdf by gdsczhcet
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet52 views
TE Connectivity: Card Edge Interconnects by CXL Forum
TE Connectivity: Card Edge InterconnectsTE Connectivity: Card Edge Interconnects
TE Connectivity: Card Edge Interconnects
CXL Forum96 views
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada119 views
AI: mind, matter, meaning, metaphors, being, becoming, life values by Twain Liu 刘秋艳
AI: mind, matter, meaning, metaphors, being, becoming, life valuesAI: mind, matter, meaning, metaphors, being, becoming, life values
AI: mind, matter, meaning, metaphors, being, becoming, life values
Webinar : Competing for tomorrow’s leaders – How MENA insurers can win the wa... by The Digital Insurer
Webinar : Competing for tomorrow’s leaders – How MENA insurers can win the wa...Webinar : Competing for tomorrow’s leaders – How MENA insurers can win the wa...
Webinar : Competing for tomorrow’s leaders – How MENA insurers can win the wa...
Future of Learning - Yap Aye Wee.pdf by NUS-ISS
Future of Learning - Yap Aye Wee.pdfFuture of Learning - Yap Aye Wee.pdf
Future of Learning - Yap Aye Wee.pdf
NUS-ISS38 views
MemVerge: Gismo (Global IO-free Shared Memory Objects) by CXL Forum
MemVerge: Gismo (Global IO-free Shared Memory Objects)MemVerge: Gismo (Global IO-free Shared Memory Objects)
MemVerge: Gismo (Global IO-free Shared Memory Objects)
CXL Forum112 views
Astera Labs: Intelligent Connectivity for Cloud and AI Infrastructure by CXL Forum
Astera Labs:  Intelligent Connectivity for Cloud and AI InfrastructureAstera Labs:  Intelligent Connectivity for Cloud and AI Infrastructure
Astera Labs: Intelligent Connectivity for Cloud and AI Infrastructure
CXL Forum125 views
The Importance of Cybersecurity for Digital Transformation by NUS-ISS
The Importance of Cybersecurity for Digital TransformationThe Importance of Cybersecurity for Digital Transformation
The Importance of Cybersecurity for Digital Transformation
NUS-ISS25 views
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen... by NUS-ISS
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
NUS-ISS23 views
CXL at OCP by CXL Forum
CXL at OCPCXL at OCP
CXL at OCP
CXL Forum208 views
[2023] Putting the R! in R&D.pdf by Eleanor McHugh
[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh38 views
Combining Orchestration and Choreography for a Clean Architecture by ThomasHeinrichs1
Combining Orchestration and Choreography for a Clean ArchitectureCombining Orchestration and Choreography for a Clean Architecture
Combining Orchestration and Choreography for a Clean Architecture
ThomasHeinrichs168 views

CANVAS vs SVG @ FrontInRio 2011

  • 1. CANVAS vs SVG FRONT IN RIO 2011 DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM
  • 3. DOCUMENTO VS SCRIPT
  • 4. DESIGN VS DEVELOPMENT
  • 5. CANVAS • Criado para widgets do Dashboard OS X e Safari • Desenhos bitmap 2D, 3D • HTML5 • API JAVASCRIPT • ESPECIFICAÇÃO W3C
  • 6. 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
  • 7. 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 • Processamentolento a medida que aumenta a complexidade da DOM
  • 8. CANVAS VS SVG
  • 11. EXPLORERCANVAS VS SVGWEB
  • 12. EXCANVAS <!--[if lt IE9]> <script src="excanvas.js"></script> <![endif]--> var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d');
  • 13. SVGWEB <!--[if lt IE9]> <meta name="svg.render.forceflash" content="true"> <![endif]--> <script src="svg.js"></script>
  • 14. CANVAS LIBRARIES •draw2D javascript drawing library •cufon •flot
  • 16. HANDS ON códigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio
  • 18. 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
  • 19. 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/
  • 20. OBRIGADO FRONT IN RIO DAVIDSON FELLIPE FELLIPE.COM @EUPROGRAMO | @DAVIDSONFELLIPE DEVELOPER FRONTEND AT GLOBO.COM