svg canvas overview v 2

7/21/2019 SVG Canvas Overview v 2

1/36

Doris Chen Ph.D.

Developer Evangelist

Microsoft

http://blogs.msdn.com/dorischen/

Overview of HTML5Graphics: Canvas & SVG


2/36


3/36

Agenda

PAGE 4

Introduction to SVG

Introduction to Canvas

When to use What?

Summary and Resources

Tooling

Lets Build a simple Game


4/36

Introduction to SVG


5/36

SVG basicsScalable Vector Graphics

Scalable Vector Graphic To draw 2D vector graphics using XML

retained mode : the objects tree is kept in memory

Full DOM support Access to the SVG elements through the DOM

SVG elements can be styled with CSS & can be

decorated with ARIA

Included in HTML5 spec Native support in IE9 and other modern browsers

Can be used from an external .svg file or in-line in

the document


6/36

HTML5

Lets see a very simple example


7/36

SVG basicsSVG 1.1 2ndEdition

in IE9

SVG Feature IE9

Document Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

Filter Effects

Declarative Animation

SVG Fonts

SVG 1.1 2ndEdition

in IE9


8/36

Including SVG on your webpage

Standalone

No scripting{ background-image: url('background.svg'); }

Inline HTML5 XHTML


9/36

SVG Basics

Demo

The element, some styling & interactivity


10/36

Introduction to Canvas


11/36

Canvas basicsDynamic bitmap with JS

Allow drawing into a bitmap area

See it as a dynamic PNG ;-)

JavaScript APIs & drawing primitives

Rectangles, lines, fills, arcs, Bezier curves, etc.

Immediate mode : Fire and Forget It does not remember what you drew last.

Its up to you to maintain your objects tree This is a black box : content not visible into the DOM

Beware of accessibility issues

Simple API: 45 methods, 21 attributes


12/36

Canvas Entire API


13/36

HTML5

Your browser doesnt support Canvas, sorry.

var example = document.getElementById("myCanvas");

var context = example.getContext("2d");

context.fillStyle = "rgb(255,0,0)";

context.fillRect(30, 30, 50, 50);

Lets see a very simple sample code


14/36

Canvas Basics

Demo

The element, interactivity


15/36

Lets Build a Simple Game


16/36

Building the same game

Demo

Compare SVG & Canvas


17/36

When to Use What?


18/36

Compare SVG & Canvas

Demo


19/36

High level differences: SVG and Canvas

Canvas SVG

Abstraction Pixel based (dynamic

bitmap)

Shape based

Elements Single HTML element Multiple graphical elements

which become part of the

Document Object Model(DOM)

Driver Modified through Script

only

Modified through Script and

CSS

Event Model User Interaction is

granular (x,y)

User Interaction is

abstracted (rect, path)

Performance Performance is better

with smaller surface

and/or larger number of

objects

Performance is better with

smaller number of objects

and/or larger surface.


20/36

Scenarios: Canvas and SVG


21/36


22/36

Use Case: Visualizing Data

Charts Display Data or Change the user

driven views

Styling / Transitions

.highcharts-series {

-ms-transition-property: opacity;

-ms-transition-duration: 2s; }

.highcharts-series:hover { opacity:.5; }

document.getElementById("mainPath").addEventListener("mouseover",

showData, false);

document.getElementById("mainGraph").addEventListener("click", zoomData,

false);


23/36


Graphs Animated Queues for Visuals

Large Amounts of Data


24/36


Maps Interactive Data Presentation

High Speed Data

path:hover{fill:yellow;}

for (var i= 0; i < weatherPatterns.length;i++) {

weatherPatterns[i].x += Math.floor(Math.random() * 3)-1;

weatherPatterns[i].y += Math.floor(Math.random() * 3) -1;

myContext.drawImage(weatherImage[weatherPatterns[i].ImageIndex],

weatherPatterns[i].x,

weatherPatterns[i].y);

}


25/36

PAGE 26


26/36


27/36

Toolings


28/36

Tools to generate SVGYou wont be forced to type XML in notepad!

Microsoft Visio Export as SVG

Adobe Illustrator Save as SVG

Inkscape Free Open source

software

http://inkscape.org/
http://inkscape.org/http://inkscape.org/


29/36

Tools to generate CanvasYou wont be forced to type every JS primitives neither ;-)

AI2Canvas plug-in :http://visitmix.com/labs/ai2canvas/

export vector and bitmapartwork directly to anHTML5 canvas

provides drawing,animation and coding

options such as events sothat you can buildinteractive, well-designedcanvas-based web apps.
http://visitmix.com/labs/ai2canvas/http://visitmix.com/labs/ai2canvas/http://visitmix.com/labs/ai2canvas/http://visitmix.com/labs/ai2canvas/http://visitmix.com/labs/ai2canvas/


30/36

Level of support

Yes

No No

Yes

No

Yes No Yes

No No No


31/36

Summary and Resources


32/36

Can I Use HTML5 Today?

PAGE 33


33/36

Resources Started with IE9 and HTML5

http://bit.ly/hpbwhv Whitepaper focused for developers

http://msdn.microsoft.com/en-us/ie/ff468705.aspx A good technical overviews

http://live.visitmix.com/MIX11/Sessions/ Feature-specific demos

http://ie.microsoft.com/testdrive/ Real-world demos

http://www.beautyoftheweb.com/ IE team Blogs

http://blogs.msdn.com/b/ie/ Canvas demo by Community

http://www.canvasdemos.com/PAGE 34
http://bit.ly/hpbwhvhttp://msdn.microsoft.com/en-us/ie/ff468705.aspxhttp://live.visitmix.com/MIX11/Sessions/http://ie.microsoft.com/testdrive/http://www.beautyoftheweb.com/http://blogs.msdn.com/b/ie/http://www.canvasdemos.com/http://www.canvasdemos.com/http://www.canvasdemos.com/http://www.canvasdemos.com/http://blogs.msdn.com/b/ie/http://blogs.msdn.com/b/ie/http://www.beautyoftheweb.com/http://ie.microsoft.com/testdrive/http://live.visitmix.com/MIX11/Sessions/http://msdn.microsoft.com/en-us/ie/ff468705.aspxhttp://msdn.microsoft.com/en-us/ie/ff468705.aspxhttp://msdn.microsoft.com/en-us/ie/ff468705.aspxhttp://bit.ly/hpbwhvhttp://bit.ly/hpbwhv


34/36

twitter #WCSV Live Stream: http://bit.ly/HTML5LiveStream lab setup: http://bit.ly/html5setup

IMPORTANT RESOURCES

Get Free Tools http://bit.ly/webmatrixwcsv

Labs Setup Instruction: http://bit.ly/html5setup

Twitter Hashtag: #WCSVPAGE 35
http://bit.ly/webmatrixwcsvhttp://bit.ly/html5setuphttp://bit.ly/html5setuphttp://bit.ly/webmatrixwcsv


35/36

twitter #WCSV Live Stream: http://bit.ly/HTML5LiveStream lab setup: http://bit.ly/html5setup

ADDITIONAL RESOURCES

Get started with IE9 and HTML5 http://bit.ly/hpbwhv

Feature-specific demos http://ie.microsoft.com/testdrive/ Real-world demos

http://www.beautyoftheweb.com/

IE Team Blogs http://blogs.msdn.com/b/ie/

PAGE 36
http://bit.ly/hpbwhvhttp://ie.microsoft.com/testdrive/http://www.beautyoftheweb.com/http://blogs.msdn.com/b/ie/http://blogs.msdn.com/b/ie/http://blogs.msdn.com/b/ie/http://www.beautyoftheweb.com/http://ie.microsoft.com/testdrive/http://bit.ly/hpbwhv


36/36

svg canvas overview v 2

Documents