XML IETMs   Table of contents   Indexes   Using XML in a generic model of mediators


An Introduction to VML

 Peter   Wu
  Lead Program Manager
  Microsoft  10000 Torre Ave.
Cupertino   California  USA  95014
Phone: 408 777 3637
Fax: 408 777 0405
Email: petewu@Microsoft.com Web: www.microsoft.com
Biographical notice:
Peter Wu is a Lead Program Manager at Microsoft. He has worked on the graphics features in several releases of the very successful Office applications over the past 5 years. His most recent work is the Internet graphics standards support in the upcoming Office 2000 release. Peter is a co-author of the Vector Markup Language (VML) proposal to the W3C as a vector graphics standard for the web. Peter has an M.S. in Computer Science from Duke University and B.A. in Computer Science and Mathematical Science from Rice Universit


 VML  (Vector Markup Language) is a high quality 2-D vector graphics format for the web that integrates with existing web standards. With  VML , you can easily edit, exchange, and deliver graphics to the web.
Autodesk Inc., Hewlett-Packard Co., Macromedia Inc., Microsoft Corp. and Visio Corp. are co-authors of the  VML specification. The  W3C  (World Wide Web Consortium) has acknowledged their joint submission of  VML .
This session gives a high-level introduction to  VML . We are interested in hearing your feedback on  VML and how it can continue to be improved to better serve your needs as web publishers and developers.

What's wrong with graphics on the web today?

Today, graphics present a number of challenges for many web authors.
Firstly, web graphics are hard to author. Graphics authoring and page authoring are not well integrated. Authors must use a separate set of applications for authoring graphics and authoring the page. And then there is an extra step of plugging in their graphics into their page. Also, graphics authoring often requires conversion among several formats and maintaining multiple files to allow further editing. For example, suppose you need to include a simple diagram on your web page. You may want to use a vector-based graphics application to draw the diagram. But then you need to export it in  GIF  (Graphics Interchange Format) ,  JPEG  (Joint Photographic Experts Group) , or  PNG  (Portable Network Graphics) format for the web. Now suppose you would like to make a few updates to the diagram. It is difficult to do editing directly on the  GIF image because it is a "flat" image, so you need to keep around a copy of the diagram in the application's native format for further editing. Once you have made your updates to the original diagram, you must export it as  GIF again. The revision cycle requires several steps and there are multiple files to maintain.
Secondly, the widely supported formats for web graphics,  GIF ,  JPEG , and  PNG , are all raster formats, and raster formats have a number of limitations. Raster graphics are typically very large in file size. Because of the large file sizes, web authors are limited to using graphics that are small in dimensions and low in resolution to keep download times reasonable. Raster graphics also do not scale well; they are targeted for a specific size and resolution. Lack of good scaling limits web authors' ability to design graphics that adapt to different screen sizes and print with high quality.

 VML addresses problems with graphics on the web.

 VML is designed to address these problems with web graphics.
 VML greatly simplifies the authoring process. Graphics and page and authoring can be seamlessly integrated, because the graphics format (  VML ) and page format ( HTML ) are seamlessly integrated together. This integration greatly reduces the amount of work web authors need to do to add graphics to their pages. Additionally, because  VML is designed for editing, exchange, and delivery it is not necessary to maintain multiple files as you are working on your graphics. For the diagram example given above,  VML serves as the web delivery format as well as the editing format, so you do not need to export in another format. Revisions to the diagram can be done in a single step!
 VML also avoids the limitations that raster formats impose by adding vector graphics capabilities. Vector graphics allow you to create very compact files that download fast and stream well. Vector graphics are also scalable and high resolution. This gives you the flexibility of using larger graphics without requiring larger files or sacrificing quality.

 VML is an application of  XML  (eXtensible Markup Language) .

 VML uses  XML for the many benefits it provides:
  •  Standard . Because  VML is based on the  XML standard, it will be compatible with a wide range of web applications. The data is in a format that browsers, authoring tools, server applications, searching/indexing tools, link management tools, and document management tools can access.
  •  Structured .  XML provides the structure that is needed by vector graphics. Containment hierarchy, inheritance, and linking are examples of the type of sophistication that a vector graphics format requires and  XML provides.
  •  Object model . The  DOM  (Document Object Model) goes hand-in-hand with the structured file format. All of the graphics properties are exposed to developers to modify dynamically which allows easy and powerful interactivity and animation.
  •  Integration with HTML .  XML is a good foundation for a web graphics format because of its tight integration with HTML . Graphics often need to be integrated with rich text, tables, hyperlinks, and other page elements. Authors can do this easily using a combination of  VML and HTML .
  •  Declarative .  VML is a declarative language. Unlike a procedural language, no programming is required to author content. Also, for good data interchange among applications, it is very important that the format is declarative.  XML is very well suited for declarative formats.
  •  Text-based . Human readability of  VML and  XML is a real boon to developers. It makes  VML easy to learn and work with. For example, to learn how a particular attribute works, it is easy to modify it in any text editor and load the page in the browser to try out how it works. It is also easy to write small programs such as Perl scripts that generate  VML .

 VML integrates well with web standards.

 VML leverages existing web standards. It is an application of XML 1.0, and as a consequence, all  VML content is exposed in the  DOM .  VML can be used in conjunction with HTML 4.0 and  CSS  (Cascading Style Sheets) 2.0.  VML uses the box positioning model that is defined in  CSS 2.0, rather than defining a new model.
 VML complements existing web graphics standards.  VML is not intended to be a replacement format for  GIF ,  JPEG , or  PNG ; rather, it is complimentary.  GIF ,  JPEG , and  PNG images can be used in conjunction with  VML . For example, you can use a  JPEG image as a tiled fill for a  VML shape.  VML also allows you to apply basic transforms on raster images such as cropping, color adjustment, and rotation. Authors can continue to use raster formats for the things they are well-suited for including photographs, textures, and screenshots.  VML gives authors a powerful combination of vector capabilities and raster graphics.
 VML has been proposed to the  W3C as a web standard. The specification is publicly available ( http://www.w3.org/TR/NOTE-VML ) for developers to learn about and provide feedback on. More information on VML is also provided on the standards section of the Microsoft web site (http://www.microsoft.com/standards/vml/ ).The W3C has formed a working group for  SVG  (Scalable Vector Graphics) where several member organizations, including Microsoft, will work together on developing a next generation standard for web graphics.  VML and other graphics standard proposals serve as references for the discussions and work towards a standard.
 VML does not define animation of graphics, but it can be used in conjunction with animation formats. For example,  HTML+TIME  (Timed Interactive Multimedia Extensions for HTML) a proposal recently submitted to the W3C defines animation that can be applied to elements on an HTML page including XML content such as VML (http://www.w3.org/TR/1998/NOTE-HTMLplusTIME-19980918 ). VML used in conjunction with HTML+TIME gives you powerful, rich, animation graphics integrated in an HTML page.

 VML support in core Microsoft products.

Microsoft will be supporting  VML in its upcoming platform and application releases. Internet Explorer 5.0 will include integrated  VML support.  VML support in Office 2000 will allow users to save Office Art graphics as editable elements in their HTML pages for delivery to the Web.  VML will preserve the full fidelity of Office Art objects and allow "round tripping"; that is, the HTML file can be opened and edited back in an Office application with no loss of quality.

Microsoft Internet Explorer 5.0


Microsoft Office 2000


Quotes from the VML Press Release

"Autodesk is a strong advocate for interoperability between design, drawing and office applications, as evidenced by its own public data formats, DXF and DWF, which are used widely in many software packages," said Anne Bonaparte, senior director of the design team solutions group at Autodesk. "  VML as a standard offers users the promise of even more compatibility, as well as ease of use and reuse of intelligent vector data on the Web."
"This proposal is a solution to one of the last missing pieces in document layout on the Web," said Carolyn Ticknor, vice president of Hewlett-Packard's LaserJet solutions group. "The whole Internet community will benefit from faster download speeds, higher-quality graphics printing and lower network overhead."
"Our collaboration on  VML represents the next step in our goal to deliver compelling, interactive vector content, even over low-bandwidth Internet connections," said Norm Meyrowitz, president, Macromedia products group at Macromedia Inc. "Just as the open Flash binary file format (.swf) enables standard playback of vector graphics and animation,  VML will provide content developers with an open XML text-based standard for exchange across a variety of tools and platforms. We look forward to extending our family of Web software to support  VML in future versions."
"The Web community has been asking for a high-quality, easy-to-use 2-D vector graphics standard for some time," said David Cole, vice president of the Web client and consumer experience division at Microsoft. "  VML meets their needs with faster graphics downloading for end users and easier graphics editing and manipulation for HTML authors and designers.  VML will be a key specification in our future platforms and applications."
"  VML 's flexibility and extensibility has led Visio Corp. to support wholeheartedly its adoption as a Web standard for vector graphics," said Ted Johnson, executive vice president and chief technology officer of Visio. "With  VML , Visio users will be able to create, edit and publish their business diagrams and technical drawings to the Web while preserving all the intelligent object behavior that distinguishes the Visio SmartShapes technology."


In summary, Microsoft is working with industry partners on advancing the state of web graphics with  VML . Please let us know your feedback on  VML and how it can be improved to better serve your needs.

XML IETMs   Table of contents   Indexes   Using XML in a generic model of mediators