Glossaire Amsterdam

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


Figures
<rect/> pour créer des rectangles et des carrés.
<circle/> pour créer des cercles.
<ellipse/> pour créer des ellipsis
<polygon/> pour créer des triangles et d’autres polygones


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 des polygones
polygon points coordonnées x et y pour chaque angle d’un polygone


Exemples
polygon image d'un triangle <polygon points="200,10 250,190 160,190" fill="lime" stroke="purple" stroke-width="1" />
text image d'une ellipse <text> x="10" y="15" fill="blue">Charles</text>


Noms de couleurs
blue
deepskyblue
red
orange
papayawhip
grey
gainsboro
pink
sienna
khaki
white
black
purple
green
yellow