Graphique vectoriel¶

Le Scalable Vector Graphics (graphique vectoriel adaptable) permet de décrire des graphiques vectoriels.

Un graphique vectoriel décrit des objets (lignes, cercles, rectangles, polygones) de par leur paramètres et non pas par des pixels.

A partir de la description paramétrique, les pixels sont calculé à chaque fois. Ceci permet une résolution maximum pour chaque échelle d’agrandissement.

Les avantages:

une image SVG peut être édité avec un éditeur de text
pas de perte de qualité en agrandissant
standard ouvert

Cercle¶

La balise <svg> indique le début de code SVG. Il est terminé par la balise <\svg>

r désigne le rayon
cx et cy sont les coordonnées du centre. Par défaut à (0, 0)
fill couleur de remplissage

Le contour est défini par

stroke couleur du contour
stroke-width épaisseur du contour

%%html
<svg>
<circle r='100' stroke='green' stroke-width='4' fill='yellow' />
<circle cx='150' cy='50' r='40' stroke='green' 
    stroke-width='4' fill='yellow' />
<svg>

Exercice
Dessinez 3 cercles de taille et couleur différentes.

Rectangle¶

La balise <rect> définit un rectangle.

width largeur
height hauteur
x et y position

%%html
<svg>
<rect width='100' height='80' x='0' y='70' fill='green' />
<rect width='100' height='80' x='120' y='20' fill='red'
    stroke-width='8' stroke='blue' />

Exercice
Dessinez 3 rectangles de taille et couleur différentes.

Ellipse¶

La balise définit une ellipse.

rx et ry désigne les deux rayons
cx et cy sont les coordonnées du centre. Par défaut à (0, 0)
fill couleur de remplissage

%%html
<svg>
<ellipse cx='150' cy='60' rx='100' ry='50' stroke='purple' 
    stroke-width='6' fill='yellow' />
<svg>

Exercice
Dessinez 3 ellipses de taille et couleur différentes.

Ligne¶

La balise <line> définit une ligne.

x1 et y1 désigne le point de départ
x2 et y2 désigne le point d’arrivée

%%html
<svg>
<line x1='30' y1='50' x2='300' y2='50' stroke='purple' stroke-width='6' />
<line x1='100' y1='100' stroke='red' stroke-width='4' />
<line x1='300' y2='100' stroke='green' />

Exercice
Dessinez une maison simple à l’aide de lignes.

Polygone¶

La balise <polygon> définit un polygone.

points désigne une liste de points x1,y1 x2,y2

%%html
<svg>
<polygon points='100,30 290,30 200,100' fill='pink' 
    stroke='purple' stroke-width='7' />

Exercice
Dessinez une maison simple à l’aide d’un polygone.

Cette balise peut également dessiner une étoile.

%%html
<svg height='200'>
 <polygon points='100,10 40,198 190,78 10,78 160,198'
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

Le paramètre fill-rule:evenodd crée une étoile creuse.

%%html
<svg height='200'>
 <polygon points='100,10 40,198 190,78 10,78 160,198'
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Texte¶

La balise définit un texte.

%%html
<svg>
<text x='80' y='40' fill='blue'>Un texte</text>
<text x='20' y='120' fill='red' font-size='50'>I love SVG!</text>

Gradient linéaire¶

La balise <linearGradient> permet de définir un gradient linéaire.

%%html
<svg>
<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

Exercice
Dessinez un coucher de soleil à l’aide d’un gradient.

Education numérique