Tutoriel pour apprendre à utiliser le format SVG

La base du dessin c'est la ligne et SVG est bien équipé dans le domaine. On a vu qu'on dispose de la balise line. Par défaut on a stroke: none, ce qui signifie qu'une ligne n'est pas visible par défaut ! Donc si vous prévoyez ce code :

<line x1="20" y1="20" x2="100" y2="150"/>

Vous ne verrez rien…

Donc il faut au minimum définir la couleur (stroke) :

<line x1="20" y1="20" x2="100" y2="150" stroke="red" />

On définit le point d'origine (x1 et y1) et le point d'arrivée (x2 et y2). Je rappelle que l'origine des axes se trouve dans le coin supérieur gauche (ce qui est classique).

On peut ensuite styliser cette ligne en changeant l'épaisseur et la continuité (pointillés) :

<svg height="400" width="400">
    <style>
        line {
            stroke: blue;
            stroke-dasharray: 8, 4;
            stroke-width: .2rem;                
        }
    </style>
    <line x1="20" y1="20" x2="100" y2="150"/>
</svg>

Les deux valeurs pour les pointillés repèrent la partie pleine et la partie vide (gap).

On peut aussi jouer sur l'opacité d'une ligne avec la propriété stroke-opacity :

<line x1="20" y1="50" x2="100" y2="50" style="stroke: blue; stroke-width: 25;"/>
<line x1="20" y1="20" x2="100" y2="120"style="stroke-opacity: 0.4; stroke: red; stroke-width: 25;"/>

On peut faire beaucoup de choses avec des lignes, mais ça devient vite laborieux.

Si on a une succession de lignes, plutôt que de dessiner les lignes les unes après les autres, on utilise une polyligne :

<svg height="400" width="400">
    <style>
        polyline {
            stroke: green;
            stroke-width: 10;
            fill: none;               
        }
    </style>
    <polyline points="60 140, 100 50, 55 100, 55 10, 25 100"/>
</svg>

J'ai prévu sans remplissage () sinon on obtient ce résultat :

On peut évidemment choisir aussi la couleur de remplissage en fixant la couleur au lieu de none.

Quand on trace des lignes (et polylignes) les extrémités sont avec des angles à 90° :

On peut utiliser la propriété stroke-linecap (la valeur par défaut est butt) pour changer ce comportement :

<svg height="400" width="400">
    <style>
        line {
            stroke: purple;
            stroke-width: 20;                
        }
    </style>
    <line x1="20" y1="20" x2="140" y2="20" stroke-linecap="butt"/>
    <line x1="20" y1="50" x2="140" y2="50" stroke-linecap="round"/>
    <line x1="20" y1="80" x2="140" y2="80" stroke-linecap="square"/>
</svg>

Vous pouvez remarquer que les valeurs round et square prolongent la ligne au-delà des valeurs de référence.

Pour la jonction entre deux lignes, on a la propriété stroke-linejoin :

<svg height="400" width="400"> 
    <style> polyline { 
        stroke: green; 
        stroke-width: 10;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none; } 
    </style> 
    <polyline points="60 140, 100 50, 55 100, 55 10, 25 100"/>
</svg>

J'ai déjà montré comment dessiner un rectangle dans le premier article. On peut évidemment styliser à loisir :

<svg height="400" width="400"> 
    <rect x="20" y="20" width="50" height="90" style="fill-opacity: 0.3"/>
    <rect x="40" y="10" width="80" height="40" style="fill: none; stroke: black;"/>
    <rect x="10" y="40" width="125" height="100" style="fill: #0000ff; stroke: blue; stroke-width: 10; stroke-opacity: 0.2; fill-opacity: 0.3"/>
    <rect x="50" y="70" width="135" height="50" style="fill: yellow; fill-opacity: 0.5; stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>
</svg>

On peut arrondir les coins en précisant le rayon :

<rect x="10" y="10" width="125" height="70" rx="20" style="fill: none; stroke: rgb(118, 19, 163); stroke-width: 10"/>
<rect x="10" y="110" width="125" height="70" rx="20" ry="40" style="fill: none; stroke: rgb(16, 207, 80); stroke-width: 10"/>

J'ai également montré comment tracer cercles et ellipses, voici un exemple :

<circle cx="50" cy="50" r="40" style="stroke: rgb(160, 189, 32); stroke-width: 7; fill: none;"/>
<circle cx="70" cy="80" r="60" style="stroke: rgb(201, 20, 20); stroke-width: 7; fill: none; stroke-opacity: 0.4"/>
<ellipse cx="130" cy="80" rx="80" ry="40" style="fill: blue; fill-opacity: 0.2"/>

Pour un polygone, on définit tous les points :

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: rgb(163, 126, 194); stroke: blue; stroke-width: 7"/>

On gère évidemment tous les styles concernant le trait et le remplissage comme on l'a vu plus haut.

On peut modifier la règle de remplissage :

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill-rule: evenodd; fill: rgb(163, 126, 194); stroke: blue; stroke-width: 7"/>

Toutes les formes de base vues ci-dessus sont pratiques et doivent être utilisées en priorité. Mais arrive un moment où elles ne sont pas suffisantes, on peut alors utiliser un chemin (path).

Un chemin est une succession de lignes, d'arcs et de courbes. On peut définir le trait comme on l'a déjà vu. Voici un premier exemple :

<path d="M 10 10 L 200 30" style="stroke-width: 10; stroke: rgb(231, 163, 37); fill: none;"/>

Un chemin doit commencer par un moveto (M) suivi des coordonnées de départ. Imaginez cela comme le fait de placer le stylo sur le point. Ensuite on place des lineto (L) avec des coordonnées, là on déplace le stylo.

On place autant de lineto qu'on veut :

<path d="M 10 10 L 200 30 L 200 80" style="stroke-width: 10; stroke: rgb(231, 163, 37); fill: none;"/>

Si vous insérez un nouveau moveto vous démarrez un sous-chemin :

<path d="M 10 10 L 200 30 M 220 30 L 200 80" style="stroke-width: 10; stroke: rgb(231, 163, 37); fill: none;"/>

Vous pouvez provoquer la fermeture du chemin avec un closepath (Z) :

<path d="M 10 10 L 200 30 L 200 80 Z" style="stroke-width: 10; stroke: rgb(231, 163, 37); fill: none;"/>

On a vu jusque là des valeurs absolues pour les coordonnées de déplacement, on peut aussi utiliser des valeurs relatives en utilisant des minuscules :

<path d="M 10 10 L 200 30 m 20 0 l -20 50" style="stroke-width: 10; stroke: rgb(231, 163, 37); fill: none;"/>

On peut simplifier la syntaxe pour les lignes horizontales (H) et verticales (V) :

<path d="M 30 20 h 200 v 60 h -200 z" style="stroke-width: 10; stroke: rgb(231, 163, 37); fill: none;"/>

Les arcs elliptiques sont des morceaux d'ellipse. Voici un exemple :

<path d="M 320 150 A 150 120, 0, 1, 0, 2 152" style="stroke-width: 4; stroke: red; fill: none;"/>

On utilise l'abréviation A suivie des deux rayons (x et y), puis de la rotation de l'axe x, puis d'autres valeurs qu'il serait laborieux de décrire. Je suppose que vous n'allez jamais dessiner un arc elliptique directement en partant du code ! On atteint ici les limites entre le fait de vouloir tout coder directement et utiliser un éditeur graphique.

Vous utiliserez plus souvent des courbes de Bézier que des arcs elliptiques, parce que vous pourrez plus facilement dessiner tout ce que vous voulez. Là, ça devient carrément périlleux de se lancer dans le codage direct et on passe obligatoirement par un éditeur graphique.

Vous pouvez utiliser Inkscape comme je vous l'ai conseillé, ou un des nombreux éditeurs en ligne comme SVG-edit :

Voici un fichier SVG créé en quelques clics avec Inkscape :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 159 106"
   height="400"
   width="600">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-191)"
     id="layer1">
    <path
       id="path836"
       d="m 15.9,276 c 0,0 -21.2,-48 15.9,-43 37.1,6 31.8,16 47.7,6 15.9,-11 79.5,32 31.5,37 -47.4,5 -95.1,0 -95.1,0 z"
       style="fill:#8bc200;stroke:#8a0000;stroke-width:1.59;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
  </g>
</svg>