Programming SVG and canvas graphics in a Metro style app based on HTML5

PLAT-551P
Speakers: Patrick Dengler
Avg Rating: 5

(1)
15,761 Views
reddit

Tweet

19 minutes, 10 seconds

format
< > embed
+ queue

Sign In first to access your queue.
Close

Sorry, video was not added to the queue, an error occurred. Please Contact Us and let us know.
Close

Embed code for this video

Copy the code above to embed our video on your website/blog.

Video format

Option selected may change based on video formats available and browser capability.

Auto
Use our suggested format for this video.
Smooth Streaming
Adaptive bitrate streaming - little buffering but lower video quality at times of low bandwidth. Silverlight 5 required
Progressive
Traditional buffered video format. Silverlight 5 required
HTML5
For browsers that support H.264 MP4 or WebM video playback such as:
IE9+, Firefox 4+, Chrome 5+, or Safari 4+.
Flash
For browsers that have the Adobe Flash Player plugin installed.

Download

Right click “Save as…”

Slides (view online)

High Quality WMV (PC, Xbox, MCE)

File size
63.6 MB
MP3 (Audio only)

File size
8.8 MB
Mid Quality WMV (Lo-band, Mobile)

File size
59.6 MB
High Quality MP4 (iPad, PC)

File size
289.8 MB
MP4 (iPod, Zune HD)

File size
27.2 MB

As part of HTML5, SVG and canvas represent two different approaches to incorporating rich vector graphics in a website or Metro style app. This session introduces the programming techniques used for each of these and compares those techniques. It also drills down into the best uses for each technology presenting specific coding examples. The session also includes is an overview of SVG filter effects and using CSS3 transitions and animations with the SVG and canvas elements. This session builds on topics introduced in Build Visually Compelling and Interactive HTML5 Experiences .