L'IMAGE VECTORIELLE DESTINÉE AUX PAGES WEB

French Le Vectoriel Clip-Arts Galerie Contacts English

CLIPARTS GRATUITS

Nous proposons sur ce site une série de cliparts vectoriels statiques gratuits mis à la disposition des développeurs professionnels et amateurs. Cette galerie est nourrie de graphismes plus ou moins complexes collectés sur des répertoires libres. Ils ont été re-développés ou arrangés au format VML, et optimisés au mieux de leur conversion.

Un service gratuit de réalisation de cliparts est offert par nos soins. Voir la page  Contacts 

UTILISATION DES CLIPARTS

Pour toute insertion de code VML dans les pages Web, il est indispensable de créer l'environnement suivant :

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

Il existe plusieurs procédés pour insérer les images vectorielles.
Pour ce premier exemple nous utiliserons l'élément « v:vmlframe » intégré dans un tableau HTML. Vous pourrez ainsi placer et aligner votre image vectorielle comme une image traditionnelle codée "<img ".

Exemple:

Insertion d'image vectorielle

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 » indexe la source du fichier xml qui contient le code VML.
« #1 » est l'identifiant du groupe vectoriel présent dans le code VML.
« clip » (valeurs : « t »= true ou « f »= false) permet d'ajuster ou non l'image proportionnellement aux dimensions du cadre.
« size » détermine les dimensions du cadre.

NOTE : Normalement vous n'avez pas à intervenir sur les attributs « clip » et « size ».
Pour redimensionner et modifier les propriétés de votre image, utilisez CSS ou l'attribut « style ».
Attention : tous les clips vectoriels peuvent être redimensionnés proportionnellement ou non, sauf ceux qui intègrent du texte 3D. Vous devrez alors garder les proportions de hauteurs et largeurs.

Les textes placés dans les images peuvent être changés selon votre volonté.
Il suffit d'ouvrir votre fichier xml avec le bloc-notes et lancer une recherche sur l'attribut « string ». Vous pourrez alors changer le texte placé à la suite entre guillemets : string=="MonTexte".

Vous pouvez apporter des effets de filtres à vos cliparts (voir le répertoire des filtres).

Exemple :
filtre sur image vectorielle

SANS FILTRE AJOUTÉ

AVEC FILTRE GLOW


NOTE :
- Les images vectorielles supportent la transparence sur votre document HTML.
Le filtre sera appliqué sur la cellule <td>, et un fond d'image (background-color ou background-image) sera ajouté pour que l'antialias des contours prenne effet.
- L'envergure des effets débordants sera compensée par la marge (padding) de la cellule.

<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>


Ci-dessous un autre exemple utilisant CSS pour l'alignement des vmlframe.
Un filtre «emboss» est appliqué sur la deuxième 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>

^^^