VECTOR IMAGES ON WEB PAGES

English Vector System Clip-Arts Gallery Contacts French

DEFINITION

A vector shape is delimited by a path which is marked out by several points called  nodes .
Two vectors with x,y coordinates start from each node.
The position result of two successive vectors defines the curve situated between their origin points ( Bezier Curve ).
The shape can receive several attributes like position, width, height, colour, stroke weight, etc...
All these elements set up a vector image.
Points and parameters can be defined by a scripting code.
The creation of an image, therefore, fully responds by using this code.

vector shape

 Initial shape: path="m 0,0 c 1500,2865 , 2070,3315 , 4605,4320 l 0,4320 , 0,0 e"
Modified shape: path="m 0,0 c 1500,2865 , 3045,915  , 4605,4320 l 0,4320 , 0,0 e"
« m » indicates the origin of the path
« c » indicates the beginning of one or several curves
« l » indicates the beginning of one or several straight lines
« e » indicates the end of the path
Simplified script: path="m,c1500,2865,3045,915,4605,4320l,4320xe"
« x » closes first and last points with a straight line

ADVANTAGES

Bitmap images are often definitively realized and zoom effects reveal pixels around the shapes.
Vector images can be easily modified by changing the source code. They can be enlarged without quality loss.




Scale 1/1    
Zoom on Bitmap image Zoom on Vector image

WEB USE

The source code of a vector image can be translated by any capable browser. It has to remake the image on the computer screen.
A well made code, optimised and scripted with a good language generates small files.
It results in faster downloads and displays.


IMPLEMENTATION

Vector images are often used in cartography and technical diagrams. But quality formats allow complex graphic art.


FORMATS

Two main open and free vector languages:

SVG (Scalable Vector Graphics): Standard elected by the W3C and created from PGML and VML. This format is relatively complete but unfortunately not competitive about the size of the files. It has a rich library of image effects but the latter are not often used to vector implementations. In spite of its compression system, it generates a very heavy code, and may be inappropriate to replace bitmap use. That is probably why SVG use is rather neglected by developers and timidly implemented into different browsers.

VML* (Vector Markup Language): Promoted in 1998. It is to date the best vector format running on the Web. It is extremely well designed and has several advantages over SVG. It holds 3 gradient fill types, a 3D extension, many possible combinations of sub-elements, and subtle properties of image effects.
The source code is very comprehensive and the concise scripting helps it display graphics very quickly. In general VML renders rather better and can be untill 10% of the size of the SVG equivalent.
It can merge into HTML code on Internet Explorer, and many Websites use VML vector graphics.

*In present case, VML has been elected for our clip-art production.

^^^

Valid HTML 4.01 Transitional Référencement gratuit