CANVAS vs SVG @ FrontInRio 2011

•

5 j'aime•1,664 vues

Davidson Fellipe

Conheça as principais diferenças entre os dois formatos e tenha uma visão do que se pode fazer com ambas tecnologias.

Technologie

CANVAS vs SVG
FRONT IN RIO 2011

DAVIDSON FELLIPE
SOFTWARE DEVELOPER AT GLOBO.COM

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 (ﬁll, 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

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

•ﬂot

SVG LIBRARIES

•RaphaelJS

•Processing.js

HANDS ON
códigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio

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-ﬂamengo
• 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

Contenu connexe

Tendances

SVG - Scalable Vector GraphicAkila Iroshan

LiveCycle Scripting & Validationsxrum

AWS Lambda with ClaudiaJSRiza Fahmi

Developer skillswebger

WebDriver Lamda - Next Gen Scalable TestVodqaBLR

Dive into HTML5: SVG and CanvasDoris Chen

Tendances (6)

SVG - Scalable Vector Graphic

LiveCycle Scripting & Validations

AWS Lambda with ClaudiaJS

Developer skills

WebDriver Lamda - Next Gen Scalable Test

Dive into HTML5: SVG and Canvas

En vedette

Kodak and the Digital Destruction of Value ChainsChris Sandström

Disruptive Innovation and the Camera IndustryChris Sandström

SVG EssencialHelder da Rocha

SVG como exemplo de XMLJosé Maria Silveira Neto

HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart

Mintzberg finalmarianabrunaldi

Desenvolvimento de AplicaçõesJosé Maria Silveira Neto

Gráficos Vetoriais na Web com SVGHelder da Rocha

Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart

Web design responsivo e adaptativo - HTML5/CSS3Heraldo Gonçalves Lima Junior

Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.comRaul Batalha

Fundamentos da programação de computadores 2ª ediçãoLeandro Rocha de Oliveira

En vedette (12)

Kodak and the Digital Destruction of Value Chains

Disruptive Innovation and the Camera Industry

SVG Essencial

SVG como exemplo de XML

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

Mintzberg final

Desenvolvimento de Aplicações

Gráficos Vetoriais na Web com SVG

Desenvolvimento Web : HTML5, CSS3 & JavaScript

Web design responsivo e adaptativo - HTML5/CSS3

Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com

Fundamentos da programação de computadores 2ª edição

Similaire à CANVAS vs SVG @ FrontInRio 2011

Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig

Thats Not Flash?Mike Wilcox

JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha

Html5 more than just html5 v finalLohith Goudagere Nagaraj

Html5 Canvas and Mobile GraphicsEngin Hatay

Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson

The Image that called me - Active Content Injection with SVG FilesMario Heiderich

Svcc 2013-css3-and-mobileOswald Campesato

HTML5 - A Whirlwind tourLohith Goudagere Nagaraj

JavaScript: Past, Present, FutureJungryul Choi

Sugarcoating your frontend one ViewModel at a timeEinar Ingebrigtsen

SVG Strikes BackMatt Baxter

Rich Media Advertising with SVG and JavaScriptGjokica Zafirovski

Svghtml5 MeetupOswald Campesato

(2018) Webpack Encore - Asset Management for the rest of usStefan Adolf

D3 Basic TutorialTao Jiang

What is Mean Stack Development ?Balajihope

The Modern Web, Part 2: HTML5David Pallmann

First review presentationSrikrishnan Suresh

Css3 transitions and animations + graceful degradation with jQueryAndrea Verlicchi

Similaire à CANVAS vs SVG @ FrontInRio 2011 (20)

Vector Graphics on the Web: SVG, Canvas, CSS3

Thats Not Flash?

JavaONE 2012 Using Java with HTML5 and CSS3

Html5 more than just html5 v final

Html5 Canvas and Mobile Graphics

Make your own Print & Play card game using SVG and JavaScript

The Image that called me - Active Content Injection with SVG Files

Svcc 2013-css3-and-mobile

HTML5 - A Whirlwind tour

JavaScript: Past, Present, Future

Sugarcoating your frontend one ViewModel at a time

SVG Strikes Back

Rich Media Advertising with SVG and JavaScript

Svghtml5 Meetup

(2018) Webpack Encore - Asset Management for the rest of us

D3 Basic Tutorial

What is Mean Stack Development ?

The Modern Web, Part 2: HTML5

First review presentation

Css3 transitions and animations + graceful degradation with jQuery

Plus de Davidson Fellipe

O melhor da monitoração de web performanceDavidson Fellipe

Guia do Front-end das GaláxiasDavidson Fellipe

Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe

Como é trabalhar na globocom?Davidson Fellipe

Practical guide for front-end development for django devsDavidson Fellipe

Guia prático de desenvolvimento front-end para django devsDavidson Fellipe

Esse cara é o gruntDavidson Fellipe

It's Javascript TimeDavidson Fellipe

Frontend Engineers: passado, presente e futuroDavidson Fellipe

Turbinando seu workflow para o desenvolvimento de webappsDavidson Fellipe

Workflow Open Source para Frontend DevelopersDavidson Fellipe

Os segredos dos front end engineersDavidson Fellipe

Javascript Cross-browserDavidson Fellipe

performance em jQuery appsDavidson Fellipe

RioJS - Apresentação sobre o grupoDavidson Fellipe

frontend {retirante: nordestino;}Davidson Fellipe

Canvas elementDavidson Fellipe

Tutorial Crição De Imagens Panoramicas HuginDavidson Fellipe

Sistema De Comunicação Bluetooth Usando Microcontrolador PICDavidson Fellipe

Plus de Davidson Fellipe (20)

O melhor da monitoração de web performance

Guia do Front-end das Galáxias

Workflow para desenvolvimento Web & Mobile usando grunt.js

Como é trabalhar na globocom?

Practical guide for front-end development for django devs

Guia prático de desenvolvimento front-end para django devs

Esse cara é o grunt

It's Javascript Time

Frontend Engineers: passado, presente e futuro

Turbinando seu workflow para o desenvolvimento de webapps

Workflow Open Source para Frontend Developers

Os segredos dos front end engineers

Javascript Cross-browser

performance em jQuery apps

RioJS - Apresentação sobre o grupo

frontend {retirante: nordestino;}

Canvas element

Tutorial Crição De Imagens Panoramicas Hugin

Sistema De Comunicação Bluetooth Usando Microcontrolador PIC

Dernier

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

GenCyber Cyber Security Day PresentationMichael W. Hawkins

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Slack Application Development 101 Slidespraypatel2

[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Dernier (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

GenCyber Cyber Security Day Presentation

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Scaling API-first – The story of a global engineering organization

Finology Group – Insurtech Innovation Award 2024

Advantages of Hiring UIUX Design Service Providers for Your Business

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Exploring the Future Potential of AI-Enabled Smartphone Processors

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

How to Troubleshoot Apps for the Modern Connected Worker

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Breaking the Kubernetes Kill Chain: Host Path Mount

Data Cloud, More than a CDP by Matt Robison

Slack Application Development 101 Slides

[2024]Digital Global Overview Report 2024 Meltwater.pdf

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

CANVAS vs SVG @ FrontInRio 2011

1. CANVAS vs SVG FRONT IN RIO 2011 DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM

2. PIXEL VS VETOR

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 (ﬁll, 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

9. SUPORTE

10. PARA NÃO VARIAR...

11. EXPLORERCANVAS VS SVGWEB

12. EXCANVAS  var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d');

13. SVGWEB  <script src="svg.js"></script>

14. CANVAS LIBRARIES •draw2D javascript drawing library •cufon •ﬂot

15. SVG LIBRARIES •RaphaelJS •Processing.js

16. HANDS ON códigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio

17.

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-ﬂamengo • 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

CANVAS vs SVG @ FrontInRio 2011

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (6)

En vedette

En vedette (12)

Similaire à CANVAS vs SVG @ FrontInRio 2011

Similaire à CANVAS vs SVG @ FrontInRio 2011 (20)

Plus de Davidson Fellipe

Plus de Davidson Fellipe (20)

Dernier

Dernier (20)

CANVAS vs SVG @ FrontInRio 2011