Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without...
-
Upload
isis-lodes -
Category
Documents
-
view
216 -
download
2
Transcript of Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without...
![Page 1: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/1.jpg)
![Page 2: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/2.jpg)
Getting Started with SVG
Leon BraginskiSenior Program ManagerMicrosoft Corporation
![Page 3: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/3.jpg)
Objective
Learn about SVG and its functionalityLearn how to use SVG elements to create graphically rich websites
![Page 4: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/4.jpg)
Agenda
Overview of SVGSVG basicsDrawing shapesSVG transformsDebugging SVG Authoring tools
![Page 5: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/5.jpg)
What Is SVG?
A vector graphics file format that enables the display of 2D images
![Page 6: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/6.jpg)
SVG Graphics
demo
![Page 7: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/7.jpg)
SVG Basics
• Scriptable, extensible, easily editable• Easy to apply CSS styles
XML-based
• Resizable without degradation
Vector graphics
• Fast download
Compression
• It is just XML!
Easy debugging
![Page 8: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/8.jpg)
Canvas versus SVG
How it works Canvas SVG
Drawing Mode Immediate Retained
DOM Support <CANVAS> part of the DOM
Each SVG element is part of the DOM
Animation Using direct scripting in canvas
Manipulating objects in the DOM
Internet Explorer 9 GPU acceleration
Yes Yes
When to use Programmatic rendering, games
Highly detailed drawing, charts
![Page 9: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/9.jpg)
Basic Structure of SVG Markup
<?xml version=“1.0” standalone=”no”?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="200" cy="200" r="150" stroke="black" stroke-width="2" fill="yellow"/> <ellipse cx="150" cy="160" rx="10" ry="40" fill="black"/> <ellipse cx="250" cy="160" rx="10" ry="40" fill="black"/> <path d="M 150,250 Q 200,350 250,250 " fill="yellow" stroke="black" stroke-width="5" /></svg>
![Page 10: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/10.jpg)
Ways to Use SVG
Inline HTMLInline XHTML<object> tag.svg document
![Page 11: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/11.jpg)
Adding Inline SVG in HTML
<!DOCTYPE html>
...
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="65" fill-opacity=".5" fill="red"/> <circle cx="150" cy="100" r="65" fill-opacity=".5" fill="yellow"/> <circle cx="125" cy="150" r="65" fill-opacity=".5" fill="blue"/></svg>…
![Page 12: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/12.jpg)
Adding Inline SVG in XHTML
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"> …</svg></body></html>
![Page 13: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/13.jpg)
Creating Standalone SVG Document
<?xml version="1.0" standalone=”no”?><!DOCTYPE PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">... </svg>
SVG graphics created as a standalone graphics document
![Page 14: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/14.jpg)
Using a Standalone SVG DocumentSVG as an image source, frame source, or object tag
<iframe src = “mySVG.svg” />
<img src=“mySVG.svg”>
<object data="your-SVG-image.svg" width="100" height="100" type="image/svg+xml"></object>
![Page 15: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/15.jpg)
SVG Placements
demo
![Page 16: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/16.jpg)
SVG Elements
ShapesCircle, rectangle, path, plus more
TextFilling and stroking, CSS3 colorLots more!
![Page 17: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/17.jpg)
SVG Transforms
You can scale, rotate, translate, or apply custom transformsSVG transforms are offloaded to the GPU
![Page 18: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/18.jpg)
Using SVG for Web Enhancement
Graphically rich interactive sites
GPU-Powered
SVG
DOM + JavaScript
![Page 19: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/19.jpg)
Using Declarative Animation in SVG Take advantage of SMIL declarative animations
![Page 20: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/20.jpg)
SVG Animation
demo
![Page 21: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/21.jpg)
SVG Debugging
SVG is easy to learn and debug with Internet Explorer Developer Tools
![Page 22: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/22.jpg)
Debugging SVG
demo
![Page 23: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/23.jpg)
Authoring Tools
InkscapeMicrosoft VisioAdobe IllustratorCorelDRAW
![Page 24: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/24.jpg)
A Useful Conversion Tool
Raster-to-vector conversion tool: http://vectormagic.com/home
![Page 25: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/25.jpg)
Call to Action
Use SVG elements to build graphically rich web experiencesUse available tools to convert raster graphics to vectorUse Internet Explorer Developer Tools for debugging and as an SVG learning toolFill out the evaluation form for this presentation
![Page 26: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/26.jpg)
Resources
W3C SVG Working Grouphttp://www.w3.org/Graphics/SVG/
W3C SVG 1.1 2nd edition (working draft)http://www.w3.org/TR/SVG11/
SVG bloghttp://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx
Internet Explorer Test Drivehttp://ie.microsoft.com/testdrive/
FakeSMIL http://leunen.d.free.fr/fakesmile/
![Page 27: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/27.jpg)
Resources (cont.)
Related Windows Summit sessions: Internet Explorer 9 OverviewInternet Explorer 9 Overview (Update) Easier Web Development Using Internet Explorer 9 Developer ToolsInternet Explorer 9 Desktop Integration Using PinningGetting Started with CanvasBest Practices for Advanced Graphics in Internet Explorer 9 Touch Support in Internet Explorer 9
![Page 28: Scriptable, extensible, easily editable Easy to apply CSS styles XML-based Resizable without degradation Vector graphics Fast download Compression.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c7d5503460f949328ec/html5/thumbnails/28.jpg)
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation.MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.