Download - 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
-
7/21/2019 SVG Canvas Overview v 2
2/36
-
7/21/2019 SVG Canvas Overview v 2
3/36
Agenda
PAGE 4
Introduction to SVG
Introduction to Canvas
When to use What?
Summary and Resources
Tooling
Lets Build a simple Game
-
7/21/2019 SVG Canvas Overview v 2
4/36
Introduction to SVG
-
7/21/2019 SVG Canvas Overview v 2
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
-
7/21/2019 SVG Canvas Overview v 2
6/36
HTML5
Lets see a very simple example
-
7/21/2019 SVG Canvas Overview v 2
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
-
7/21/2019 SVG Canvas Overview v 2
8/36
Including SVG on your webpage
Standalone
No scripting{ background-image: url('background.svg'); }
Inline HTML5 XHTML
-
7/21/2019 SVG Canvas Overview v 2
9/36
SVG Basics
Demo
The element, some styling & interactivity
-
7/21/2019 SVG Canvas Overview v 2
10/36
Introduction to Canvas
-
7/21/2019 SVG Canvas Overview v 2
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
-
7/21/2019 SVG Canvas Overview v 2
12/36
Canvas Entire API
-
7/21/2019 SVG Canvas Overview v 2
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
-
7/21/2019 SVG Canvas Overview v 2
14/36
Canvas Basics
Demo
The element, interactivity
-
7/21/2019 SVG Canvas Overview v 2
15/36
Lets Build a Simple Game
-
7/21/2019 SVG Canvas Overview v 2
16/36
Building the same game
Demo
Compare SVG & Canvas
-
7/21/2019 SVG Canvas Overview v 2
17/36
When to Use What?
-
7/21/2019 SVG Canvas Overview v 2
18/36
Compare SVG & Canvas
Demo
-
7/21/2019 SVG Canvas Overview v 2
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.
-
7/21/2019 SVG Canvas Overview v 2
20/36
Scenarios: Canvas and SVG
-
7/21/2019 SVG Canvas Overview v 2
21/36
-
7/21/2019 SVG Canvas Overview v 2
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);
-
7/21/2019 SVG Canvas Overview v 2
23/36
Use Case: Visualizing Data
Graphs Animated Queues for Visuals
Large Amounts of Data
-
7/21/2019 SVG Canvas Overview v 2
24/36
Use Case: Visualizing Data
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);
}
-
7/21/2019 SVG Canvas Overview v 2
25/36
PAGE 26
-
7/21/2019 SVG Canvas Overview v 2
26/36
-
7/21/2019 SVG Canvas Overview v 2
27/36
Toolings
-
7/21/2019 SVG Canvas Overview v 2
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/ -
7/21/2019 SVG Canvas Overview v 2
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/ -
7/21/2019 SVG Canvas Overview v 2
30/36
Level of support
Yes
No No
Yes
No
Yes No Yes
No No No
-
7/21/2019 SVG Canvas Overview v 2
31/36
Summary and Resources
-
7/21/2019 SVG Canvas Overview v 2
32/36
Can I Use HTML5 Today?
PAGE 33
-
7/21/2019 SVG Canvas Overview v 2
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 -
7/21/2019 SVG Canvas Overview v 2
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 -
7/21/2019 SVG Canvas Overview v 2
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 -
7/21/2019 SVG Canvas Overview v 2
36/36