Les images vectorielles sont représentations de formes géométriques telles qu'un cercle, un rectangle ou un segment.
Ceux-ci sont représentés par des formules mathématiques (un rectangle est défini par deux points, un cercle par un centre et un rayon,
une courbe par plusieurs points et une équation). Edutechwiki
Notez que dans un dessin composé de plusieurs objets, chaque objet doit être écrit dans une ligne différente.
Tous les attributs doivent avoir une valeur.
Attention aux marques utilisées. Ex : width=“100”
Gradients |
Un Gradient est un dégradé, une transition en douceur d'une couleur à une autre. Il y existe 2 types : lineaire et radiale |
<defs> |
ouvre l’emboîtement des gradients |
</defs > |
ferme l’emboîtement des gradients |
Gradient lineaire |
<linearGradient> |
ouvre le gradient lineaire |
</linearGradient> |
ferme le gradient lineaire |
id |
nom unique pour le gradient linéaire. Ce nom s'utilise dans la définition de la figure au lieu du nom de la couleur |
x1, x2, y1, y2 |
début et fin de la position du gradient linéaire |
<stop/> |
spécification des couleurs. La gamme de couleurs pour un gradient linéaire peut être composée de deux ou plusieurs couleurs |
offset |
début et fin de la couleur du gradient linéaire |
fill =“url(#gradiente)” |
lie la figure avec le gradient linéaire |
Gradient radiale |
<radialGradient> |
ouvre le gradient radiale |
</radialGradient> |
ferme le gradient radiale |
id |
nom unique pour le gradient radiale. Ce nom s'utilise dans la définition de la figure au lieu du nom de la couleur |
cx, cy et r |
définissent le cercle extérieur |
fx et fy |
définissent le cercle intérieur |
<stop/> |
spécification des couleurs. La gamme de couleurs pour un gradient linéaire peut être composée de deux ou plusieurs couleurs |
offset |
début et fin de la couleur du gradient radiale |
fill =“url(#gradiente)” |
lie la figure avec le gradient radiale |
Exemples |
rect |
 |
<rect x="50" y="20" width="150" height="150"
fill="green" stroke="gray" stroke-width="5" fill-opacity="0.6" stroke-opacity"0.9"/> |
rect |
 |
<rect width="300" height="100" fill="blue" stroke="black" stroke-width="5" /> |
circle |
 |
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> |
ellipse |
 |
<ellipse cx="200" cy="80" rx="100" ry="50" stroke="purple" stroke-width="2" fill="yellow" /> |
text |
 |
<text> x="10" y="15" fill="blue">Charles</text> |
polygon |
 |
<polygon points="100,10 200,10 250,100 200,190 100,190 50,100 " fill="black" stroke="yellow" stroke-width="3" /> |
polygon |
 |
<polygon points="200,10 250,190 160,190" fill="lime" stroke="purple" stroke-width="1" /> |
line |
 |
<line x1="5" y1="5" x2="200" y2="200" stroke="purple" stroke-width="2" /> |
polyline |
 |
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
fill="white" stroke="brown" stroke-width="4" /> |
linearGradient |
 |
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:brown;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> |
radialGradient |
 |
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:red;stop-opacity:0" />
<stop offset="100%" style="stop-color:brown;stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
|
transform |
 |
<rect x="15" y="15" height="80" width="80"
style="stroke:#ff0000; fill: #ccccff"
transform="translate(30) rotate(45 50 50)">
|