Upload
eleanor-riley
View
219
Download
0
Embed Size (px)
Citation preview
SVG: The Past, Present and Future of Vector Graphics for the WebPatrick DenglerSenior Program Manager, Internet Explorer TeamMember, W3C SVG Working [email protected]
Doug Schepers W3C Team Contact and Editor for SVG and WebApps Working Groups
Agenda
• A Brief History of SVG• Presentation by Doug Shepers • Key SVG Scenarios and Demonstrations• An Overview of Support for SVG in IE9 and Internet
Explorer Platform Preview • Core Concepts / Elements• Call to Action!
History
1998 Microsoft
Submits VML to W3C
2003 SVG 1.1 Recommende
d
2001 SVG 1.0
Recommended
Browser Vendors Begin to Implement SVG in Stages
Internet Explorer Platform Preview
Released with SVG
We are Here
• SVG Full 1.1 2nd Edition for Desktop Browsers
• SVG Basic Targeted Originally for PDA’s
• SVG Tiny Targeted Originally for Phones
Adobe SVG Plug-In for IE
2010 IE Rejoins the SVG WG
HTML5
SVG2CSS3
HTML/SVG/CSS Convergence
HTML5
SVG2CSS3
Video/ Audio
AnimationsTransitionsTransforms
Web FontsSVG Fonts Filter
Effects
5
A Tour of SVG
Doug Schepers
W3C Team Contact and Editor for SVG and WebApps Working Groups
Web Based Slides Available at http://www.w3.org/2010/Talks/03-schepers-mix
Key SVG Scenarios
• SVG Scenarios• Engineering Documents
• Used in a lot of our enterprise customer shops• Recommended -> required by Governmental Institutions
• Graphs / Charts / Maps • Removes load from server to produce high fidelity graphics• Supports end user interactivity and Ajax style data updates
• Currently used on Google and Bing• Media and Graphics
• CSS or background images• Posters (great for printing)• JavaScript-animated Graphics
• Gaming
SVG in Internet Explorer Platform Preview
SVG Feature Today 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
Getting Started: Embedding
Methods by which SVG can be embedded in a browser
IE9 Developer Preview Support• The SVG in HTML5 embedding method without using foreign
object (i.e. just create an <svg> tag in your HTML file)• SVG as a full document type (with .SVG extension)• SVG in XHTML (similar to that of HTML, only with XHTML
files)• SVG using <object>
Support in IE9• <iFrame>, <embed>• As <img> or css-image• .SVGZ
<object data="rect2.svg" width="100%“ height="400px" type="image/svg+xml" >
Getting Started: Structure
Tag Usage
<svg> (no <viewbox> support) Primary wrapper for SVG content. Support for nested SVG.
<defs> <use> Clones, “re-uses” SVG Content
<g> Method for grouping SVG
<image> Same as <img> in HTML
Getting Started: Presentation
Tag Usage
<circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>
Elements for drawing basic shapes
<path> Geometry of the an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), arc (elliptical or circular arc) and closepath
<text> (no <tspan> support) Basic Text in SVG (no wrapping)
Filling, stroking, color Methods for painting, filling and outlining basic shapes and paths
Getting Started: Interactivity/Styling
Tag Usage
DOML2 Core and SVGDOM If the element exists, most likely the corresponding SVGDOM support exists. This means that scripting of SVG is readily available.
Events Most events are in place; some SVG specific events are coming next
Presentation Attributes / CSS Using CSS and presentation attributes on elements
Getting Started: Transforms
Tag Usage
translate Shift the SVG content (x,y)<transform="translate(-10,-20)">
skewX/skewY Skew the content horizontally or vertically<transform="skewX(30)”>
scale Scale the content<transform="scale(2)">
rotate Rotate the content<transform="rotate(45)">
What’s coming in Internet Explorer Platform Preview
• What’s Coming Next • Gradients• Clipping / Masking / Compositing• Linking and Views• Remainder of Text, Transformations, Color,
Interactivity/Events
Call to Action!
• Let’s Get Going!
• Download the Internet Explorer 9 Platform preview
vwww.IETestDrive.com• Visit W3Schools (for initial learning)• Build your own SVG and share with the community
• Join my Facebook group (SVG in Internet Explorer)• Make modifications to Open Source Frameworks to Allow
for SVG (instead of VML)• Help us make sure we are interoperable by reporting any
divergences
Keep up on the latesthttp://blogs.msdn.com/ie
Meet the team in the Internet Explorer Lounge located in The
Commons!
Download the Internet Explorer 9 Platform preview
www.IETestDrive.com
© 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.