ISAS REPORT
Class: NSE11101
Faculty : Mr.Tiep
Center: NIIT - iNET
Members of group:
1. Long Van Minh
2. Nguyen Trung Khuong
3. Vu Quoc Hoang
4. Nguyen Minh Ngoc
Vector Markup Language
Contents
The shape element1
The fill element2
The shapetype element3
The background element4
Vector Markup Language
JAVA VML
Drawing Charts ?
ImagesPHP
VB
C#
Disadvantages
Vector Markup LanguageVector Markup Language
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
Curve
Line
Polyline
Rect
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
Shadow
Fill
Path
Stroke
Background
TextPath
Group
The Fill Element
VML
Presented: NgocNM
Menu
Introduction fill element1
Table properties2
Description Attribute3
Thank you !4
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
Name Space Attribute TypeDefault Value
Description
VML id string nullA unique ID that identifies the shape. Used by script to reference the
shape in a collection.
VML type string "solid"
May be "solid | gradient | gradientradial | tile | pattern | frame" "Tile", "pattern" and "frame" require the image attributes to be supplied.
"Gradient", "gradientradial" and "gradienttitle" requires the gradient attributes to be supplied. Types beyond these are specified
using sub-elements..
VML on boolean trueTurns fill display on. Same as fill attribute in shape. This overrides
the <shape> fill attribute.
VML color color "white"The main fill color. Same as fillcolor attribute in shape. This
overrides the shape fillcolor attribute.
VML opacity number 1.0 Opacity of the fill.
VML color2 color "white"The secondary color for fill when imageType="pattern" or for gradient
fills.
Table properties
Attributes related to image fills.
VML src string null URL to an image to load for image and pattern fills.
VML size Vector2D "auto"The size of the image. Default is pixel size of the image. May be
specified in CSS absolute units or as a fraction of the path bounding box.
VML origin Vector2D "auto"Point relative to upper left corner of the image that is treated as the
origin of the image, specified as a fraction of the image size. Default is the center of the image.
VML position Vector2D "auto"Point in the reference rectangle of the shape to position the origin of the image, specified as a fraction of the image size. Default is the
center of the containing block.
VML aspect string "ignore"
"ignore" – ignore aspect issues, "atleast" – image is at least as big as the imageSize, "atmost" – image is no bigger than imageSize. In each case, the imageSize attribute will be adjusted to preserve the aspect of
the image.
VML alignshape booleantrueIf "true", align the image with the shape else align the image with
the window.
Table propertiesAttributes related to gradient fills.
VML colors string null
Intermediate colors in the gradient and their relative positions 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%.
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
VMLfocuspositio
nVector2D 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.idRemarks: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.
ExampleThe 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>
Description Attribute
Type Attribute : Determines the type of fill. Read/write. VgFillType.Tag Syntax : <v: element type="expression">Script Syntax :element.type="expression"expression=element.typeRemarks: 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.
.
ExampleA red foreground and blue background fill is created using the pattern of the image myimage.gif <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 color="red" color2="blue" type="pattern" src="myimage.gif"/> </v:shape>
Description Attribute
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.srcRemarksURL 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.
ExampleA tiled image using the file myimage.gif as a source is displayed.<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 type="tile" src="myimage.gif"/> </v:shape>
Description AttributeColor Attribute: Defines the color of a fill. Read/write. VgColor.Tag Syntax : <v: element color="expression">Script Syntax:element.color="expression"expression=element.colorRemarks:
Overrides the FillColor attribute of a shape. The default value is White.
ExampleThe fill color of the shape is green
<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 color="green"/>
</v:shape>
Description AttributeAngle Attribute: Defines the angle of a gradient fill. Read/write. VgAngle.Tag Syntax : <v: element angle="expression">Script Syntaxelement.angle="expression"expression=element.angleRemarksThe 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.
ExampleThe 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. <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 type="gradient" color="blue" color2="red" angle="45"/> </v:shape>
Description Attribute
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"expression=element.methodRemarks:Values include:
Value Description
None No sigma fill.
Linear Linear sigma fill.
Sigma Sigma fill. Default.
Any Any sigma fill.
ExampleThe shape will have a red linear gradient fill.<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 color="red" type="gradient" method="linear"/> </v:shape>
The Background Element
VML
Presented: HoangVQ
Contents
What is VML1
Description background element2
Attribute3
Answer and question4
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
This element describes the fill of the background of a page using vector graphics fills.
Description
<background id=null fill="true" fillcolor="white"/>
Attribute
1
Id attribute
Provides a unique identifier for an element.
2
Fill Attribute
Determines whether the
closed path will be filled.
3
FillColor Attribute
Defines the brush color that fills the closed path of a
shape.
Attribute
1
Id attributeTag Syntax
<v:elementname id= "idname">
Script Syntaxelementname.id=
"idname"expression=
elementname.id
2
Fill AttributeTag Syntax
<v:element filled="expression">
Script Syntaxelement.filled="expression"expression=element.filled
3
FillColor AttributeTag Syntax
<v:element fillcolor="expression">
Script Syntaxelement.fillcolor=
"expression"expression=
element.fillcolor
VECTOR MARKUP LANGUAGE
Presented: KhuongNT
ShapeType Elements
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.
USING IN MUTIL GROUPS
CODE VML DEMO
VML DEMO WITH IE
Thank you!