Vector Markup Language
Vector Markup Language (VML) is an XML-based format for encoding, exchanging, editing, and delivering two-dimensional vector graphics, particularly designed for integration with web technologies like HTML and CSS.[1] It uses markup to describe paths consisting of lines and curves, along with semantic and presentation elements, enabling scalable, high-quality illustrations that support scripting, animation, and interactivity.[1]
Developed primarily by Microsoft in collaboration with Autodesk, Hewlett-Packard, Macromedia, and Visio, VML was proposed as a standard to the World Wide Web Consortium (W3C) in May 1998 as an XML 1.0 application, building on HTML 4.0 and CSS Level 2 specifications.[1] The initial submission served as a draft for discussion, though it was never formally endorsed as a W3C Recommendation and remains a historical Note.[1] Key features include predefined shapes such as rectangles, ovals, and lines; parameterization for compact representation; and compatibility with the Document Object Model (DOM) for dynamic manipulation.[2] These attributes made VML suitable for faster web downloads, inline rendering, and professional design workflows, particularly within Microsoft products.[2]
VML gained significant adoption through native support in Microsoft Internet Explorer starting with version 5.0 in 1999 and integration into Office 2000 applications for diagram and drawing tools.[2] It was also incorporated into the Office Open XML (OOXML) standard, facilitating vector graphics in documents like those created in Word and Excel.[3] In email development, VML remains relevant for ensuring compatibility with Microsoft Outlook desktop clients, where it is used as a workaround for rendering background images, rounded corners, and complex layouts that CSS alone cannot reliably achieve in older versions.[3][4]
Despite its innovations, VML has been deprecated since Internet Explorer 9 in 2011, with Microsoft recommending migration to Scalable Vector Graphics (SVG) for modern web standards.[2] As of 2024, VML support persists in legacy contexts like Outlook for Windows, but no end-of-support date has been announced, underscoring its niche role in backward compatibility rather than active development.[5] Overall, VML represents an early effort to standardize XML for vector graphics on the web, influencing subsequent formats while highlighting the evolution toward more universal alternatives.[2]
Overview
Definition and Purpose
Vector Markup Language (VML) is an obsolete XML-based file format for encoding two-dimensional vector graphics, utilizing paths composed of lines and curves to represent scalable images.[1] Developed primarily by Microsoft in collaboration with Autodesk, Hewlett-Packard, Macromedia, and Visio, VML enables the description of graphical elements through declarative markup, facilitating the creation and manipulation of shapes without relying on raster images.[2] As of Internet Explorer 9, VML has been deprecated in favor of more modern standards, rendering it largely unsupported in contemporary web environments.[6]
The primary purpose of VML was to extend HTML capabilities, allowing vector graphics to be embedded directly into web pages and documents without the need for external plugins or bitmap files, thereby supporting scalable and resolution-independent visuals.[7] This format uses a markup syntax analogous to HTML, but tailored for graphical primitives such as shapes, fills, and strokes, which can be styled and positioned within a document's layout.[8] By integrating vector information seamlessly with text and other content, VML aimed to enhance the interactivity and quality of graphics in web-based applications.
Historically, VML was designed for tight interoperability with Microsoft technologies, including Internet Explorer for rendering on the web and the Office suite for document editing and exchange, where it was first shipped with Office 2000.[8] This focus on proprietary ecosystem integration positioned VML as a predecessor to the standardized Scalable Vector Graphics (SVG) format, influencing subsequent developments in web vector standards.[9]
Standards Status and Compatibility
Vector Markup Language (VML) is specified in Part 4 of the Office Open XML (OOXML) standards, under ECMA-376 and ISO/IEC 29500.[10] These specifications define VML as a transitional format for representing vector graphics, primarily to maintain compatibility with legacy Microsoft Office documents predating 2007.[10] However, the standards explicitly recommend using DrawingML for new applications, positioning VML's inclusion solely for backward compatibility without active endorsement or promotion.[10]
In 1998, VML was submitted to the World Wide Web Consortium (W3C) by Microsoft and other industry partners as a proposed recommendation for vector graphics encoding.[1] Despite this submission, VML never advanced beyond the status of a W3C Note, which is intended for discussion only and carries no official standardization or endorsement from the W3C.[1]
VML is not directly compatible with other vector graphics formats, such as Scalable Vector Graphics (SVG), requiring conversion for interoperability.[1] Furthermore, in its OOXML implementation, VML uses <xml> as the root element in the null namespace to encapsulate markup, which contravenes the XML 1.0 Recommendation by employing a reserved name beginning with the string "xml" (case-insensitive).[11] This violation can lead to parsing issues in strict XML processors adhering to W3C guidelines.[11] VML has been deprecated in favor of SVG for modern web and document graphics needs.[10]
History
Development and Standardization Efforts
The development of Vector Markup Language (VML) was initiated by Microsoft in collaboration with Autodesk, Hewlett-Packard, Macromedia, and Visio Corporation, aiming to create an XML-based format for vector graphics that could integrate seamlessly with web technologies.[12][13]
On May 13, 1998, these companies jointly submitted VML to the World Wide Web Consortium (W3C) as a proposed standard for encoding vector information in XML, with the goal of enabling high-quality, scalable graphics suitable for web delivery and editing.[1][12]
The proposal outlined key features including paths composed of lines and curves (such as cubic Bézier curves and polylines), configurable fills (solid, gradient, or tiled images), and strokes with customizable weights, dashes, and joins, all designed to embed within HTML documents for browser-based rendering using CSS for layout.[1]
Following the W3C review, VML was published as a non-endorsed NOTE for discussion purposes only. However, the W3C instead formed a working group for Scalable Vector Graphics (SVG) later in 1998, which advanced to become the recommended standard in 2001, contributing to VML remaining a non-endorsed note, and development efforts ceased in 1998 without advancing to recommendation status.[1]
Adoption and Evolution
VML achieved its initial widespread adoption through integration into Microsoft products in the late 1990s. It was first supported in Internet Explorer 5, released in 1999, enabling the browser to render XML-based vector graphics directly within web pages.[2][14] Concurrently, Microsoft Office 2000 incorporated VML as a core feature, allowing applications such as Word and Visio to export vector drawings to HTML and MHT (MHTML) files while maintaining scalability and editability of graphics in web-compatible formats.[8] This dual adoption in browsing and productivity tools marked VML's practical rollout following its submission to the W3C the previous year as a proposed standard for vector information encoding.[1]
Throughout the 2000s, VML evolved as an essential component of the Microsoft Office suite, supporting vector graphic creation and export across multiple applications including Word, Excel, PowerPoint, and Visio. It facilitated the preservation of drawing features during saves to web formats and ensured compatibility in the Office Open XML (OOXML) standard, which relied on VML for legacy elements like custom shapes and annotations up to Office 2010.[2][15] This period saw VML's refinement to handle complex diagramming in Visio exports and chart rendering in Excel, adapting to growing demands for interoperable document formats without requiring proprietary binaries.[16]
Partial open-source support emerged in LibreOffice version 3.7 (2012), which added parsing for VML-based ink annotations in OOXML files to enhance compatibility with Microsoft Office documents containing tablet-written notes. In email applications, VML's utility grew with Outlook 2007, where it addressed CSS shortcomings in the Word rendering engine by enabling reliable implementation of backgrounds, positioning, and effects that standard HTML/CSS could not consistently support across clients.[17][18]
Deprecation and Legacy
Vector Markup Language (VML) was deprecated in favor of Scalable Vector Graphics (SVG), which became a W3C Recommendation on September 4, 2001, primarily due to SVG's broader industry adoption and compliance with open web standards.[19][2] As a proprietary Microsoft format, VML lacked the cross-platform interoperability and vendor neutrality that SVG provided, leading to its gradual phase-out in web technologies.[2]
VML was deprecated in Internet Explorer 9, released in March 2011, with native support fully removed in Internet Explorer 10, released in October 2012.[2][20] This decision aligned with the shift toward standardized formats like SVG, which IE10 and later versions supported natively, rendering VML unnecessary for new projects.[21]
VML retains a legacy role in the Office Open XML (OOXML) standard, where it is included solely for backward compatibility with pre-2007 Microsoft Office files containing vector drawings.[22] There has been no active development of VML since the late 1990s, and it receives no ongoing security updates, leaving legacy implementations vulnerable to unpatched exploits.[7]
As of 2025, VML sees rare usage primarily in legacy email templates for Outlook clients, where it enables features like background images unsupported by HTML alone.[5] However, this persistence contributes to accessibility challenges in archived content, as VML elements often fail screen reader compatibility and create barriers for users with disabilities, such as unnavigable shapes or missing alternative text.[4][23]
Technical Aspects
Syntax and Structure
Vector Markup Language (VML) employs an XML-based structure designed for describing vector graphics, allowing it to be integrated directly into HTML documents as an extension. To embed VML within HTML, developers must declare the namespace "urn:schemas-microsoft-com:vml" using a prefix such as "v", typically via the <html xmlns:v="urn:schemas-microsoft-com:vml"> attribute or an explicit <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/> element in the document head. This namespace declaration is essential for browsers like Internet Explorer to recognize and process VML elements correctly, enabling the rendering of shapes and paths alongside standard HTML content. Additionally, a CSS style rule is often included to activate VML behavior, such as <style>v\: * { behavior: url(#default#VML); }</style>, which binds the elements to the VML rendering engine.[2][1]
A basic VML syntax example demonstrates this embedding for a simple shape: <v:oval style="width:100pt;height:75pt" fillcolor="blue"></v:oval>. This code snippet, placed within the HTML body, renders a blue oval of specified dimensions in supported browsers, with the style attribute handling positioning and sizing via CSS properties, and fillcolor defining the interior color. VML elements adhere to XML well-formedness rules, including proper tag pairing and attribute quoting, but they extend HTML by incorporating vector-specific markup that can be styled with CSS for layout and appearance.[24]
Key syntactic rules in VML revolve around defining geometric paths for lines and curves using a dedicated <v:path> element or path attribute, which employs commands like m for moveto, l for lineto, c for curveto, x to close a path, and e to end it—for instance, v="m 10,10 l 100,10 x e" draws a horizontal line segment. Fills are applied through the <v:fill> child element or attributes like fillcolor and filltype (e.g., solid, gradient), while strokes are controlled via <v:stroke> or properties such as strokecolor, strokeweight, and dashstyle to outline paths. Transformations, including rotation, scaling, and flipping, are supported through CSS-compatible style attributes like rotation: 45deg or flip: x y, allowing dynamic manipulation of shapes without altering their core path definitions. An explicit namespace declaration remains mandatory to avoid recognition failures across different parsers.[1]
Key Elements and Attributes
The core of Vector Markup Language (VML) revolves around a set of XML elements designed to define vector graphics, with <v:shape> serving as the foundational element for creating general vector shapes by specifying paths, fills, and strokes.[1] This element encapsulates sub-elements and attributes to render complex graphics, allowing for positioning via the style attribute, which supports CSS properties like width, height, position, top, and left to control the shape's dimensions and placement within the document.[7] For instance, a basic shape might be defined as <v:shape style="position:absolute; width:100; height:100; top:0; left:0" />.[8]
Specialized primitive elements simplify common shapes: <v:rect> draws rectangles using the style attribute for size and position, <v:oval> creates ellipses or circles similarly, and <v:roundrect> produces rectangles with rounded corners, where the arcsize attribute (e.g., arcsize="0.2") sets the corner radius as a fraction of the shape's dimensions.[1] These elements inherit attributes like fillcolor for interior color (e.g., fillcolor="red") and strokecolor for outline color (e.g., strokecolor="blue"), which accept RGB hex values or color names.[7] The coordorigin attribute further refines rendering by establishing the local coordinate system's origin, typically set to "0,0" at the top-left, enabling precise control over drawing relative to the shape's bounds.[8]
For custom paths, the <v:path> element or the path attribute on <v:shape> defines outlines using a command-based syntax akin to path definitions in other graphics formats, though proprietary to VML.[1] Commands include m x,y to move the current point (starting a sub-path), l x,y to draw a straight line to the specified coordinates, and c x1,y1 x2,y2 x,y for a cubic Bézier curve with two control points leading to the endpoint.[8] An example path for a simple triangle might read path="m 0,0 l 100,0 50,100 x", where x closes the path; coordinates are relative to the coordorigin and scaled by coordsize (default "1000,1000").[1]
Advanced customization is achieved through sub-elements: <v:fill> handles interior styling beyond solid colors, supporting type="gradient" for linear or radial gradients (with color, color2, angle, and focus attributes) or type="pattern" for tiled images via src.[7] The <v:stroke> sub-element configures outlines, with attributes like weight for thickness (in coordinate units, e.g., weight="10"), dashstyle for patterns (e.g., "solid", "dash"), and joinstyle for corner handling (e.g., "miter").[1] Additionally, <v:imagedata> embeds raster images within shapes, using src for the image URL and cropping attributes like croptop, cropleft, cropbottom, and cropright (as percentages) to adjust the visible portion.[7] These features allow VML to produce rich, layered graphics while remaining embedded in XML documents, typically within HTML via the v: namespace.[1]
Implementations
Support in Web Browsers
Vector Markup Language (VML) enjoyed full native support in Microsoft Internet Explorer versions 5 through 9, from its introduction in 1998 until 2011, allowing direct rendering of vector graphics without additional scripting.[2]
With the release of Internet Explorer 9 in 2011, Microsoft deprecated VML in favor of standards-compliant alternatives like SVG, introducing a software rendering fallback to emulate older behavior for compatibility while shifting to hardware-accelerated rendering for new vector content.[25]
Beginning with Internet Explorer 10 in 2012, VML was dropped from standards mode, with only partial emulation available via compatibility modes in IE10 and subsequent versions, including IE11, where it renders in document modes emulating IE5, 7, 8, or 9 but with reduced performance.[26]
Non-Microsoft browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge (introduced in 2015), offer no native VML rendering, requiring JavaScript polyfills—such as those emulating VML via SVG or Canvas—to handle legacy content.[27]
For cross-browser vector graphics today, developers rely on SVG or the HTML5 Canvas API as robust, widely supported alternatives to VML.[13]
Integration in Productivity Software
Vector Markup Language (VML) has been integrated into Microsoft Office applications since Office 2000, enabling the creation and export of vector graphics within documents and web formats.[2] Specifically, tools like Microsoft Word, Excel, and PowerPoint utilize VML to represent vector shapes and drawings, particularly when saving content as HTML or MHTML (Web Archive) files, where VML markup embeds scalable graphics directly into the document structure.[8] This integration allows users to preserve the editability and quality of vector elements during export, avoiding rasterization losses common in bitmap formats.[28]
In Microsoft Visio, VML plays a central role in handling vector objects for diagrams, with export options that generate VML-based HTML pages to render shapes and connections scalably in compatible viewers.[29] Similarly, Microsoft Word employs VML for legacy vector features, such as certain graphical elements in text boxes and annotations, ensuring backward compatibility when opening older documents.[30] These capabilities make VML essential for maintaining vector fidelity in Office's drawing and diagramming workflows.
As part of the Office Open XML (OOXML) standard, VML is included for storing vector annotations, shapes, and legacy graphics in file formats like .docx and .xlsx, serving as a transitional mechanism alongside newer DrawingML.[31] This embedding supports features such as ink annotations and OfficeArt shapes, allowing seamless interchange of vector content within OOXML-compliant documents.[32] However, VML's role in OOXML is primarily for compatibility with pre-2007 Office files, with modern implementations favoring DrawingML for new content.[33]
Third-party productivity suites offer limited VML support, focusing on import for OOXML interoperability. For instance, LibreOffice provides partial support for VML elements in OOXML documents, enabling limited rendering of legacy vector features from Microsoft Office files, though issues persist with certain elements like ink annotations as of 2024. Other suites, such as Apache OpenOffice, provide partial import capabilities for VML in DOCX files but lack comprehensive export options, often converting to alternative formats during processing.[34]
VML remains embedded in legacy document internals for full fidelity.
Applications and Challenges
Use in Email Rendering
Vector Markup Language (VML) found significant application in HTML email rendering, particularly within classic versions of Microsoft Outlook from 2007 to the present (as of November 2025), including Outlook 2021 and Microsoft 365 desktop subscribers using the classic interface, where these clients lack robust support for CSS2 properties such as background images and colors.[17] These Outlook versions utilize the Microsoft Word rendering engine—specifically, the Word 2007 engine for Outlook 2007 and subsequent iterations—which prioritizes document formatting over web standards, resulting in inconsistent or absent rendering of standard CSS backgrounds in table cells.[35] As a result, email developers embedded VML elements to simulate these visual effects, ensuring newsletters and promotional emails displayed correctly for a substantial portion of Outlook users.[17]
The core technique involves declaring the VML namespace in the HTML document (e.g., xmlns:v="urn:schemas-microsoft-com:vml") and using conditional comments targeted at Outlook, such as [if gte mso 9], to insert VML shapes like <v:rect> and <v:fill> within table cells.[3] This approach allows VML to overlay vector-based fills or images that mimic CSS backgrounds, with attributes specifying dimensions, colors, or image sources (e.g., filltype="tile" for repeating patterns).[3] For instance, a rectangular VML shape can be positioned to provide a solid color or gradient background, bypassing the Word engine's limitations while remaining invisible to other email clients outside the conditional block. The New Outlook for Windows, which uses a modern Chromium-based rendering engine, does not require VML, but as adoption is gradual, VML remains essential for compatibility with classic Outlook users as of 2025.[17]
Despite its utility, VML's integration in emails raises accessibility concerns, as VML shapes often fail to render properly in screen readers, potentially ignoring embedded content or alt text.[4] Screen readers like NVDA may announce VML elements merely as "graphic" without conveying meaningful information, while others like JAWS provide limited navigation support.[4] To mitigate this, developers must include fallback mechanisms, such as descriptive alt attributes on VML images or plain-text alternatives within the HTML structure, ensuring content remains perceivable to users relying on assistive technologies.[4] Background-only VML implementations pose fewer issues, as they do not interfere with text legibility, but interactive elements like VML-based buttons exacerbate accessibility barriers by lacking keyboard focus.[4]
Rendering Limitations and Workarounds
One of the primary rendering limitations of Vector Markup Language (VML) arises in classic versions of Microsoft Outlook from 2007 to the present (as of November 2025), where the email client's Word-based rendering engine ignores CSS properties like background-image, preventing standard HTML/CSS backgrounds from displaying in table cells.[3][17] Instead, VML must be employed to simulate these effects, but the engine often strips unsupported attributes, such as certain relative sizing or positioning values, leading to inconsistent layouts.[36] This quirk is particularly evident in classic Outlook versions, which rely on the Word HTML renderer rather than a full web standards engine.[37]
To address full-width table cell backgrounds, developers use a <v:rect> element positioned to fill the entire cell, often wrapped in conditional comments targeting Outlook. For instance, the following code places a VML rectangle behind content in a table cell:
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="image-url" color="#fallback-color" />
<v:textbox style="mso-fit-shape-to-text:true">
<![endif]-->
<div>Content here</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="image-url" color="#fallback-color" />
<v:textbox style="mso-fit-shape-to-text:true">
<![endif]-->
<div>Content here</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
This approach ensures the background covers the full cell width and height, with position inherited and the type="tile" fill repeating the image as needed.[38] However, direct width:100% may not always render fluidly in all Outlook variants, prompting fallbacks like mso-width-percent:1000 (equivalent to 100%) for better compatibility.[36]
For specified-width table cell backgrounds, VML shapes are adjusted with exact pixel dimensions to match the cell size, avoiding fluidity issues. An example uses a fixed-width <v:rect> with tiled fills for patterns, embedded in conditional comments:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="width:200px; height:100px;" strokecolor="none" stroke="false">
<v:fill type="tile" src="pattern-image-url" color="#fallback" />
<v:textbox style="mso-fit-shape-to-text:true">
<![endif]-->
<div>Content here</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="width:200px; height:100px;" strokecolor="none" stroke="false">
<v:fill type="tile" src="pattern-image-url" color="#fallback" />
<v:textbox style="mso-fit-shape-to-text:true">
<![endif]-->
<div>Content here</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
This technique tiles the fill across the defined area, ensuring precise control in non-responsive designs, though it requires manual pixel matching to the table structure.[3]
Hybrid VML/CSS methods mitigate these limitations by combining VML for Outlook-specific rendering with standard CSS for other clients, enclosed in conditional comments like [if gte mso 9]. Developers must test for padding and margin collapses, as Outlook's engine can introduce unwanted spacing—often resolved by nesting tables or adding zero-height shims (e.g., <div style="font-size:0;line-height:0;"> </div>).[37]