Post on 14-Dec-2015
Getting Started with SVG
Leon BraginskiSenior Program ManagerMicrosoft Corporation
Objective
Learn about SVG and its functionalityLearn how to use SVG elements to create graphically rich websites
Agenda
Overview of SVGSVG basicsDrawing shapesSVG transformsDebugging SVG Authoring tools
What Is SVG?
A vector graphics file format that enables the display of 2D images
SVG Graphics
demo
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
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
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>
Ways to Use SVG
Inline HTMLInline XHTML<object> tag.svg document
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>…
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>
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
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>
SVG Placements
demo
SVG Elements
ShapesCircle, rectangle, path, plus more
TextFilling and stroking, CSS3 colorLots more!
SVG Transforms
You can scale, rotate, translate, or apply custom transformsSVG transforms are offloaded to the GPU
Using SVG for Web Enhancement
Graphically rich interactive sites
GPU-Powered
SVG
DOM + JavaScript
Using Declarative Animation in SVG Take advantage of SMIL declarative animations
SVG Animation
demo
SVG Debugging
SVG is easy to learn and debug with Internet Explorer Developer Tools
Debugging SVG
demo
Authoring Tools
InkscapeMicrosoft VisioAdobe IllustratorCorelDRAW
A Useful Conversion Tool
Raster-to-vector conversion tool: http://vectormagic.com/home
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
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/
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
© 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.