Glossaire Lisbon
Langage SVG
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”
Balises principales du document SVG |
<svg> |
se trouve au début du document. |
</svg> |
se trouve à la fin du document. |
< |
ouvre une ligne de code. |
> |
ferme une ligne de code |
Attributs généraux |
fill |
couleur avec laquelle on remplit les figures |
fill-opacity |
opacité de la couleur des figures (0-1) |
stroke |
trait qui encadre les figures |
stroke-width |
largeur du trait |
stroke-opacity |
opacité de la couleur du trait (0-1) |
transform |
spécifications d'une transformation, par exemple une rotation |
Attributs de carrés et rectangles |
width |
largeur de la figure |
height |
hauteur de la figure |
x |
coordonnée x, sur l’axe horizontal, c’est-à-dire, le côté gauche |
y |
coordonnée y, sur l’axe vertical, c’est-à-dire, le bord superieur. |
rx / ry |
pour un rectangle ou un carré ces attributs rendent les angles rond |
Attributs du cercle |
r |
rayon du cercle |
cx |
coordonnée x du centre du cercle |
cy |
coordonnée y du centre du cercle |
Attributs de l'ellipse |
cx |
coordonnée x du centre de l’ellipse |
cy |
coordonnée y du centre de l’ellipse |
rx |
rayon horizontal de l'ellipse |
ry |
rayon vertical de l'ellipse |
Attributs de la ligne droite |
x1 |
début d’une ligne sur l’axe horizontal |
y1 |
début d’une ligne sur l’axe vertical |
x2 |
fin d’une ligne sur l’axe horizontal |
y2 |
fin d’une ligne sur l’axe vertical |
Attributs des polygones |
polygon points |
coordonnées x et y pour chaque angle d’un polygone |
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 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"/> |
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="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" /> |
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)">
|
Noms de couleurs |
blue |
|
darkblue |
|
deepskyblue |
|
red |
|
orange |
|
lightgrey |
|
papayawhip |
|
pink |
|
hotpink |
|
sienna |
|
brown |
|
khaki |
|
white |
|
black |
|
plum |
|
saddlebrown |
|
green |
|
darkgreen |
|
yellowgreen |
|
yellow |
|