Vector Markup Language (VML)

来源:互联网 发布:linux服务器硬盘分区 编辑:程序博客网 时间:2024/05/12 13:14

VectorMarkup Language (VML)

World Wide Web Consortium Note13-May-1998

Submission to the World Wide Web Consortium

This version:
http://www.w3.org/TR/1998/NOTE-VML-19980513
Latest version:
http://www.w3.org/TR/NOTE-VML
Authors:
Brian Mathews, AutodeskInc.
Daniel Lee, Hewlett-PackardCompany
Brian Dister, Macromedia,Inc.
John Bowler, MicrosoftCorporation
Howard Cooperstein, MicrosoftCorporation
Ajay Jindal, MicrosoftCorporation
Tuan Nguyen, MicrosoftCorporation
Peter Wu, MicrosoftCorporation
TroySandal, Visio Corporation

Status of this document

This document is a submission to the WorldWide Web Consortium.  It is the initial draft ofthe specification of VML It is intendedfor review and comment by W3C members and is subject to change.There are W3C Staffcomments on this submission.

This document is a NOTE made available by the W3 Consortium fordiscussion only. This indicates no endorsement of its content, northat the Consortium has, is, or will be allocating any resources tothe issues addressed by the NOTE.


Abstract

This document defines the Vector MarkupLanguage (VML).  VML is an application of Extensible Markup Language(XML) 1.0 which defines a format for the encoding of vectorinformation together with additional markup to describe how thatinformation may be displayed and edited.  Thefirst part of this document is an introduction, which gives anoverview of the way VML is organized and how it interacts with bothXML and HTML as defined by the HTML 4.0Specification.  This is followed by detailedtechnical definition of the behavior of every VML element and thepermitted and recommended behaviors for all applications.

The introduction to this document is intended to be appropriatereading for someone who wishes to gain an overview ofVML.  The technical specification is intended forauthors of application software which might use VML and for peoplewho wish to assess the suitability of VML for a particularapplication.  It may also be used by people whoneed to hand-author VML content.  However it isanticipated that most such authoring will proceed by copy and pasteof existing VML - VML is intended to be treated in this way.


Table Of Contents

  • Introduction toVML
    • A SimpleExample
    • DesignRequirements
    • Implementation
  • The TechnicalSpecification of VML
    • Introduction
    • Use of CSS
    • Local CoordinateSpace
    • AttributeTypes
    • DTD EntityDefinitions
    • Top-LevelElements
    • Theshape Element
    • Theshapetype Element
    • Thegroup Element
    • Thebackground Element
    • Advanced Propertiesof Shapes
    • The pathElement
    • Theformulas Element
    • Thehandles Element
    • The fillElement
    • Thestroke Element
    • Theshadow Element
    • Thetextbox Element
    • Thetextpath Element
    • Theimagedata Element
    • PredefinedShapes
    • Common Properties ofAll Predefined Shapes
    • The lineElement
    • Thepolyline Element
    • Thecurve Element
    • Theroundrect Element
    • The ovalElement
    • The arcElement
    • Theimage Element
  • NormativeReferences
  • InformativeReferences

Introduction to VML

The Vector Markup Language (VML) supports the markup of vectorgraphic information in the same way that HTML supports the markupof textual information.  Within VML the content iscomposed of paths described using connected lines andcurves.  The markup gives semantic andpresentation information for the paths.

VML is written using the syntax of XMLjust as HTML is written using the syntax of SGML (the StandardGeneralized Markup Language, [ISO 8879]) - XML is arestricted form of SGML.  VML uses Cascading Style Sheets, Level 2in the same way as HTML to determine the layout of the vectorgraphics which it contains.  The workflow involvedin rendering VML can be compared to that involved in rendering HTMLas show in the following figure.

Flow chart style diagram:
HTML(SGML) ->(parse)->
HTML DOM(DOM) ->(CSS Visual Rendering Model)->
Box positions (layout) determined (CSS Box Model) ->(Character layout)->
Data for imaging (Visual Effects) ->(Operating system imaging API)->
Bitmap(raster image) OR
PDL(printer)
VML(XML:SGML) ->(parse)->
VML canonical form ->(CSS Visual Rendering Model)->
Box determined for every 'shape' ->(Path transformations)->
Data for imaging (Visual Effects) ->(Operating system imaging API)->
Bitmap(raster image) OR
PDL(printer)

The primary difference between the HTML workflow and the VMLworkflow is in the last but one step - character layout versus pathtransformations.  In the HTML case, the workflowgenerates locations and other information for sequences ofcharacters which are then rendered using native operating systemfunctionality.  In the VML, case the workflowgenerates locations and related information for vector paths andrelated objects (such as bitmaps) which are then rendered usingnative operating system functionality.

The common workflow is an essential part of VML - two designrequirements were to integrate VML with existing HTML and to avoidrequiring a user agent to reinvent the wheel by using differentrepresentations or implementations of existing HTML or CSSfunctionality.

Like HTML, VML describes objects which will often be furtheredited.  In the case of HTML, these objects areparagraphs, forms or tables.  In the case of VML,the objects are shapes or collections of shapes known asgroups.   VML does not require aparticular approach to editing - it accommodates a wide variety ofeditors.  The enormous range of graphical datarequires that VML pays careful attention to how an editor recordsthe semantic information related to the VMLdescription.  VML ensures that different editorscan recognize and correctly handle each other's data (even thoughthey will not normally understand it).

A Simple Example

The simple diagram below contains both simple graphics andtext.

Idea [text contained in 'explosion' shape with gradient red to white fill]
[vertical arrow pointing down, filled with gradient green to white fill]
Product [text contained in 'terminator' flowchart shape filled with gradient blue to white fill]

Although the bitmap compression used makes the image very small(it only requires about 8kbytes) the bitmap has none of theinformation necessary to make further changes to the diagram - forexample a user who needs to change "Product" to "Products" mustrecreate the bitmap from scratch.  Thecorresponding VML has all the necessary editing information inabout 2.5kbytes.

.font5 {
color: black;
font-size: 18.0pt;
font-weight: 400;
font-style: normal;
text-decoration: none;
vertical-align: text-bottom;
font-family: "Times New Roman";
}
group
style='position: absolute;
margin-left: 10.2pt;
margin-top: 4.8pt;
width: 90pt;
height: 191.4pt;
z-index: 1'

coordsize="21600, 21600">
 shapetype id="irregularSeal1" coordorigin="17, 8" coordsize="150, 319"
path="m10800,5800l8352,2295,7312,6320,370,2295,4627,7617,,8615,3722,11775,135,14587,
5667,13937,4762,17617,7715,15627,8485,21600,10532,14935,13247,19737,14020,
14457,18145,18095,16837,12942,21600,13290,17607,10475,21097,8137,16702,7315,
18380,4457,14155,5325,14522,0xe"
>
stroke joinstyle="miter"/>
path gradientshapeok="t" textboxrect="4627, 6320, 16702, 13937"/>
shapetype>
 shape type="#irregularSeal1"
style='position: absolute;
left: 17; top: 8; width: 150; height: 120'
fillcolor="#f06">
fill type="gradient" color2="fill lighten(0)"
method="linear sigma" angle="-135" focus="100%"/>
textbox>

Idea
 
textbox>
shape>
 shapetype id="downArrow" coordsize="21600, 21600"
adj="16200, 5400"
path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
stroke joinstyle="miter"/>
formulas>
f eqn="sum #0 0 0"/>
f eqn="sum #1 0 0"/>
f eqn="sum height 0 #1"/>
f eqn="sum 10800 0 #1"/>
f eqn="sum width 0 #0"/>
f eqn="prod @4 @3 10800"/>
f eqn="sum width 0 @5"/>
formulas>
path textboxrect="@1, 0, @2, @6"/>
handles>
h position="#1, #0" xrange="0, 10800" yrange="0, 21600"/>
handles>
shapetype>
 shape type="#downArrow"
style='position: absolute; left: 40; top: 143; width: 105; height: 105'
adj="11632, 4371"
fillcolor="#6f9">
fill type="gradientScale" color2="fill lighten(0)"
method="linear sigma" angle="-135" focus="100%"/>
shape>
 shapetype id="flowChartTerminator" coordsize="21600, 21600"
v="m3475,0qx0,10800qy3475,21600l18125,21600qx21600,10800qy18125,0xe">
stroke joinstyle="miter"/>
path gradientshapeok="t" textboxrect="1018, 3163, 20582, 18437"/>
shapetype>
 shape type="#flowChartTerminator"
style='position: absolute; left: 17; top: 263; width: 150; height: 64'
fillcolor="#39f">
fill type="gradient" color2="fill lighten(0)"
method="linear sigma" angle="-135" focus="100%"/>
textbox>

Product


textbox>
shape>
group>

This VML contains all the information required both to edit andto display the diagram.   The VML has been colorcoded as follows:

Blue - XMLstructure.  VML is formatted according to therules of XML.  The v: prefix on each VML tagidentifies the tag as VML, following the current suggestion forhandling namespaces in XML.  Any standard XMLparser can parse the VML and hand off the resultant data to a VMLspecific processor.

Green - CSSinformation.  The first block of CSS is used inthe HTML which defines the text in the diagram - this is juststandard CSS.   Each shape andgroup element has a CSS style attribute which definesthe position and size of the shape within thepage.  The location of the top-level group isdefined completely by the CSS - a layout engine need not understandany aspect of VML to handle this positioning information.

Black - VML.  The remainder of the datadescribes the graphical properties of thediagram.  Notice how this data is associated withthe shape and shapetypeelements.  The shape elements arerendered in the diagram, the shapetype elements allowreuse of geometric information between shapes.  Inthis case, because there are three different shapes in the diagram,there are also three shapetype elements, but in morecomplex cases the same shape would be used multiple times (eachinstance referencing the same shapetype element).

Brown - HTMLtext.  This text is associated withshape elements in the diagram.  TheVML in italics controls the location of the HTML text.

Purple - the most basic VMLgeometric information describes closed or openpaths.  These paths may be parameterized - thisallows a single shapetype element to define multiplerelated paths.  For example, thedownArrow shapetype above is defined parametricallyand the following four arrows all share the same basic shape.

Four downward pointing arrows, white fill, black outline.
Each arrow with a different proportion of 'line' width to 'head' width.

The corresponding VML is:

shape type="#downArrow"
style='position: absolute; left: 77; top: 16; width: 64; height: 128'
/>
shape type="#downArrow"

style='position: absolute; left: 149; top: 16; width: 64; height: 128'
adj=", 9450"
/>
shape type="#downArrow"

style='position: absolute; left: 219; top: 16; width: 64; height: 128'
adj="14175, 2025"
/>
shape type="#downArrow"

style='position: absolute; left: 292; top: 16; width: 64; height: 128'
adj="7088, 7425"
/>

The combination of parameterization with a concise pathdescription allows VML diagrams to be relatively compact, despitethe large amount of editing information.  Indeed,large VML diagrams become dominated by the CSS required to positionthe elements.   VML defines a defaulting mechanismfor CSS which allows the container box to be inherited in order toavoid this overhead on complex illustrations.

Design Requirements

Many requirements guided the design of VML. The most crucial are listed below in order of importance.

  1. Retain the information required for further editing ofVML.  This requirement has the importantconsequence that VML must be extensible - it is inconceivable thatVML meets the requirements of all editing applications, thereforeit must be possible for every application to add the requiredediting data specific to that application.
  2. Support interchange of data betweenapplications.  One application must be able toread and edit the data of another application, even though thefirst requirement means that, potentially, both applications willadd application specific data.
  3. Use the existing mechanisms of HTML and CSS - this facilitatesimplementation of VML and ensures that implementations can reuseexisting code and techniques.
  4. Be backward compatible with existing useragents.  VML adoption will be inhibited unless itis possible to produce VML which works with existing web browsers.  VML has special provisions to allow alternatebitmap representations of graphics for backward compatibility.
  5. Provide efficient representations of vectorgraphics.  Textual representations tend to beverbose.  VML addresses this by defining a compactrepresentation of path elements and by following a design principleof using concise names for frequently used attributes and moreverbose names for less frequently used attributes.
  6. Allow the implementation of subsets where an application doesnot require the full functionality of VML. Normally a viewer will implement the full specification, howevereditors should be able to implement only the subset required fortheir own data.
  7. Support hand-editing.  This leads to a designprinciple that the structure of the graphic be obvious and that thesyntax be familiar to HTML programmers - effectively the same asrequirement (3).
  8. VML should support scripting, including the requirements ofanimation.  This, again, leads to a desire for thestructure of VML to match the structure of the graphics.  It also leads to the use of types within VMLattributes which are appropriate to animation - for example 2Dcoordinates are defined as single attributes "x, y" rather thanpairs of attributes.

Implementation

An implementation of VML will fall into one of twoclasses.  A viewer implementation willnormally implement the full specification, although it can avoidthe need to implement any functionality to edit VML (beyond thatrequired by any script language which the viewersupports).  An editor implementation mayonly need to implement those specific features necessary to outputthe data which the editor manipulates.  Even aneditor which potentially manipulates VML produced by otherapplications may need nothing more than a subset of the CSS2 visualrendering model.   Such an editor can correctlyposition the VML produced by other applications even though it maynot be able to render individual shapes.

The implementation model follows thediagramat the start of this document.  An implementationcan proceed in five separate, independent, steps.

  1. Each implementation requires an XML parser. This performs lexical analysis of VML and identifies the individualelements.  XML parsers are already widelyavailable.
  2. Non-trivial implementations will need to parse the structure ofthe individual VML attributes.  To make this easy,VML defines basic types which have canonical internalrepresentations - no VML implementation is required to storegreater accuracy than that implied by the canonical representationand all VML data can be converted to the correspondingrepresentations.  This means that the implementorneed only write a small number of string parsers to be able tohandle all VML data.  Most of these parsers arealready present either as part of language libraries or as aconsequence of the need to parse CSS.
  3. An implementation must handle that part of the CSS2 visualrendering model used by VML.  VML uses a smallsubset of CSS2 to define the block level boxes for each VMLelement.  Implementing this gives a minimal VMLimplementation which can handle the layout of elements (using theirblock level boxes) without doing any rendering.
  4. Viewing implementations and most editing implementations musthandle the path parameterization required by VML - a small set ofmathematically defined transformations allow the VML representationof a path to be reduced to a simple set of closed or open linesegments.  Extensions to VML may addtransformations, however VML allows such extensions to beaccompanied by equivalent definitions of the same information inunextended VML.
  5. Finally the implementation must render the path level data inthe way specified by the VML renderingattributes.  Normally this operation maps easilyonto widely available operating system facilities.

Each of these five steps is testable in isolation andimplementable independently of the other steps. Only steps (2) and (4) are VML specific, and step (2) can reusestandard technology available in many places.


The Technical Specification of VML

Introduction

The overall structure of VML may be summarized by the XMLdefinitions of the two primary elements - shape andgroup.

A shape element is used to define a visible vectorgraphic element.   Most shapes have apath definition - a sequence of straight lines and cubicbézier curves which defines an outline.  Theoutline may be stroked, as specified by attributes on theshape and the stroke sub-element.  Itmay also be filled, under the control of shape attributesand the fill sub-element.  Additionalsub-elements support raster (bitmap) images, more advancedtransformations of the path and text drawn on top of the shape.

Below is an example of a simple shape and its VMLrepresentation.

A green five pointed star with a red outline.


       stroke="true"strokecolor="red" strokeweight="2" fill="true"
       fillcolor="green"coordorigin="0 0" coordsize="175 175">

A group element is used to group together severalshapes so that they may be transformed together as one unit.

In addition VML defines several auxiliary top-level elements tohelp make the editing and representation of complex graphicalinformation more compact and convenient.

The shapetype element is used to define a prototypedefinition of a shape.   A shapeelement may reference a shapetype in order toinstantiate several copies of the same shape.

Several predefined shapes may be used as convenient alternativesto explicitly declaring a shape element with apath.  These predefined shapes areline, polyline, curve,rect, roundrect, oval,arc, and image.

Use of CSS

The style attribute uses the syntaxdescribed in "Visualrendering model" in Cascading Style Sheets, Level2.   The positioning may be absolute orrelative unless the shape is within a group, in which case it mustbe absolute (relative to the top left of the parent group). The zorder of the elements within the group is from the first (lowest)to the last (highest) - i.e. later elements obscure earlierelements.  The elements establish no relativeposition - hence the restriction to use of absolutepositioning.

The VML shape and group elementsparticipate fully in the CSS2 visual renderingmodel.  In addition to standard CSS layout the VMLelements may also be rotated or flipped.  Eachelement also establishes a coordinate space for its content - thisallows scaling of the content with respect to the containingelements.   The following VML specific CSSproperties support this.

rotation

The value specifies a rotation for the shape or group inclockwise degrees about its center (i.e. positive is clockwise,negative is counterclockwise - the normal definition in an invertedcoordinate space).

flip

The value specifies that the shape or group is flipped about itscenter about either the x or the y axis according to the followingtable.

ValueDescriptionxFlip the rotated shape about the y axis (invert xordinates)yFlip the rotated shape about the x axis (invert yordinates)

Both x and y may be specified in theflip property.

center-x,center-y

These properties may be used to specify the center of the blocklevel box of the element within its parent containerbox.  They are alternatives to leftand right and convey the sameinformation.  It is an error to specify bothleft and center-x Auser agent should respond to the error by honoringcenter-x (or center-y). The user agent may issue a diagnostic to the user if this isappropriate.

Local Coordinate Space

The shape and group elements arecontaining blocks for their content - they define a CSS2 "blocklevel box".  Inside the containing block a localcoordinate system is defined for any sub-elements using thecoordsize and coordoriginattributes.  All CSS2 positioning information isexpressed in terms of this local coordinatespace.  Consequently CSS2 position attributes(left, top, width,height and so on) have no unit specifier - they aresimple numbers, not CSS length quantities.

The coordsize attribute defines how many unitsthere are along the width of the containing block. Thecoordorigin attribute defines the coordinate at thetop left corner of the containing block.  Forexample, if a group were defined as follows:

The containing block would be 300 pixels wide by 250 pixels high(assume that the parent element of this group was not anothergroup).  Then the coordinate system inside thecontaining block would range from –500.0 to 500.0 along the x-axisand –500.0 to 500.0 along the y-axis with 0.0, 0.0 right in thecenter of the rectangle.   Any shapes inside thegroup are positioned and sized according to this local coordinatesystem.  No matter how the width and height of thegroup is changed, the local coordinate system inside will remainthe same.

The rationale behind this is that the vectors defining a shapecan be specified in a local coordinate system.  Ifthe containing block for the shape is changed, the outline of theshape will be automatically scaled to the new box. Similarly,shapes within the local ordinate system of a group will beautomatically scaled if the containing block of the groupchanges.

It is important to note that the containing block doesnot establish a clipping region. Sub-elements and paths may be drawn outside the boundaries of thecontaining block.  The containing block merelyserves to map the local coordinate space to the page space.

Attribute Types

Basic types of attributes are identified according to theirlexical form as follows.

Data typeDescriptionbooleanAn attribute which can take values true and false.stringCharacter data of any length.  Normally stringattributes have a restricted range of defined values (as inCSS.)numberNumeric data, used for values that are integer or fractionalnumbers and for values which specify lengths. Lengths and numbers follow the lexical form defined for CSS with asuffix indicating a scale factor.Vector2DNumeric data in the form X,Y. Usually used to list a coordinatein 2D space. May be in form "x y" or "x, y"Vector3DNumeric data in the form X,Y,Z. Usually used to list acoordinate in 3D space. May be in the form "x y z" or "x,y,z"

A complete set of data types is defined for VML along withcanonical representations which ensure that the minimum precisionwhich an authoring tool must store and the maximum which it canrely on are well defined.  At this stage thetables in this document do not give the underlying data types.

DTD Entity Definitions

VML shape elements (shape and groupand the predefined shapes) use the standard HTML core attributesplus some attributes which may appear on any element.

 id         id    #implied-- document-wide unique id --
 class      cdata  #implied -- space separated list of classes--
 style      cdata  #implied -- associated style info --
 title      cdata  #implied -- advisory title/amplification–-
 href       cdata  #implied -- URL link if the element isclicked on --
 target     cdata  #implied -- target frame for href –-
 alt        cdata  #implied -- alternate text if elementcannot be displayed --
  coordsize  cdata  #implied –- size of coordinate space insidethe element --
  coordorigin cdata  #implied --coordinate at top-left corner of element --
  wrapcoords cdata  #implied -- outline to use for tight textwrapping --
>

In addition shape elements and the special pre-defined elementshave standard attributes to control rendering.

 opacity     cdata #implied -- opacity of the shape --
 chromakey   cdata #implied –- color to be made transparent --
 stroke      cdata #implied -- Boolean whether to stroke the outline or not--
  strokecolor  cdata #implied –-RGB color to use for the stroke --
  strokeweight cdata #implied –- weight of theline to use for stroking --
 fill        cdata #implied -- Boolean whether to fill the shape or not --
 fillcolor   cdata #implied –- RGB color to use for the fill --
 print       cdata #implied -- Boolean whether the element is to be printed--
>

Sub-elements are used within shape elements to define moresophisticated rendering operations.

  (path | formulas | handles | fill | stroke |shadow | textbox | textpath | imagedata |
  %extensions;)
>

At most one instance of each sub-element may occur in a shapeelement.  If multiple elements do occur the useragent should respond to the error by merging the repeated elementsand retaining only the last values specified if the same attributeis specified more than once.   The user agent mayalso issue a diagnostic if appropriate.

The entity %extensions; acts as a placeholder forfuture extensions.   Any extension element may bequalified by the v:ext attribute.

  v:ext cdata "backwardcompatible" -- mayalso be "view" or "edit" --
>

When an authoring agent encounters such an element thev:ext attribute tells it how to handle theextension.

v:ext valueElement interpretationViewer behaviorEditor behavioreditThe element contains high level semantic information which wasused by the original content generator.  Theinformation should not be removed from the shape.The element content can be ignored.The element content can be ignored, it need not be removedhowever it must not be duplicated.backwardcompatibleThe element contains information from the original contentgenerator which does not affect the appearance of the shape butwhich must be changed if the shape is changed.The element content can be ignored.The element content can be ignored unless the shape is edited,in which case the element must be removed.viewThe element contains information which changes the appearanceof the shape from that implied by VML.The element cannot be displayed, the viewer must use thealternate IMG representation.The element content can be ignored unless the shape isedited.  The VML information can be used as aplaceholder.

These rules give an editor application the ability to edit anyVML document.  If an editor just changes thedocument layout it can still handle even v:ext="view"extensions - the VML definition ensures that the editor knows theCSS layout properties of the shape.  The rulesaccommodate a wide variety of editor behavior - an editor mightchose to lock an extended shape to prevent invalidation of theextension information for example.

Top-Level Elements

The shape Element

This is the top-level element used to describe a shape. Thiselement may appear by itself or within a element. If a isreferenced using the type= attribute, any attributesspecified in the shape will override those found in theshapetype.

  type cdata #implied -- reference to shapetype--
  adj  cdata #implied -- list ofadjust values for parameterized paths --
  path cdata #implied -- string with command setdescribing a path --
>

The path definition is described in more detailbelow.  Path parameterization allows one canonicalpath to describe a range of shapes which differ only in geometricproportions (for example, ring shapes where the ratio of the innerto the outer circle diameter varies).

Attribute Descriptions.
Name SpaceAttributeTypeDefault ValueDescriptionVMLidstringnullA unique ID that identifies the shape. Used by script toreference the shape in a collection.VMLtypestringnullA reference to a shapetype id that describes thestandard path, fill and stroke properties of ashape.  Properties specified in the shape willoverride the shapetype properties.VMLadjstringnullA comma delimited list of numbers that are the parameters forthe guide formulas that define the path of the shape. Values may beomitted to allow for using defaults. There can be up to 8 adjustvalues.VMLpathstringnullA string containing the commands that define the path. (Seepath element for definition of the command set).VMLhrefstringnullThe URL to jump to if this shape is clicked on.VMLtargetstringnullThe target frame in a URLVMLclassstringnullThe CSS class of this shapeVMLtitlestringnullThe title of the shape that may be displayed by editorsVMLaltstringnullAlternative text associated with the shape.CSSvisibilitystringvisibleIf hidden the shape is not rendered and does notgenerate mouse events.CSStop, margin-top, center-y, etcnumber0The position of the top of the containing block of theshape.  In CSS units or, for elements in a group,in the coordmap units of parent element.  This maybe specified by any of the CSS mechanisms for locating a containerbox.CSSleft, margin-left, center-x, etcnumber0The position of the left of the containing block of theshape.  In CSS units or, for elements in a group,in the coordmap units of parent element.  This maybe specified by any of the CSS mechanisms for locating a containerbox.CSSwidthnumber100The width of the container rectangle of theshape.  In CSS units or, for elements in a group,in the coordmap units of parent element.CSSheightnumber100The height of the containing block of theshape.  In CSS units or, for elements in a group,in the coordmap units of parent element.CSSz-indexnumber0The z-index of the shape. Positive numbers are in front of thescreen. Negative numbers are behind the screen.CSSrotationnumber0The angle to rotate the reference rectangle. Zero degrees means no rotation.   Positive anglesare clockwise (because positive y-axis is down.)CSSflipstringnullTakes values "x" or "y" or both.  Indicatesthat the shape image inside the reference rectangle should beflipped as appropriate along the listed axes in the orderspecified. i.e. flip: x means flip about the y-axis so that xbecomes -x.CSSpositionstring"static"May be any CSS value when this is a top-level element. When itis contained inside a group, it must always beabsolute.VMLopacitynumber1.0The opacity of the entire shape. A fraction between 0(completely transparent) and 1 (completely opaque.)VMLchromakeycolornullA color value that will be transparent and show anything behindthe shape.VMLstrokebooleantrueIf true, the path defining the shape will be stroked. Bydefault, it will be stroked using a solid line unless there is astroke sub-element which may specify more complexstroke properties. The stroke sub-element has an onattribute which will override this if specified.VMLstrokecolorcolor"black"The primary color of the brush to use to stroke the path ofthis shape. The stroke sub-element has a "color" attribute whichwill override this if specified.VMLstrokeweightnumber"0.75pt"The width of the brush to use to stroke the path. The strokesub-element has a "weight" attribute which will override this ifspecified.VMLfillbooleantrueIf "true", the path defining the shape will be filled. Bydefault, it will be filled using a solid color unless there is asub-element that specifies more complex fill properties. If"false", the fill is transparent. The fill sub-element has an "on"attribute which will override this if specified.VMLfillcolorcolor"white"The primary color of the brush to use to fill the path of thisshape. The fill sub-element has a "color" attribute which willoverride this if specified.VMLvstringnullA string containing the commands that define the path - see thedescription of the path element for moreinformation.  X or Y coordinate values can be areference to a formula in the form @numberwhere number is the formula’s ordinal number, e.g.,"@2".  See theformula element.VMLprintbooleantrueIf "true", this shape should be printed.VMLcoordsizeVector2D"1000 1000"The width and height of the coordinate space inside thecontaining block of this shape. If it is not specified, it is thesame as the width and height of the rectangle.VMLcoordoriginVector2D"0 0"The coordinates at the top-left corner of the containingblock.VMLwrapcoordsstringnullIn the form "x1,y1,x2,y2,x3,y3…" (same as coords in anAREA). Describes in drawing units around a shape. Usedfor the tight wrapping of text around an object.
XML template

Throughout this document XML templates are used tosummarize the full set of attributes which may appear on eachelement.  The shape elements - shape,group and most of the predefined shapes have CSS2positioning information which locates the shape within itscontainer.  This is not reflected in the templatesas there are several different ways of specifying the sameinformation.  A top-level shape will typically useabsolute positioning plus margin-left andmargin-top properties:

style='position: absolute; margin-left: 10pt; margin-top:10pt; width: 100pt; z-index: 1.5'

A shape within a group can useleft/top orcenter-x/center-y as appropriate:

style='left: 100; top: 100; width: 1000; height:1000'

style='center-x: 550; center-y: 550; width: 1000; height:1000; rotation: 55deg'

The rotation, z-index andflip properties may also be given when required.

  type=null
  adj=null
  path=null
  opacity="100%"
  chromakey="none"
  stroke="true"
  strokecolor="black"
  strokeweight="0.75pt"
  fill="true"
  fillcolor="white"
  print="true"
  id=null
  class=null
  style='visibility: visible'
  title=null
  href=null
  target=null
  alt=null
  coordsize="1000, 1000"
  coordorigin="0, 0"
  wrapcoords=null
/>

The shapetype Element

Description

This is the element used to describe a shape so that it may bereferenced at a later point in the document by a shapeelement.  It is identical to theshape element except that it cannot reference anothershapetype element and that the visibilityproperty is always hidden(Authoring agents may choose to make shapetypeelements visible to allow them to be edited - in this case the CSSpositioning properties become relevant.)

When a shape element makes reference to ashapetype, the shape may duplicate someof the attributes that have already been specified in theshapetype.   In these cases, theattributes in the shape override those of theshapetype.

  adj  cdata #implied -- listof adjust values for parameterized paths --
  path cdata #implied -- string with command setdescribing a path --
>

Attribute Descriptions

See .

XML Template

  adj=null
  path=null
  opacity="100%"
  chromakey="none"
  stroke="true"
  strokecolor="black"
  strokeweight="0.75pt"
  fill="true"
  fillcolor="white"
  print="true"
  id=null
  class=null
  style='visibility: visible'
  title=null
  href=null
  target=null
  alt=null
  coordsize="1000, 1000"
  coordorigin="0, 0"
  wrapcoords=null
/>

The group Element

This top-level element is used to group shapes (including othergroups) so that they can be positioned and transformed as a singleunit.

  (group | shape | shapetype | line | polyline| curve | rect | roundrect | oval | arc | image)*
>

Attribute Descriptions

See for the descriptions of the following attributes:id, class, style(top, left, width,height, rotation, z-index,position, visibility),title, href, target,alt, coordsize,coordorigin.

XML template

  id=null
  class=null
  style='visibility: visible'
  title=null
  href=null
  target=null
  alt=null
  coordsize="1000, 1000"
  coordorigin="0, 0"
  wrapcoords=null
/>

The background Element

Description

This element describes the fill of the background of a pageusing vector graphics fills.  This illustrates howthe rendering description of VML can be extended to existing andnew HTML objects.

 id       id    #implied-- document-wide unique id --
 fill     cdata #implied -- Boolean whether to fill the shape or not --
  fillcolor cdata #implied –- RGB color to use forthe fill --
>

Attribute Descriptions

See for the descriptions of id, filland fillcolor.

XML template

  id=null
  fill="true"
  fillcolor="white"
/>

Advanced Properties of Shapes

The following sub-elements may be used to describe more advancedproperties of shapes. For example, the shape element only allowsthe description of a solid color fill. One would use thefill sub-element to describe a gradient fill.

The path Element

This sub-element may appear inside a shape or ashapetype to define the path that makes up the shape.This is done through a string that contains a rich set of penmovement commands.  This sub-element alsodescribes the limo-stretch point, inscribed textboxrectangle locations, and connection sitelocations.  The limo-stretch definition and theformulas element (described below) allow greaterdesigner control of how the path scales.   Theyallow, for example, definition of a true rounded corner rectanglewhere the corners remain circular even though the rectangle isscaled anisotropically.

 id             id   #implied --document-wide unique id --
              cdata#implied -- string containing pen movement commands --
 limo           cdata #implied -- point to do a limo stretch --
 fillok         cdata #implied -- path may be filled --
 strokeok       cdata #implied -- path may be stroked --
 shadowok       cdata #implied -- path may be used to create a shadow --
 arrowok        cdata #implied -- arrowheads may be drawn on path --
  gradientshapeok cdata #implied -- how tointerpret gradientradial --
 textpathok     cdata #implied -- path is designed for use with textpath --
 textboxrect    cdata #implied -- rectangle to hold label text --
>

Properties
Name SpaceAttributeTypeDefault ValueDescriptionVMLidstringnullA unique ID that identifies the shape. Used by script toreference the shape in a collection.VMLvstringnullA string containing the commands that define the path. (Seebelow for definition of the command set).VMLlimovector2D"0,0"A point along the x and y dimensions of a shape where the shapewill limo stretch.VMLfillokbooleantrueIf set the path may be filled, if unset any fill specificationon the path should be ignoredVMLstrokeokbooleantrueIf set the path may be stroked, if unset any strokespecification on the path should be ignoredVMLshadowokbooleantrueIf set a shadow path may be created from the path, if unset anyshadow specification should be ignored.VMLarrowokbooleanfalseIf set arrowheads may be added to the ends of the path, ifunset any arrowheads specified in the stroke elementshould be ignored.VMLgradientshapeokbooleanfalseIf set a gradient fill can be produced by repeated drawing ofscaled versions of the path - this must only be set if it ispossible to scale the path in such a way that a fill is alwayscontained in the original path.  This controls theinterpretation of the fill elementtype="gradientradial" attribute setting.VMLtextpathokbooleanfalseIf set this indicates that the path is an appropriate warpingpath for the textpath element.  Ifnot set the textpath element must beignored.  Normally textpath paths are not usefulunless they are associated with a textpathelement.VMLtextboxrectstringnullA string of the form "L1,T1,R1,B1; L2,T2,R2,B2;…" If the stringis null, then the textbox is set equal to the geometry box. Inpractice 1, 2, 3 or 6 text rectangles may be specified. Detail onhow more than one rect is used, is specified elsewhere. The left,top, right, or bottom values can be a reference to a formula in theform @number wherenumber is the formula’s ordinalnumber.  The default is the same as the containingblock.

The v attribute string (or the pathproperty of shape) is made up of a rich set ofcommands as summarized in the following table:

commandNameparametersDescriptionmmoveto2Start a new sub-path at the given (x,y) coordinatellineto2*Draw a line from the current point to the given (x,y)coordinate which becomes the new current point. A number ofcoordinate pairs may be specified to form a polyline.ccurveto6*Draw a cubic bézier curve from the current point to thecoordinate given by the final two parameters, the control pointsgiven by the first four parameters. The current point becomes theend point of the bézier.xclose0Close the current sub-path by drawing a straight line from thecurrent point to the original moveto point.eend0End the current set of sub-paths. A given set of sub-paths (asdelimited by end) is filled using eofill. Subsequent sets ofsub-paths are filled independently and superimposed on existingones.trmoveto2*Start a new sub-path at the coordinate (cpx+x, cpy+y).rrlineto2*Draw a line from the current point to the given relativecoordinate (cpx+x, cpy+y).vrcurveto6*Cubic bézier curve using the given coordinate relative to thecurrent point.nfnofill0The current set of sub-paths (delimited by end -e) will not be filled.nsnostroke0The current set of sub-paths (delimited by end -e) will not be filled.aeangleellipseto6*center (x,y) size(w,h) start-angle, end-angle. Draw a segmentof an ellipse as describes using these parameters. A straight lineis drawn from the current point to the start point of thesegment.alangleellipse6*Same as angleellipseto except that there is an implied movetothe starting point of the segment.atarcto8*left, top, right, bottom start(x,y) end(x,y). The first fourvalues define the bounding box of an ellipse. The last four definetwo radial vectors. A segment of the ellipse is drawn which startsat the angle defined by the start radius vector and ends at theangle defined by the end vector. A straight line is drawn from thecurrent point to the start of the arc. The arc is always drawn in acounterclockwise direction.ararc8*left, top, right, bottom start(x,y) end(x,y). Same as arctohowever a new sub-path is started by an implied moveto the startpoint of the arc.waclockwisearcto8*left, top, right, bottom start(x,y) end(x,y). Same as arcto butthe arc is drawn in a clockwise direction.wrclockwisearc8*left, top, right, bottom start(x,y) end(x,y). Same as arc butthe arc is drawn in a clockwise directionqxellipticalqaudrantx2*end(x,y).

A quarter ellipse is drawn from the current point to the givenend point. The elliptical segment is initially tangential to a lineparallel to the x-axis. (i.e. the segment starts outhorizontal)

qyellipticalquadranty2*end(x,y).

Same as ellipticalquadrantx except that the elliptical segmentis initially tangential to a line parallel to the y-axis. (i.e. thesegment starts out vertical)

qbquadraticbezier2+2*(controlpoint(x,y))*, end(x,y)

Defines one or more quadratic bézier curves by means of controlpoints and an end point.  Intermediate (on-curve)points are obtained by interpolation between successive controlpoints as in the OpenType font specification.  Thesub-path need not be started in which case the sub-path will beclosed.  In this case the last point of thesub-path defines the start point of the quadratic bézier.

Edit behavior extensions

VML does not mandate a user interface for editing applications.It attempts to convey information about the object which is beingedited - this may imply the behavior of aneditor.  One common operation implied by VML isthe need to edit the points in a path. The edit behavior extensionsattempt to identify some common behavior of v objectsso that applications behave consistently however the informationencoded is very low level.  Consequently theseextensions may be ignored completely by a conforming applicationand any conforming application is free to remove or rewrite theedit information in the path.

The extensions define the behavior of all following points underediting operations which move the points or the associated linesegments. Nine different behaviors are identified for the verticesin the path attribute (the end points, not the control points)depending on whether the associated line segment is a line orcurve.

commandNameparametersDescriptionvertex behaviorline segmenthaAutoLine0autolinehbAutoCurve0autocurvehcCornerLine0cornerlinehdCornerCurve0cornercurveheSmoothLine0smoothlinehfSmoothCurve0smoothcurvehgSymmetricLine0symmetriclinehhSymmetricCurve0symmetriccurvehiFreeform0autoany

The line segment type defines whether the behavior applies topoints which are adjacent to lines or whether it applies to pointsadjacent to curves. The vertex behavior specifies how the two linesegments either side of a point are expected to behave as the pointis moved.

Vertex behaviorAre (curve) control points calculatedautomatically?Are control points either side of the vertexequidistant?Are control points co-linear with the vertex?Are control points visible to the user?Autoyes--noSymmetricnoyesyesyesSmoothnonoyesyesCornernononoyesFreeformnononoyes

The auto behavior implements some application-definedalgorithm to guess the correct control points when a point ismoved. This is, effectively, the default - it implies that theapplication should use other information to determine the controlpoint behavior. The symmetric, smooth and corner behaviorsdetermine how one control point behaves when the other at thatvertex is moved. The freeform behavior does not recalculate controlpoint position as vertices are moved.

Lexical format of the vattribute value

This value consists of commandsfollowed by zero or more parameters.  The numberof parameters is given in the table above. In this table, the suffix "*" indicates that the parameter set maybe repeated (but the number of parameters must be a multiple of thegiven number).  The quadratic bézier must havemore than two pairs of parameters.

  • Either commas or spaces may be used to delimit parameters foreach command.  E.g. "m 0,0" and"m0 0" are both acceptable.
  • Parameters that are zero may be omitted using commas with noparameter.  E.g. "c 10,10,0,0,25,13"and "c 10,10,,,25,13" are equivalent.
  • Parameterized paths are also allowed. In this case, the shapemust also have a formula element with a list offormulas that may be substituted into the path using the@ symbol followed by the number of the formula. Theadj property of the shape contains the inputparameters for these formulas.  E.g. "moveto@1@4".   The evaluations of the formulasare substituted into the appropriate positions.  Note that @ also serves as a delimiter.

In the event that a path is malformed VML requires the followingbehavior if the page is displayed.

  • Missing parameter values must be supplied as 0.
  • Unrecognized commands must be skipped - they should be treatedas though they are space characters.

An application is also permitted to fail to display the page(with a diagnostic) or to alert the user that some content ismalformed.

XML template

  id=null
  v=null
  limo="0,0"
  textboxrect=null
/>

The formulas Element

This sub-element may appear inside a shape or ashapetype to define formulas that can vary the path ofa shape, its inscribed text rectangles, and connectionsites.  Formula values change as theadj values change on the shape. Formulas can reference other formulas defined earlier in the sameformulas element.

Attribute Descriptions for

none

The f element offormulas

Each f element defines a single value as the resultof the evaluation of an expression. The expression is defined bythe cdata content of the eqn attributeand has the general form of an operation followed by up to threearguments, which may be adjust handle values, the results ofearlier guide formulas, fixed numbers or pre-defined values.

  eqn cdata #implied-- string with the formuladefinition --
>

Attribute Descriptions
Name SpaceAttributeTypeDefault ValueDescriptionVMLeqnstringnull

A single formula, evaluated as described below.

In the following table, the arguments are given thenames v,P1, P2(in that order), thus the element is simply:

operationpara-
metersexact?resultdescriptionval1yesvDefines a guide value from some other value.sum3yesv + P1 ­ P2Used for addition and subtraction.product3roundsv × P1 / P2Used for multiplication and division.mid2rounds to zero(v + P1) / 2Average.abs1yesabs(v)Absolute value.min2yesmin(v, P1)The lesser of v andP1.max2yesmax(v, P1)The greater of v andP1.if3yesv > 0 ? P1 : P2Condition testing.mod3noThe square root of ( v squared plus P1 squared plus P2 squared )Modulus (etc.)atan22noatan2(P1, v)Polar arithmetic – result is indegrees·216. (fdunits.)sin2nov × sin(P1)Sine, argument is indegrees·216. (fdunits.)cos2nov × cos(P1)Cosine, argument is indegrees·216. (fdunits.)cosatan23nov × cos(atan2(P2, P1)Preserves full accuracy in intermediate calculation.sinatan23nov × sin(atan2(P2, P1) sqrt1nosqrt(v)Result is positive, rounds down.sumangle3yesv + P1×216 -P2×216v is an existing angle (scaled by216),
P1 andP2 are numbers of degrees.ellipse3noP2 times the square root of ( one minus ( v over P1 ) squared ) tan2nov × tan(P1)Tangent, argument is indegrees·216. (fdunits.)

The formulas are evaluated to full precision - however theresult is always a 32-bit integer.  Formulaauthors should avoid formulas which are discontinuous - not onlyare many of the trigonometric operations inexact, thetransformations within the coordinate spaces are alsoinexact.  This can mean that a set of formulaswhich is discontinuous evaluates to give verydifferent  path values with the same input on twodifferent systems.

When an operation is marked as exact then a conformingimplementation must always generate the correct arithmetic answer(unless the calculations overflow internally).  The product operation is required to round to thenearest integer.   If the result is exactly 0.5then it must be rounded up to the next numerically greaterinteger.  (So the absolute value of a negativeresult will decrease - -1.5 must be evaluated as -1.)

The mid operation is required to round towards0.

All other operations are inexact, however the implementationmust round non-integral values down (towards -infinity) and shouldperform internal calculations with this form of rounding.

The arguments used in the evaluation of a formula are normallyeither fixed numbers, the result of the evaluation of a previousguide formula or an adjust value - the value of thecorresponding entry in the shape adjattribute.  Fixed numbers must be positiveintegral values in the range 0 to 65535, i.e. unsigned 16 bitnumbers.

valuedescription@nThe value of guide formula nn must be less than the current guide formula index (0 isthe first guide formula index.)#nAdjust (adj) value nn must be in the range 0 to 7.widthThe width defined by the coordsize attribute.heightThe height defined by the coordsizeattribute.xcenterThe x ordinate of the center of coordorigin,coordsize (x+w/2).ycenterThe y ordinate of the center of coordorigin,coordsize (y+h/2).xlimoThe x value of the limo attribute.ylimoThe y value of the limo attribute.hasstroke1 if the shape has a stroke operation, 0 if it doesnot.  (The on attribute of thestroke element, expressed as a number.)hasfill1 if the shape has a fill operation, 0 if it doesnot.  (The on attribute of thefill element, expressed as a number.)pixellinewidthThe line width in output device pixels. This is used to outsetlines from the edge of a rectangle on the assumption that theimplementation draws to lower right pixel in preference to theupper left pixel when a line is on a pixel boundary.pixelwidthThe width of the shape in device pixels (i.e. thecoordsize width transformed into device space.)pixelheightThe height of the coordsize in device pixels.emuwidthThe width of the coordsize in EMUs.emuheightThe height of the coordsize in EMUs.emuwidth2Half the width of the coordsize in EMUs.emuheight2Half the height of the coordsize in EMUs.

Notice that a pixel value should be in a squarecoordinate space - so it may be necessary to (effectively) report ahigher device resolution than that which is available if the devicehas non-square pixels.  The pixel value parametersserve the specific purpose of allowing a formula author to handlesome aspects of device pixelization.  They mustnot be used to produce paths with elements which have a constantphysical size. The EMU parameters must be used for thispurpose.

VML limits the total number of adjust values, guide formulas andadjust handles.

  1. Up to 8 adjust values.
  2. Up to 128 guide formulas.
  3. Up to 4 adjust handles.
XML template


 
 
 
 
 
 
 
 
 
 
 
 
 
 

The handles Element

This sub-element may appear inside a shape or ashapetype to define user interface elements which canvary the adj values on the shape, therebychanging the value of formulas and the rendering of apath based on formulas and adjvalues.

Attribute Descriptions for

none.

The h sub-element ofhandles

Each handle is specified using a single hsub-element.   This defines which pair of adjustvalues store the position of the handle and how the handle positioncan vary as the handle is adjusted.  The handle ismoved under user control, within the constraints imposed by thehandle definition, and the final position is stored back in theadjust values.

Positions are stored within the shape coordinatespace - this means that handle positions are independent of theactual size of the shape.

 position   cdata #implied -- position of the handle --
  polar      cdata#implied -- center for a polar (circular) handle --
 map        cdata #implied -- range to map the handle valueto --
  invx      cdata #implied -- invert position in X --
 invy       cdata #implied -- invert position in Y --
  switch     cdata #implied -- switch x/yaccording to shape aspect ratio --
 xrange     cdata #implied -- limits x range of handle --
 yrange     cdata #implied -- limits y range of handle --
  radiusrange cdata #implied -- limits radius ofpolar handle --
>

Attribute Descriptions for
Name SpaceAttributeTypeDefault ValueDescriptionVMLpositionVector2D0, 0The x and y position of the adjust handle. Each value can be either a constant, a formula value (e.g.,@2), center, topleft,bottomright, or an adjust value (e.g.#3). If a constant, formula value,center, topleft, orbottomright is specified, the handle position is fixedin that dimension. If an adjust value (e.g. #3) isspecified, the handle is free to move that dimension and the adjustvalue is determined by the position of the handle.

If the polar attribute is specified, than theposition attribute represents the radius and anglevalues of the handle instead of x and y.

VMLpolarVector2D This specifies that the adjust handle has a polar adjustmentbehavior.  The center position is specified bythis attribute.VMLmapVector2D0, 1000The x, y positions of the adjust handle are mapped from thecoordsize range into the given range.VMLinvxbooleanfalseThe x position of the adjust handle is inverted by setting itto coordoriginx + coordsizex -x.VMLinvybooleanfalseThe y position of the adjust handle is inverted by setting itto coordoriginy + coordsizey -y.VMLswitchbooleanfalseThe adjust handle is switched between the x and y directiondepending on the aspect ratio of the shape.  The xand y positions of the adjust handle are swapped when the shape istaller than it is wide.  This is useful for shapeswith limo behavior.VMLxrangevector2D0,0A range (min, max) of values that the adjust handle is limitedto in the x direction.   Each value may be a constant or a formula value (e.g., @2).  If a value is omitted, the handle is free tomove without limit in that direction.VMLyrangevector2D0,0A range (min, max) of values that the adjust handle is limitedto in the y direction.   Each value may be aconstant or a formula value (e.g.,@2).  If a value is omitted, thehandle is free to move without limit in that direction.VMLradiusrangevector2D0,0A range (min, max) of values that a radial adjust handle islimited to.  Each value may be a constant or aformula value (e.g., @2).  If a valueis omitted, the handle is free to move without limit in thatdirection.  This applies only to polar adjusthandles.
XML template


    position=null
   polar=null
    map="0,1000"
   invx="false"
   invy="false"
   switch="false"
    xrange="0,1000"
    yrange="0,1000"
   radiusrange="0, 1000"
  /h>

The fill Element

This sub-element may appear inside a shape,shapetype, background or most predefinedshape elements to describe how the path should be filled ifsomething beyond a solid color fill is desired. The attributes of the fill element can used todescribe a powerful set of image or gradient based fill patterns.  Extensions to the VML fill definition may beencoded as sub-elements of fill.

 id           id     #implied-- document-wide unique id --
 type         cdata #implied
 on           cdata #implied
 color        cdata #implied
 color2       cdata #implied
 opacity      cdata #implied
 src          cdata #implied
 size         cdata #implied
 origin       cdata #implied
 position     cdata #implied
 alignshape   cdata #implied
 colors       cdata #implied
 angle        cdata #implied
 focus        cdata #implied
 focussize    cdata #implied
  focusposition cdata #implied
 method       cdata #implied
>

Properties
Name SpaceAttributeTypeDefault ValueDescriptionVMLidstringnullA unique ID that identifies the shape. Used by script toreference the shape in a collection.VMLtypestring"solid"May be "solid | gradient | gradientradial | tile | pattern |frame" "Tile", "pattern" and "frame" require the imageattributes to be supplied. "Gradient", "gradientradial" and"gradienttitle" requires the gradient attributes to besupplied. Types beyond these are specified usingsub-elements..VMLonbooleantrueTurns fill display on. Same as fill attribute inshape This overrides the fillattribute.VMLcolorcolor"white"The main fill color. Same as fillcolor attributein shape. This overrides the shapefillcolor attribute.VMLopacitynumber1.0Opacity of the fill.VMLcolor2color"white"The secondary color for fill when imageType="pattern" or forgradient fills.Attributes related to imagefills.VMLsrcstringnullURL to an image to load for image and pattern fills.VMLsizeVector2D"auto"The size of the image. Default is pixel size of the image. Maybe specified in CSS absolute units or as a fraction of the pathbounding box.VMLoriginVector2D"auto"Point relative to upper left corner of the image that istreated as the origin of the image, specified as a fraction of theimage size.  Default is the center of theimage.VMLpositionVector2D"auto"Point in the reference rectangle of the shape to position theorigin of the image, specified as a fraction of the imagesize.  Default is the center of the containingblock.VMLaspectstring"ignore""ignore" – ignore aspect issues, "atleast" – image is at leastas big as the imageSize, "atmost" – image is no bigger thanimageSize. In each case, the imageSize attribute will be adjustedto preserve the aspect of the image.VMLalignshapebooleantrueIf "true", align the image with the shape else align the imagewith the window.Attributes related to gradientfills.VMLcolorsstringnullIntermediate colors in the gradient and their relativepositions along the gradient. e.g. "30% red, 70% blue, 90%green".  Primary color (fillcolorattribute in shape) is 0% and secondary color(color2 attribute) is 100%.VMLanglenumber"0"The angle along which the gradient goesVMLfocusnumber"0"Focus point for linear gradient fill. Values go from –100 to+100.VMLfocussizeVector2D0,0Size of the inner most rectangle for radial gradientsVMLfocuspositionVector2D0,0Position of the inner most rectangle for radial gradientsVMLmethodstring"sigma""none", "linear", "sigma" or "any"
XML template

  id=null
  type="solid"
  on="true"
  color="white"
  opacity="1.0"
  color2="white"
  opacity2="1.0"
  src=null
  size="auto"
  origin="center"
  position="center"
  aspect="ignore"
  alignshape="true"
  colors=null
  angle="0"
  focus="0"
  focussize="0,0"
  focusposition="0,0"
  method="sigma"
/>

The stroke Element

The sub-element may appear inside a shape,shapetype or any predefined shape element to describehow to draw the path if something beyond a solid line with a solidcolor is desired.  The attributes of thestroke element can used to describe a powerful set ofstroke properties.  Extensions to the VML strokedefinition may be encoded as sub-elements of thestroke element.

  id              id   #implied -- document-wideunique id --
  on              cdata#implied
 weight          cdata #implied
 color           cdata #implied
 color2          cdata #implied
 opacity         cdata #implied
 style           cdata #implied
 miterlimit      cdata #implied
 joinstyle       cdata #implied
 endcap          cdata #implied
 dashstyle       cdata #implied
 filltype        cdata #implied
  src             cdata #implied
 imagesize       cdata #implied
  imagealignshape  cdata#implied
 startarrow      cdata #implied
  startarrowwidth  cdata#implied
  startarrowlength cdata #implied
 endarrow        cdata #implied
 endarrowwidth   cdata #implied
 endarrowlength   cdata#implied
>

Properties
Name SpaceAttributeTypeDefault ValueDescriptionVMLidstringnullA unique ID that identifies the shape. Used by script toreference the shape in a collection.VMLonbooleantrueTurns the display of the line on and off. Same as strokeattribute in . This overrides the stroke attribute..VMLweightnumber1ptWidth of line. Same as strokeweight attribute in . Thisoverrides the strokeweight attribute.VMLcolorbooleanblackThe color of the line. Same as strokecolor attribute in . Thisoverrides the strokecolor attribute.VMLopacitynumber1.0Opacity of the stroke.VMLstylestring"single""single", "thinthin" (1:1:1), "thinthick", (1:1:2) "thickthin"(2:1:1), "thickbetweenthin" (1:1:2:1:1)VMLmiterlimitnumber8.0The maximum distance between the inner point and outer point ofa joint. This number is a multiple of the thickness of theline.VMLjoinstylestring"round""round" – rounded join, "bevel" – beveled join, "miter" – miterjoinVMLendcapstring"round""flat", "square", "round"VMLdashstylestring"solid""solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot".May also be a sequence of numbers with a user-defined dashpattern..VMLfilltypestring"solid""solid", "tile", "pattern", "frame".VMLsrcstringnullURL to an image to load for image and pattern fills.VMLimagesizeVector2D"auto"Size of the image to form the brush with. Default is the sizeof the image.VMLimagealignshapebooleantrueIf "true", align the image with the shape else align the imagewith the window.VMLcolor2colornullSecondary color – used when filltype="pattern"VMLstartarrowstring"none"Arrowhead for the start of the line. Can have values "none |block | classic | diamond | oval | open | chevron |doublechevron"VMLstartarrowwidthstring"medium"Arrowhead width for the start of the line. Can have values "narrow | medium | wide".VMLstartarrowlengthstring"medium"Arrowhead length for the start of the line. Can have values"short | medium | long".VMLendarrowstring"none"Arrowhead for the end of the line. Can have values "none |block | classic | diamond | oval | open | chevron |doublechevron"VMLendarrowwidthstring"medium"Arrowhead width for the end of the line. Can have values "narrow | medium | wide".VMLendarrowlengthstring"medium"Arrowhead length for the end of the line. Can have values"short | medium | long".

The dashstyle attribute allows the user to specifya custom defined dash pattern.  This is done usinga series of numbers.  Dash styles are defined interms of the length of the dash (the drawn part of the stroke) andthe length of the space between the dashes.  Thelengths are relative to the line width - a length of "1" is equalto the line width.  The endcap styleis applied to each dash, the arrow style is not. The string first defines the length of the dash then the length ofthe space.  This may be repeated to form complexdash styles.   The string should always contain apair of numbers.  If it contains an odd number ofnumbers the last should be disregarded.  Thefollowing table lists some typical values and a description of theintended effect.  "0" implies a dot which shouldbe four-fold symmetrical (with round end caps it should be acircle).   If the line end cap isflat a viewer should choose a built-in operatingsystem dash where possible (i.e. something which is fast todraw).

dashstyle ExampleDescription"2 2"short-dashes (each dash and the space in between is twice thewidth of the line)"0 2"dots (space between is twice the width of the line)"2 2 0 2"short-dash dot"2 2 0 2 0 2"short-dash dot dot"1 2"dot (each dash is the width of the line while each space istwice the width of the line)"4 2"dash (each dash is four time the width of the line while eachspace is twice the width of the line)"8 2"long-dash"4 2 1 2"dash dot"8 2 1 2"long-dash dot"8 2 1 2 1 2"long-dash dot dot

XML template


  on="true"
  weight="1pt"
  color="white
  opacity="1.0"
  linestyle="single"
  miterlimit="8.0"
  joinstyle="round"
  endcap="round"
  dashstyle="solid"
  filltype="solid"
  color2="white"
  src=null
  imagesize="auto"
  imagealignshape="true"
  startarrow="none"
  startarrowwidth="medium"
  startarrowlength="medium"
  endarrow="none"
  endarrowwidth="medium"
  endarrowlength="medium"
/>

The shadow Element

This sub-element may appear inside a shape or ashapetype to define a shadow effect on a shape.

 id      id    #implied-- document-wide unique id --
 on      cdata #implied
 type    cdata #implied
  obscured cdata #implied
 color    cdata#implied
  opacity  cdata #implied
  offset   cdata#implied
  color2   cdata#implied
  offset2  cdata #implied
  origin   cdata#implied
  matrix   cdata#implied
>

Properties

Name SpaceAttributeTypeDefault ValueDescriptionVMLidstringnullA unique ID that identifies the shadow on a shape. Used byscript to reference the shape in a collection.VMLonbooleantrueTurns the display of the shadow on and off.VMLtypestringsingleCan have the values: "single | double | emboss |perspective"VMLobscuredbooleanfalseSee through the shadow if there is no fill on the shape.VMLcolorbooleangray

RGB(128,128,128)

The color of the primary shadow.VMLopacitynumber1.0Opacity of the shadow effect.VMLoffsetvector2D2pt,2ptAmount of x,y offset from the shape’s location. Values areeither an absolute measurement, or a fractional value of shape –0.5to +0.5.VMLcolor2booleangray RGB(203,203,203)The color of the second shadow, or highlight in an embossed orengraved shadow..VMLoffset2vector2D0pt,0ptAmount of x,y of second offset from the shape’s location.Values are either an absolute measurement, or a fractional value ofshape –0.5 to +0.5.VMLoriginvector2D0,0A pair of fractional values of shape –0.5 to +0.5.VMLmatrixstringnullA perspective transform matrix in the form,"sxx,sxy,syx,syy,px,py" [s=scale, p=perspective] If offset is inabsolute units then px,py are in units emu-1, otherwisethey are an inverse fraction of shape size.

XML template

  id=null
  on="false"
  type="single"
  obscured="false"
  color="rgb(128,128,128)"
  opacity="1.0"
  offset="2pt,2pt"
  color2="rgb(203,203,203)"
  opacity2="1.0"
  offset2="0pt,0pt"
  origin="0,0"
  matrix=null

The textbox Element

This sub-element may appear inside a shape or ashapetype to define text that is to appear inside theshape. This text may contain rich formatting and will be renderedto fit inside the textboxrect defined by thepath element.

 id   id    #implied -- document-wide unique id --
  style cdata #implied -- style info for the HTML text --
>

Properties
Name SpaceAttributeTypedefault valueDescriptionVMLidstringnullA unique ID that identifies the shape. Used by script toreference the shape in a collection.CSSpadding-leftnumber0.1inInternal text margin value.CSSpadding-topnumber0.05inInternal text margin value.CSSpadding-rightnumber0.1inInternal text margin value.CSSpadding-bottomnumber0.05inInternal text margin value.CSSv-text-anchorstringtopCan have values "top | middle | bottom| top-center |middle-center | bottom-center | top-baseline | bottom-baseline |top-center-baseline | bottom-center-baseline." This sets thevertical alignment of the text inside the textbox. It should not beconfused with the vertical-align CSS property which has to do withFE font alignment.CSSv-text-wrappingbooleantrueWord wrap on/off. Not all renderers support the option tochange this.CSSlayout-flowstringhorizontalCan have the values "horizontal | vertical |vertical-ideographic | horizontal-ideographic"
XML template

  id=null
  style='
   v-padding-auto:   true;
   padding-left:    0.1in;
   padding-top:     0.05in;
   padding-right:   0.1in;
   padding-bottom:   0.05in;
   v-text-anchor:   top;
   v-text-wrapping:  true;
   v-text-flow:     horizontal;
   v-text-direction: rtl'
/>

The textpath Element

This sub-element may appear inside a shape or ashapetype to define a vector path based on the textdata, font and font styles supplied.  The pathwhich results is then mapped into the region defined by thev attribute of the shape.

 id      id    #implied-- document-wide unique id --
  style   cdata #implied -- style info for the HTML text--
  on      cdata#implied -- whether or not to use the textpath --
  fitshape cdata #implied
  fitpath  cdata #implied
 trim    cdata #implied
  xscale   cdata#implied
  string   cdata#implied
>

Attribute Descriptions
Name SpaceAttributeTypeDefault ValueDescriptionVMLonbooleanfalseDetermines whether the character paths are displayed ornot.CSSfontstringnullCompound CSS prop of family, weight, size, variant.CSSfont-familystringn/aCSS1 font family name.CSSfont-weightstringnormalIn CSS this property can have the values, "normal | bold |bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |900"CSSfont-sizestringnullCSS font size value (as CSS1).CSSfont-stylestringnormalCan have the values "normal | italic | oblique"CSSfont-variantstringnormalCan have the values "normal | small-caps"CSStext-decorationstringnoneCan have the values "none | [ underline || overline ||line-through || blink "CSSv-text-spacingnumber100Amount of tightening or tracking.CSSv-text-spacing-modestring"tracking"Can have values "tightening | tracking".CSStext-alignstringcenterCan have the values "left| right |center | justify.CSSv-text-align-altstring"letterjustify"Can have values "letter-jusify | stretch-justify".CSSv-text-kernbooleanfalseTurns character pair kerning on and off.CSSv-rotate-lettersbooleanfalseRotates letters 90 degrees.CSSv-text-reversebooleanfalseReverses the layout order of rows. Used for vertical textlayout.CSSv-same-letter-heightsbooleanfalseStretches lowercase letters to the height of uppercaseletters.VMLfitshapebooleanfalseStretches the text path out to the edges of the shapebox.VMLfitpathbooleanfalseSizes the text to fill the path it lays out on.VMLtrimbooleanfalseRemoves any additional space reserved for ascenders anddescenders if not used.VMLxscalebooleanfalseUse straight x measurement instead of measuring along thepath.VMLstringstringnullThe string to render as a text path.
XML template

  on=false
  style='
    font:                 null;
    font-family:          null;
    font-style:           normal;
    font-weight:          normal;
    font-size:            normal;
   font-variant:         normal;
   text-decoration:      normal;
   v-text-shadow:        false;
    text-align:           center;
   v-text-align-alt:     stretch-justify;
   v-letter-tightening:   0;
   v-letter-tracking:    0;
    v-text-kern:          false;
   v-rotate-letters:     false;
   v-same-letter-heights: false'
  fitshape="false"
  fitpath="false"
  trim="false"
  xscale="false"
  text=null
/>

The imagedata Element

This sub-element may appear inside a shape or ashapetype to define a picture to be rendered on top ofa shape. There is also a top-level element, image,which has these attributes, along with most of the same attributesas shape.

 id        id    #implied-- document-wide unique id --
 src       cdata #implied
  cropleft  cdata #implied
 croptop    cdata#implied
  cropright  cdata #implied
  cropbottom cdata #implied
 gain      cdata #implied
  blacklevel cdata #implied
 gamma     cdata #implied
  chromakey  cdata #implied
  grayscale  cdata #implied
 bilevel    cdata#implied
>

Properties
Name SpaceAttributeTypeDefault ValueDescriptionVMLidstringnullA unique ID that identifies the element. Used by script toreference the image.VMLsrcstringnullURL to an image to load for image and pattern fills.VMLcropleftnumber0Crop distance from edge of picture expressed as a fraction ofpicture size.VMLcroptopnumber0Crop distance from edge of picture expressed as a fraction ofpicture size.VMLcroprightnumber0Crop distance from edge of picture expressed as a fraction ofpicture size.VMLcropbottomnumber0Crop distance from edge of picture expressed as a fraction ofpicture size.VMLgainnumber1Adjusts the intensity of all colors. Essentially sets howbright white will be.VMLblacklevelnumber0Allows adjustment to set the level so that blacks appear astrue blacks, and all other colors are visible as shades aboveblack.VMLgammanumber1Gamma correction - a factor by which the intended targetdisplay gamma differs from from the sRGB profile, can be used tocorrect for images not prepared for sRGB displays and to adjustoverall image contrast.  Decreasing it below 1gives a more contrasty image.VMLchromakeycolornoneSet a color of the input picture which will have an opacity of0.  All other colors will have opacity1.  This operation must be ignored if the picturealready has an alpha channel.  If the picture is aPNG with tRNS chunk or a GIF with a transparent index then thechromakey is combined with that in the image - the chromakey willmake any corresponding pixel completely transparent.

The chromakey may specify a pixel index using the extendednotation for colors.

The chromakey is applied before any image transformation -including color modifications, gamma correction and scaling.

VMLgrayscalebooleanfalseDisplay picture in grayscale.  The user agentmust calculate the ITU-R 709 luma (Y') value using the followingformula for sRGB values in the range 0..255.

unsigned Y709FromRGB(unsigned ur, unsigned ug, unsignedub)
  {
  return  3579139 * ur + //0.2125
        12049489 * ug + // 0.7154
         1214381 * ub;  // 0.0721
  }

(This is a 32 bit value - shift left 24 to get an 8 bit graylevel value.)

VMLbilevelbooleanfalseDisplay picture in only two colors (usually black and white)using a function:

inline ULONG UBlackWhite(ULONG uc)
  {
  if (uc < 128) return 0;
  return 255;
  }

To convert an image to black and white grayscale isalso specified.   The gray level operation happensfirst.  Because the precise luma calculation isspecifed the bi-level operation will behave in the same way on allsystems.

XML template

  id=null
  src=null
  href=null
  linktype="copy"
  cropleft="0"
  croptop="0"
  cropright="0"
  cropbottom="0"
  embosscolor="none"
  gain="1"
  blacklevel="0"
  gamma="1"
  chromakey="none"
  grayscale="false"
  bilevel="false"
/>

Predefined Shapes

Predefined shapes serve two purposes - they provide a morecompact representation of a small number of very frequentlyencountered drawing operations (particularly rectangles andcircles) and they give an easy to use form for people who hand-editVML.

Common Properties ofAll Predefined Shapes

Predefined shapes have the same properties as shapeexcept that the type attribute is notpermitted.  In some cases the definition of theshape precludes use of some of the standard shapeproperties.  These exceptions are given below.

The line Element

This element is used to specify a straight line.

 from    cdata #implied
 to      cdata #implied
>

Attributes
Name SpaceAttributeTypeDefault ValueDescriptionVMLfromVector2D"0 0"The starting point of the line in the coordinate space of theparent element.VMLtoVector2D"10 10"The ending point of the line in the coordinate space of theparent element.The following attributes ofshape are ignored in aline.CSStop, margin-top, center-yThe shape is not defined using a rectangle.CSSleft, margin-left, center-xThe shape is not defined using a rectangle.CSSwidthThe shape is not defined using a rectangle.CSSheightThe shape is not defined using a rectangle.VMLfilllines cannot be filledVMLfillcolorlines cannot be filled
XML template

  from="0 0"
  to="10 10"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="1"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

Thepolyline Element

The polyline element is used to define shapes made up ofconnected line segments.

  points  cdata #implied
>

Attributes
Name SpaceNameTypeDefault ValueDescriptionVMLpointsstring"0 0 10 10"A list of pairs of points that define a set of straight linesegments. Points are specified in the coordinate system of theparent element (either a group or the document)The following attributes ofshape are ignored in apolyline.CSStop, margin-top, center-yThe shape is not defined using a rectangle.CSSleft, margin-left, center-xThe shape is not defined using a rectangle.CSSwidthThe shape is not defined using a rectangle.CSSheightThe shape is not defined using a rectangle.

It is necessary to compute the bounding rectangle of thepolyline to determine the content width and height.

XML template

  points="0 0 10 10 20 0"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="1"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

The curve Element

This element is used to draw a cubic bézier curve.

 from    cdata #implied
  control1 cdata #implied
  control2 cdata #implied
 to      cdata #implied
>

Attributes
Name SpaceNameTypeDefault ValueDescriptionVMLfromVector2D"0 0"The starting point of the line in the coordinate space of theparent element.VMLcontrol1Vector2D"10 10"The first control point for the curve.VMLcontrol2Vector2D"20 0"The second control point for the curveVMLtoVector2D"30 20"The ending point of the line in the coordinate space of theparent element.The following attributes ofshape are ignored in aline.CSStop, margin-top, center-yThe shape is not defined using a rectangle.CSSleft, margin-left, center-xThe shape is not defined using a rectangle.CSSwidthThe shape is not defined using a rectangle.CSSheightThe shape is not defined using a rectangle.
XML template

  from="0 0"
  control1="10 10"
  control2="20 0"
  to="10 10"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="1"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

The rect Element

This element is used to draw a simplerectangle.  The rectangle is defined by thecontent width specified in the CSS2 properties.

XML template

  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="1"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

Theroundrect Element

This element is used to draw a rectangle with roundedcorners.

  arcsize cdata #implied --size of arc on corners of rectangle --
>

Attributes
Name SpaceAttributeTypeDefault ValueDescriptionVMLarcsizenumber"0.2"Defines rounded corners as a percentage of half the smallerdimension of the rectangle. 0.0 (0%) – square corners, 1.0 (100%) -smaller dimension forms a semi-circle.
XML template

  arcsize="0.2"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="0.75pt"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

The ovalElement

This element is used to draw an oval defined by the CSS2 contentwidth and height.

XML template

  position="0 0"
  size="100 100"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="0.75pt"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

The arcElement

This element is used to draw an arc defined as a segment of anoval.  The content width and height define thewidth and height of that oval.  The arc is definedby the intersection of the oval with the start and end radiusvectors given by the angles.   The angles arecalculated on the basis of a circle (width equal to height) whichis then scaled anisotropically to the desired width and height.

  startangle cdata #implied
  endangle  cdata #implied
>

Properties
Name SpaceAttributeTypeDefault ValueDescriptionVMLstartanglenumber0The angle where the arc starts.VMLendanglenumber90The angle where the arc ends
XML template

  startangle="0"
  endangle="90"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="0.75pt"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>

Theimage Element

This element is used to draw a bitmap that has been loaded froman external source. There is an implied rectangle that is the samesize as the image. Any stroke or fill will be applied to thisimplied rectangle.  The fill will be behind theimage and it will therefore only be visible through transparentareas of the bitmap.  The stroke is drawn on topof the image.  The bitmap may have transparencyencoded in the file (if it is a PNG bitmap) or a chromakey colorvalue may be specified using the chromakeyattribute.

 src        cdata #implied
 cropleft   cdata #implied
 croptop    cdata #implied
  cropright  cdata #implied
  cropbottom  cdata#implied
  embosscolor cdata #implied
 gain       cdata #implied
  blacklevel  cdata#implied
 gamma      cdata #implied
  grayscale  cdata #implied
 bilevel    cdata #implied
>

Properties
Name SpaceAttributeTypeDefault ValueDescriptionVMLsrcstringnullURL to an image to load for image and pattern fills.VMLcropleftnumber0Crop distance from edge of picture expressed as a percentage ofpicture size.VMLcroptopnumber0Crop distance from edge of picture expressed as a percentage ofpicture size.VMLcroprightnumber0Crop distance from edge of picture expressed as a percentage ofpicture size.VMLcropbottomnumber0Crop distance from edge of picture expressed as a percentage ofpicture size.VMLembosscolorcolor0Color used to display the picture when doing an embossedshadow.VMLgainnumber1Picture contrast setting.VMLblacklevelnumber0Picture brightness setting.VMLgammanumber1Picture gamma setting.VMLgrayscalebooleanfalseDisplay picture in grayscale.VMLbilevelbooleanfalseConvert all colors in the picture to either 0 or full intensitycomponent values (converts a color bitmap to 8 colors, converts agrayscale bitmap to black and white.)
XML template

  src=null
  cropleft="0"
  croptop="0"
  cropright="0"
  cropbottom="0"
  embosscolor="none"
  gain="1.0"
  blacklevel="0"
  gamma="0"
  chromakey="none"
  grayscale="false"
  bilevel="false"
  id=null
  href=null
  target=null
  class=null
  title=null
  alt=null
  style='visibility: visible'
  opacity="1.0"
  chromakey="null"
  stroke="true"
  strokecolor="black"
  strokeweight="1"
  fill="true"
  fillcolor="white"
  print="true"
  coordsize="1000,1000"
  coordorigin="0 0"
/>


Normative references

VML is based on several other standard forms. Some of these are as yet incomplete (CSS2, XMLnamespaces).  This section references thosedocuments which are normative so far as VML is concerned -they define behavior which must be both understood and implementedfor VML to function correctly.

HTML 4.0 Specification
This is a W3C recommendation, therefore is notsubject to change.
Cascading Style Sheets, Level2
This is a W3C proposed recommendation, the review period hasnow ended and the proposal is likely to become a recommendation inthe immediate future.  For the most part VML isbased on CSS1 (see below), therefore reliance on CSS2 isminimal.
Cascading Style Sheets, level1
This defines many of the basic types used in VML - for examplethe fundamental lexical syntax used to describe length andcolor are defined here.   This is a W3Crecommendation, therefore not subject to change.
Extensible Markup Language(XML) 1.0
This defines the basic lexical form used for the encoding ofVML.  It is a W3C recommendation, not subject tochange.  VML requires proposed extensions to XMLto support the VML extensibility mechanisms.  VMLalso defines mechanisms which facilitate the interaction of HTMLand VML XML within a single HTML page.
Namespaces inXML
This is a W3C working draft, therefore subject tochange.  The document defines a mechanism toidentify unknown XML tags and to reliably and safely add new XMLtags.   It is intended that VML track the relevantchanges, although at this stage it seems certain that thefundamental requirements of VML will be met.
XML Linking Language(XLink)
Applications needing VML must identify links to externalobjects even though they may occur in extensions. The specifications adopted for identifying such links within XMLwill be used by VML.
IEC61966-2
This IEC Technical Committee will formalize the definition ofsRGB (61966-2.1).  At present the document is aworking draft.  However it seems unlikely that anychanges will be made to the encoding model on which VML has somereliance.
PNG (Portable Network Graphics) Specification
This defines the PNG file format, oneof the recommended formats for raster data in VML.  The definition can also be found at PNG (Portable NetworkGraphics) Specification on the W3C web site.
ISO10918-1 (JPEG)
This defines the underlyingcompression scheme used in the other raster format recommended byVML.  However it is important to realize that VMLexpects JPEG data to be presented in particular forms - JFIF orExif - arbitrary JPEG data is not compatible withVML.  ISO standards can be obtained from nationalstandards organizations, ANSI Catalogs &Standards Information in the US.

Informative references

VML does not rely on the definition of PostScript, however thatdefinition is extremely helpful in understanding VML.

The PostScript Language Reference Manual
ISBN 0-201-10174-2, Adobe Systems,Addison-Wesley.  Either edition of the book isappropriate.  It contains the clearest descriptionof the "filled path" imaging model which underlies most twodimensional vector graphic implementations.
Inside Macintosh, Imaging with QuickDraw
ISBN 0-201-63242-X.  VML is designed to beimplementable with QuickDraw on a Macintosh.  Implementations based on QuickDraw must do more work (because ofthe lack of arbitrary path support), yet highly efficientimplementations are still possible.

The original W3C requirementsspecification can be found at W3C Scalable GraphicsRequirements.

VML is based on well-established vector graphicaltechniques.  The intention is to make thereferences in this section reflect parts of that work which areparticularly important to VML.

JPEG Still Image Data Compression Standard
William B. Pennebaker, Joan L. Mitchell, ISBN0-442-01727-1.  This book not only contains adetailed description of JPEG but also has ISO DIS 10918-1 in anappendix (this being a copy of the draft standard beforeit was approved).
ISO 8879
ISO 88790:1986 (E).  Information processing -Text and Office Systems - Standard Generalized Markup Language(SGML).  This is the basis of XML - XML is anapplication profile of SGML.
OpenTypeSpecification v.1.1
This describes the OpenType and TrueType definition of thequadratic bézier (which omits the end points of the curve).
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 红米手机游戏下好了安装不了怎么办 小米手机sd卡存储已满怎么办 英雄联盟峡谷之巅资格被收回怎么办 人进监狱之前信用卡没还怎么办 荒野行动资源文件下载卡住了怎么办 荒野行动绑定的手机号停机了怎么办 不小心误点了爱奇艺扣款了怎么办 和别人吵架别人先骂你怎么办 自己人被带到了缅甸黑社会了怎么办 绝地求生忘记复制钥匙激活码怎么办 绝地求生买的钥匙激活码丢了怎么办 蓝河奶粉宝宝吃了不长肉怎么办 苹果ios版本太低激活不了怎么办 脸上被油烫伤了 起了水泡怎么办 皮肤被油烫伤起来个水泡怎么办 去泰国旅游没来得及兑换泰铢怎么办 游戏和安卓 不和 出现黑屏怎么办 邻居把垃圾放在楼梯口不丢怎么办 58热敏小票打印机口松了怎么办 王鹏的眼睛今天起疙瘩了怎么办 背包带子老从肩膀滑下来怎么办 绝地求生用手机流量更新不成怎么办 手机拍的视频在电脑上放不了怎么办 炉石传说手机点登陆游戏闪退怎么办 车到信号屏蔽区一键启动不了怎么办 王者荣耀战队活跃度满了怎么办 win10你的账户已被停用怎么办 电脑一键还原后一直黑屏怎么办? 被打了狂犬疫苗的狗咬伤怎么办 美版苹果7系统坏了怎么办 韩服的球球大作战网络不稳定怎么办 球球大作战号删了找不回来怎么办 队友传足球球的时候接不到怎么办 魅族手机中病毒锁机了怎么办? vbs打开是和文本文档一样怎么办 把电脑注册表删了电脑动不了怎么办 注册表删一项后电脑启动不了怎么办 解压过的过的软件安装包损坏怎么办 手机中病毒自动发短信扣费怎么办 苹果手机中的高德地图打不开怎么办 大晚上挂了别人的车怎么办