SVG: The Past, Present and Future of Vector Graphics for the Web Patrick Dengler Senior Program Manager, Internet Explorer Team Member, W3C SVG Working Group 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 Recommended 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 nd 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 Animations Transitions Transforms Web Fonts SVG Fonts Filter Effects

A Tour of SVG Doug Schepers W3C Team Contact and Editor for SVG and WebApps Working Groups Web Based Slides Available at 5

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 FeatureTodayIE9 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 tag in your HTML file)SVG in HTML5 SVG as a full document type (with.SVG extension) SVG in XHTML (similar to that of HTML, only with XHTML files) SVG using Support in IE9, As or css-image.SVGZ

Getting Started: Structure TagUsage (no support)Primary wrapper for SVG content. Support for nested SVG. Clones, “re-uses” SVG Content Method for grouping SVG Same as in HTML

Getting Started: Presentation TagUsage,,,,, Elements for drawing basic shapes 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 (no support)Basic Text in SVG (no wrapping) Filling, stroking, colorMethods for painting, filling and outlining basic shapes and paths

Getting Started: Interactivity/Styling TagUsage DOML2 Core and SVGDOMIf the element exists, most likely the corresponding SVGDOM support exists. This means that scripting of SVG is readily available. EventsMost events are in place; some SVG specific events are coming next Presentation Attributes / CSSUsing CSS and presentation attributes on elements

Getting Started: Transforms TagUsage translateShift the SVG content (x,y) skewX/skewYSkew the content horizontally or vertically scaleScale the content rotateRotate the content

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 latest Meet the team in the Internet Explorer Lounge located in The Commons! Download the Internet Explorer 9 Platform preview