Pour lire une figure élémentaire codée en SVG, il faut utiliser un logiciel capable de lire ce format. Ce peut être un logiciel dédié au dessin vectoriel comme l'est le logiciel Inkscape. Mais nous avons également sous la main un logiciel bien adapté : le navigateur.

Exemple de code

Le code ci-dessous est le code d'une page html dans laquelle on a inscrit le code svg d'un cercle, ainsi que les codes de quatre segments délimitant le cadre rectangulaire contenant la figure svg.
Dans le second cadre, le résultat est affiché.

Le code de la figure svg est tout ce qui est compris entre la balise ouvrante <svg> et la balise fermante correspondante </svg> .

Explication du code :

• Dans la balise svg, l'attribut viewBox permet de définir la plage disponible (visible) pour les abscisses ainsi que pour les ordonnées. La syntaxe est la suivante viewBox= "xmin ymin largeur hauteur".
  • xmin est la valeur minimale des abscisses des points qui seront visibles. Dans notre exemple, xmin = – 50.
  • ymin est la valeur minimale des ordonnées des points qui seront visibles. Dans notre exemple, ymin = – 70.
  • largeur permet de connaître l'abscisse maximale. Cette abscisse maximale est xmax = xmin + largeur. Dans notre exemple, xmax = – 50 + 100 = 50.
  • hauteur permet de connaître l'ordonnée maximale. Cette ordonnée maximale est ymax = ymin + hauteur. Dans notre exemple, ymax = – 70 + 100 = 30.
• L'axe des abscisses est orienté de la gauche vers la droite. Le segment jaune d'équation \( x = -50 \) est donc un segment vertical à gauche du cadre conteneur et le segment magenta d'équation \( x = 50 \) est sur le bord droit du cadre conteneur.
• L'axe des ordonnées est orienté du haut vers le bas. Le segment vert d'équation \( y = -70 \) est donc un segment horizontal en haut du cadre conteneur et le segment rouge d'équation \( y = 30 \) est sur le bord bas du cadre conteneur.
• Du fait de l'orientation des axes, le couple (xmin, ymin) de l'attribut viewBox constitue le couple des coordonnées du coin supérieur gauche du rectangle contenant l'image. Le couple (xmax, ymax) = (xmin+largeur, ymin+hauteur) est donc le couple des coordonnées du coin inférieur droit du rectangle conteneur.
• Dans la balise circle, les attributs cx et cy permettent de définir les coordonnées du centre du cercle. , tandis que l'attribut r permet de définir le rayon.
• Le style permet de spécifier que le contour (stroke peut être traduit par "trait") sera tracé en rouge (red) et que l'intérieur du disque ne sera pas coloré (fill:none).

Pour saisir les rôles des attributs, tentez de modifier les valeurs de cx, cy, r, stroke, fill (pour ce dernier, remplacez none par une couleur). Les couleurs utilisées sont celles du html. Utilisez par exemple les noms usuels : black, green, yellow, red, orange, magenta, purple, navy, aqua...ou le code rgb ou encore le code hexadécimal.

Vous pouvez faire ces modifications directement ci-dessus ou copier-coller le code dans une page vierge d'éditeur de textes puis ouvrir le résultat avec un navigateur ( après avoir renommé le fichier sous la forme nomdevotrechoix.html ).

Dans le code de l'exemple précédent, nous avons par exemple dit que le rayon était de 30 unités. Mais quelles sont ces unités ?

L'élément svg, tel que nous l'avons écrit, prend en fait toute la largeur disponible et la découpe en 100 unités (puisque nous avions imposé 100 unités dans les valeurs pour l'attribut viewBox).

Ainsi, si nous imposons à notre élément svg de se trouver dans un conteneur de largeur 100px, l'unité sera un pixel (cas de la figure 1 ci-dessous). Mais si nous lui imposons de se trouver dans un conteneur de largeur 50px (figure 2 ci-dessous) , l'unité sera le demi-pixel. De même dans un conteneur de largeur 200px, l'unité sera de 2 pixels (figure 3).
Le code des trois figures est exactement le même, seule la taille de l'élément conteneur est modifiée. On touche là en fait au principal intérêt du svg : son caractère adaptable.

Pour clarifier le principe des unités, nous avons ci-dessus encapsulé l'élément svg dans un élément div. En fait la largeur peut être indiquée dans l'élément svg lui-même. Nous reprenons les trois exemples précédents ci-dessous en supprimant les éléments div mais en précisant la largeur de l'élément svg avec width.

Pour notre conteneur de svg, on peut également préciser la hauteur (height).

Préciser uniquement height

On peut préciser uniquement l'attribut height comme nous avons précisé uniquement l'attribut width ci-dessus.

Nous reprenons l'exemple précédent en renseignant cette fois height :

Préciser width et height

Nous préciserons souvent dans les pages qui suivent width et height sur l'élément svg, mais toujours de façon à ce que le couple (width, height) du conteneur soit proportionnel au couple (largeur, hauteur) précisé dans l'attribut viewBox, c'est à dire tel que \( \frac{\text{largeur du conteneur}}{\text{hauteur du conteneur}} = \frac{\text{largeur viewBox}}{\text{hauteur viewBox}} \).

Et si ces rapports sont distincts ?

Si ces deux rapports sont distincts, les options de l'attribut viewBox nous laissent deux choix :

• soit choisir que l'élément svg remplisse complètement son conteneur, au risque d'une distorsion suivant une direction du fait que le repère ne sera plus orthonormé.
• soit choisir que le repère reste orthonormé, mais dans ce cas l'élément svg ne prendra pas toute la place disponible dans son conteneur.

Nous n'en dirons pas plus pour ce cas des rapports distincts. Vous pouvez lire cet article pour en savoir plus.