Vector markup language

ISAS REPORT

Vector Markup Language

Members of group:
1. Long Van Minh Class: NSE11101

2. Nguyen Trung Khuong Faculty : Mr.Tiep

3. Vu Quoc Hoang Center: NIIT - iNET

4. Nguyen Minh Ngoc

Contents

1 The shape element

2 The fill element

3 The shapetype element

4 The background element


Drawing Charts ?
Images
PHP

JAVA VML

VB

C#

Disadvantages

Not Work

The Shape elment

Shapes are the building blocks of graphical images
defined by Vector Markup Language (VML).
The shape is the top-level element and several
subelements help define the nature of each shape.

Arc Polyline

Curve Rect

Line RoundRect

The Shape element

This is the top-level element used to describe a
shape. This element may appear by itself or within a
<group> element. If a <shapetype> is referenced
using the type= attribute, any attributes specified in
the shape will override those found in the shapetype.

<!element shape (%shape.elements;)* >
<!attlist shape %coreattrs; %shapeattrs;
type cdata #implied -- reference to shapetype --
adj cdata #implied -- list of adjust values for parameterized
paths --
path cdata #implied -- string with command set describing a
path - >

The Shape Element

Stroke

VML

The Fill Element

Presented: NgocNM

Menu

1 Introduction fill element

2 Table properties

3 Description Attribute

4 Thank you !

Introduction fill element

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

Table properties
Default
Name Space Attribute Type Description
Value

A unique ID that identifies the shape. Used by script to reference the
VML id string null
shape in a collection.

May be "solid | gradient | gradientradial | tile | pattern | frame" "Tile",
"pattern" and "frame" require the image attributes to be supplied.
VML type string "solid" "Gradient", "gradientradial" and "gradienttitle" requires
the gradient attributes to be supplied. Types beyond these are specified
using sub-elements..

Turns fill display on. Same as fill attribute in shape. This overrides
VML on boolean true
the <shape> fill attribute.

The main fill color. Same as fillcolor attribute in shape. This
VML color color "white"
overrides the shape fillcolor attribute.

VML opacity number 1.0 Opacity of the fill.
The secondary color for fill when imageType="pattern" or for gradient
VML color2 color "white"
fills.

Table properties

Attributes related to image fills.

VML src string null URL to an image to load for image and pattern fills.
The size of the image. Default is pixel size of the image. May be
VML size Vector2D "auto" specified in CSS absolute units or as a fraction of the path bounding
box.
Point relative to upper left corner of the image that is treated as the
VML origin Vector2D "auto" origin of the image, specified as a fraction of the image size. Default
is the center of the image.
Point in the reference rectangle of the shape to position the origin of
VML position Vector2D "auto" the image, specified as a fraction of the image size. Default is the
center of the containing block.
"ignore" – ignore aspect issues, "atleast" – image is at least as big as
the imageSize, "atmost" – image is no bigger than imageSize. In each
VML aspect string "ignore"
case, the imageSize attribute will be adjusted to preserve the aspect of
the image.
If "true", align the image with the shape else align the image with the
VML alignshape boolean true
window.

Table properties
Attributes related to gradient fills.

Intermediate colors in the gradient and their relative positions along
the gradient. e.g. "30% red, 70% blue, 90% green". Primary color
VML colors string null
(fillcolorattribute in shape) is 0% and secondary color
(color2 attribute) is 100%.

VML angle number "0" The angle along which the gradient goes

VML focus number "0" Focus point for linear gradient fill. Values go from –100 to +100.

VML focussize Vector2D 0,0 Size of the inner most rectangle for radial gradients

VML focusposition Vector2D 0,0 Position of the inner most rectangle for radial gradients

VML method string "sigma" "none", "linear", "sigma" or "any"

Description Attribute
ID Attribute: A name that provides a unique identifier for a fill. Read/write. String.

Tag Syntax : <v: element id="expression">
Script Syntax:
element.id="expression"
expression=element.id
Remarks:
Use ID to refer to a specific fill. Once you have created a fill and given it an ID, you can use the ID name
when you want to manipulate the fill.

Example
The shape has a fill ID called "myfill".
<v:shape id="rect01"
coordorigin="0 0" coordsize="200 200"
strokecolor="red"
style="top:1;left:1;width:50;height:50"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
<v:fill id="myfill"/>
</v:shape>

Type Attribute : Determines the type of fill. Read/write. VgFillType.
Tag Syntax : <v: element type="expression">
Script Syntax :
element.type="expression"
expression=element.type
Remarks: Values include:

Type Description
solid The fill pattern is solid. Default.
gradient The fill colors blend together in a linear gradient from bottom to top.
gradientradial The fill colors blend together in a radial gradient.
tile The fill image is tiled.
pattern The image is used to create a pattern using the fill colors.
frame The image is stretched to fill the shape.

Example
A red foreground and blue background fill is created using the pattern of the image myimage.gif
coordorigin="0 0" coordsize="200 200" strokecolor="red"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
<v:fill color="red" color2="blue" type="pattern" src="myimage.gif"/>
</v:shape>

Src Attribute: Defines the image to load for a fill. Read/write. String.
Tag Syntax : <v: element src="expression">
Script Syntax:
element.src="expression"
expression=element.src
Remarks
URL to an image to load for image and pattern fills. This attribute must always be present and point to
valid image data for a picture to appear. If this attribute appears alone (that is, no HRef or Title
attribute), then the image is linked.

Example
A tiled image using the file myimage.gif as a source is displayed.
coordorigin="0 0"
coordsize="200 200"
strokecolor="red"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
<v:fill type="tile" src="myimage.gif"/>
</v:shape>

Color Attribute: Defines the color of a fill. Read/write. VgColor.
Tag Syntax : <v: element color="expression">
Script Syntax:
element.color="expression"
expression=element.color
Remarks:
Overrides the FillColor attribute of a shape. The default value is White.

Example
The fill color of the shape is green

coordorigin="0 0"
coordsize="200 200"
strokecolor="red"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
<v:fill color="green"/>
</v:shape>

Angle Attribute: Defines the angle of a gradient fill. Read/write. VgAngle.
Tag Syntax : <v: element angle="expression">
Script Syntax
element.angle="expression"
expression=element.angle
Remarks
The vector of a gradient is perpendicular to the vector of the blend direction from one color to another.
The default value is 0 (zero) degrees, which is a horizontal vector from left to right. Positive angles rotate
the gradient in a counter-clockwise direction.
Example
The fill of the shape is composed of a gradient of two colors, running from blue to red at an
angle of 45 degrees. Red will be in the top left corner and blue will be in the bottom right
corner.
coordorigin="0 0"
coordsize="200 200"
strokecolor="red"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
<v:fill type="gradient" color="blue" color2="red" angle="45"/>
</v:shape>

Method Attribute: Defines the method used to generate a gradient fill. Read/write. VgSigmaType.
Tag Syntax : <v: element method="expression">
Script Syntax :
element.method="expression" Value Description
expression=element.method
Remarks: None No sigma fill.
Values include:
Linear Linear sigma fill.

Sigma Sigma fill. Default.

Any Any sigma fill.

Example
The shape will have a red linear gradient fill.
coordorigin="0 0"
coordsize="200 200"
strokecolor="red"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
<v:fill color="red" type="gradient" method="linear"/>
</v:shape>

VML

The Background Element

Presented: HoangVQ

Contents

1 What is VML

2 Description background element

3 Attribute

4 Answer and question

Hot Tip

• What is VML
– Vector Markup Language (VML) is a
deprecated XML language used to produce
vector graphics.
– VML is used by most Microsoft Office
applications, such as Microsoft Word,
Microsoft Visio, etc. within its HTML files,
created using the 'Save As HTML' option
(plain HTML or MHT). Such files retain
complete vector information, and can be
reopened for editing using other Microsoft
applications, such as Microsoft PowerPoint.

Background element

Description

This element
describes the fill <background
of the background id=null
of a page using fill="true"
vector graphics fillcolor="white"
fills. />

Attribute

1 2 3

Id attribute Fill Attribute FillColor Attribute

Provides a Determines Defines the brush
unique identifier whether the color that fills the
for an element. closed path will be closed path of a
filled. shape.

Attribute

1 2 3

Id attribute Fill Attribute FillColor Attribute
Tag Syntax Tag Syntax
Tag Syntax
<v:element filled= <v:element fillcolor=
<v:elementname id=
"expression"> "expression">
"idname">
Script Syntax Script Syntax
Script Syntax
element.filled= element.fillcolor=
elementname.id=
"expression" "expression"
"idname"
expression= expression=
expression=
element.filled element.fillcolor
elementname.id

VECTOR MARKUP LANGUAGE

ShapeType Elements

Presented: KhuongNT

WHAT IS SHAPETYPE ELEMENT

For cases where a shape is to be used multiple
times on a web page, VML provides the shapetype
element. A shapetype is essentially a shape
element which is given an id that can then be
referenced within another shape element. The
shape element which references the shapetype id is
drawn per the attributes of the shapetype unless
overidden within the shape element itself.

USING SHAPETYPE

If you wanted to draw many shapes that have the
same or similar properties, it would be tedious if you
had to repeatedly type the same property attributes
for each shape. VML provides the <shapetype>
element so that you can define a prototype of a
shape. You can then use the <shape> element to
instantiate many copies of shapes from the same
shapetype.

3 STEPS TO DEFINE A SHAPETYPE

1. Type a <shapetype> element and give it a name
by specifying the id attribute.

2. Describe the shapetype by using its property
attributes or sub-elements.

3. Instantiate a shape by typing a <shape> element,
and refer the type attribute

CREATE SHAPETYPE WITH ID

 - Type a <shapetype> element and give it a name by
specifying the id attribute.

DESCRIBE THE SHAPETYPE

 - Then, you alter the shapetype by setting some
property attributes, such as fillcolor="red"
strokecolor="blue". Or, you can use sub-elements
inside the shapetype,
Such as <path>, <fill>, <stroke> (we will talk about
those sub-elements in later topics).

INSTANTIATE & OVERWITE

 - Then, you instantiate a shape from the shapetype
"MyShape" by specifying type="#MyShape", as shown
in the following VML representation. This shape
inherits all properties from the shapetype "MyShape",
and is displayed within its containing box at a size of
100 by 80.

Vector markup language

Recommended

Recommended

More Related Content

Featured

Featured (20)

Vector markup language