VECTOR IMAGES ON WEB PAGES

English Vector System Clip-Arts Gallery Contacts French

FREE CLIP-ARTS

Our Web site offers a free series of vector clip-art for professional and amateur developers. This gallery collects several static graphics, more and less complex, on free lists. They have been recreated or corrected in VML language. They are optimised as well as the conversion allows.

We offer a free service for clip-art production. See the page  Contacts 


CLIP-ARTS USES

Any insertion of VML code in Web pages needs the following scripts :

<html xmlns:v>
   <head>
     <style>v\:*{behavior:url(#default#VML)}</style>
   </head>
 <body>
etc...

There are many possibilities to insert vector images.
In this first example we use the « v:vmlframe » element inserted in an HTML table. Then you can place and align your vector image in a relative position like a usual "<img" tag.

Example:

Vector image insertion

Source:


<body bgcolor="#620000">
  <p style="text-align:justify;color:#ffffff">
   <font color="yellow" size="6">TITLE</font><br><br>
   <i>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT.<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT.....
  <table align="right">
    <tr>
     <td>
<br>
<v:vmlframe src="venice.xml#1" style="width:248;height:300" clip="t" size="411,501"/>
     </td>
    <tr>
  </table>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT..... </i></p>

« src » indicates the xml source file containing the VML code.
« #1 » indexes on the vector group named in the VML code.
« clip » (values : « t »= true or « f »= false) Overrides or not the image size in proportion to the frame sizes.
« size » defines the frame sizes.

NOTE : You do not have to change « clip » and « size » attributes.
To resize and modify image properties use CSS or « style » attribute.
Attention: All vector clips can be resized in proportion or not, except when 3D text is placed inside the clip. Then you will have to keep width and height proportions.

The text placed inside images can be changed as you want.
Open the xml file with any text-editor and search the « string » attribute. You will change the string to render another text : string="MyText".

You can bring some filter effects to your clip-art (see the filters) list.

Example :
filter on vector image

WITHOUT FILTER

WITH GLOW FILTER


NOTE :
- Vector images support transparency upon your HTML document.
The filter will be applied on the cell <td> of the table and a background (background-color or background-image) will be added to make antialias operational.
- The cellpadding will make up for the effect scope.

<table>
 <tr>
  <td
 style="background-color:#222222;filter:blur(Direction=90,Strength=40);padding-right:40">
   <v:vmlframe src="mntbike.xml#1" style="width:340;height:300" clip="t" size="567,503"/>
  </td>
 </tr>
</table>


Here is another example using CSS to vmlframe-align.
The emboss filter has been applied on the second vmlframe:
css and enboss filter

Source:

<html xmlns:v>
  <head>
    <style>
v\:*{behavior:url(#default#VML)}
v\:vmlframe{float:right;width:300px;height:300px}
    </style>
  </head>
  <body>
    <p style="text-align:justify"><b>THIS IS A TEXT WITH TWO "VMLFRAME"</b>
      <br>(the first without filter, the second with emboss-filter)
      <br>
      <br>
      <v:vmlframe src="patt1.xml#1" style="float:left" clip="t" size="503,503"/>
Hello this is a text, Hello this is a text,...
      <br>Hello this is a text, Hello this is a text, Hello this is a text, Hello this is a text, Hello this is a text,...
      <v:vmlframe src="patt1.xml#1" style="filter:progid:DXImageTransform.Microsoft.emboss(enabled='true'" clip="t" size="503,503"/>
Hello this is a text, ...
  </body>
</html>

^^^