Glossaire Plymouth

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
<text/> pour ajouter de texte
<polygon/> pour créer des triangles et d’autres polygones
<line/> pour créer des lignes droites
<polyline/> pour créer des formes composées des lignes droites


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


Attributs des polylines
polyline points coordonnées x et y pour chaque point différent d’une polyline


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 image d'un carré <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 image d'un rectangle <rect width="300" height="100" fill="blue" stroke="black" stroke-width="5" />
circle image d'un cercle <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
ellipse image d'une ellipse <ellipse cx="200" cy="80" rx="100" ry="50" stroke="purple" stroke-width="2" fill="yellow" />
text image d'une ellipse <text> x="10" y="15" fill="blue">Charles</text>
polygon image d'un hexagone <polygon points="100,10 200,10 250,100 200,190 100,190 50,100 " fill="black" stroke="yellow" stroke-width="3" />
polygon image d'un triangle <polygon points="200,10 250,190 160,190" fill="lime" stroke="purple" stroke-width="1" />
line image d'une ligne droite <line x1="5" y1="5" x2="200" y2="200" stroke="purple" stroke-width="2" />
polyline image d'une escalier <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="brown" stroke-width="4" />
linearGradient image d'un gradient lineaire <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 image d'un gradient radiale <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 exemple de rotation <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
coral
grey
lightgrey
papayawhip
pink
deeppink
hotpink
sienna
brown
khaki
white
black
purple
darkviolet
green
darkgreen
yellowgreen
yellow
gainsboro
peru
slategrey
firebrick
darkorchid
plum
saddlebrown