Wikilivres

Découvrir le SVG/Éléments graphiques

< Découvrir le SVG

Les éléments graphiques sont les instructions qui vont créer le dessin.

Syntaxe générale et aspect des objets

modifier
 
Quelques éléments et leur syntaxe.

La syntaxe générale pour les éléments graphiques est :

<élément attribut1="valeur1" attribut2="valeur2" … />

où

  • élément est le nom de l'élément : rect pour un rectangle, circle pour un cercle, line pour un segment de droite ;
  • attributn désigne le paramètre n de l'élément : couleur, coordonnée d'un point, rayon d'un arc de cercle…
  • valeurn désigne la valeur attribuée à l'attribut n.

Certains attributs définissent la mise en forme de l'objet, appelée « coloriage » (painting), et sont communs à tous les éléments présenté ici. Les principaux sont :

  • fill : indique la couleur de remplissage ;
  • stroke : indique la couleur du trait de contour ;
  • stroke-width : indique l'épaisseur du trait de contour.

Les valeurs des attributs fill et stroke sont une couleur. Une couleur peut être exprimée par un mot-clef ou bien par une valeur numérique selon la norme RVB (rouge-vert-bleu). On dénombre environ 150 mots-clefs[1], par exemple :

  • none : aucune couleur, invisible ;
  • des couleurs classiques (noms en anglais) : black, blue, brown, cyan, gray ou grey, green, magenta, orange, pink, red, violet, white, yellow ;
  • d'autres couleurs : aqua, aquamarine, crimson, fuschia, gold, indigo, ivory, khaki, lavander, lime, limegreen, linen, maroon, mintcream, navy, olive, orangered, orchid, peru, plum, purple, royalblue, salmon, silver, skyblue, turquoise, yellowgreen… ;
  • des variantes : plus sombres — darkcyan, darkblue, darkgray ou darkgrey… darkviolet —, ou plus plus claires — lightcyan, lightblue, lightgray ou lightgrey… lightviolet.

La valeur numérique de la couleur est sous la forme #rrvvbb où rr, vv et bb désigne la composante au format hexadécimal (entre 00 et ff) de rouge, de vert et de bleu.

La valeur de l'attribut stroke-width est une dimension. On utilise en général l'unité par défaut px.

Par exemple, pour dessiner un rectangle rempli de jaune et au contour bleu épais d'un pixel : 

<rect fill="yellow" stroke="blue" stroke-width="1"
  x="20px" y="20px" width="80px" height="40px"/>

ou bien 

<rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
  x="20px" y="20px" width="80px" height="40px"/>

Un dernier attribut, transform, permet notamment de faire tourner l'objet. La valeur est transform="rotate(angle)", où l'angle est en degrés ; la rotation se fait alors autour de l'origine du repère (le coin en haut à gauche du dessin). Un angle positif correspond à une rotation dans le sens des aiguilles d'une montre. On peut indiquer le centre de rotation sous la forme transform="rotate(angle cx cy)" ou bien transform="rotate(angle, cx, cy)".

Voici un exemple complet. Le second rectangle est tourné autour de son centre (cx = 60 px, cy = 40 px) : 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="120px" height="80px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <title>Deux rectangles
  </title>

  <rect fill="none" stroke="black" stroke-width="1"
    transform="rotate(10)"
    x="20px" y="20px" width="80px" height="40px"
  />
  <rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
    x="20px" y="20px" width="80px" height="40px"
    transform="rotate(-45, 60, 40)"
  />

</svg>

Rectangles

modifier

Un rectangle se dessine avec un élément rect. La syntaxe est <rect … />, les attributs étant :

  • x : coordonnée en x du point en haut à gauche du rectangle ; la valeur par défaut est x="0" ;
  • y : coordonnée en y du point en haut à gauche du rectangle ; la valeur par défaut est y="0" ;
  • width : largeur du rectangle, valeur nécessairement positive ;
  • height : hauteur du rectangle, valeur nécessairement positive ;
  • rx : pour un rectangle aux angles arrondis, rayon de l'ellipse selon l'axe x ;
  • ry : pour un rectangle aux angles arrondis, rayon de l'ellipse selon l'axe y.

Par exemple, le code suivant place un rectangle de 60 px de large et de 128 px de haut au point (40 px, 80 px) avec des angles arrondis d'un rayon de 8 px : 

<rect
  x="40px" y="80px" width="60px" height="128px"
  rx="8px" ry="8px"
/>

Cercles et ellipses

modifier

Un cercle se trace avec l'élément circle. Les attributs sont les coordonnées du centre cx et cy, et le rayon r.

Un cercle se trace avec l'élément ellipse. Les attributs sont les coordonnées du centre cx et cy, le rayon horizontal rx et le rayon vertical ry.

Par exemple : 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400px" height="400px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Un cercle et une ellipse
  </desc>

  <circle
    cx="80px" cy="80px" r="40px"
    stroke="black" fill="none"
  />

  <ellipse
    cx="80px" cy="200px" rx="40px" ry="20px"
    stroke="red" fill="cyan"
  />

</svg>

Lignes et polygones

modifier

Pour tracer un segment de droite [M1M2], on utilise l'élément line. Les quatre attributs spécifiques sont simplement x1, y1, x2 et y2 : les coordonnées des deux extrémités M1(x1, y1) et M2(x2, y2).

On peut tracer une ligne brisée avec l'élément polyline. L'argument spécifique est points qui contient la liste des cordonnées. Les cordonnées peuvent être séparées par un espace, une virgule ou un retour à la ligne ; par exemple, pour relier les points M1(0, 0), M2(50, 50), M3(100, 0) et M4(150, 100), on peut écrire : 

points="0 0 50 50 100 0 150 100"

ou bien 

points="0 0, 50 50, 100 0, 150 100"

ou encore 

points="0, 0
  50, 50
  100, 0
  150, 100"

Les coordonnées sont exprimées en px.

L'élément polygon a la même syntaxe, la différence est que la ligne est fermée. On obtient donc un polygone.

Exemple : 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="10cm" height="10cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Ligne brisée et polygone
  </desc>

  <polyline
    points="0 0, 50 50, 100 0, 150 100"
    stroke="black" fill="none"
  />

  <polygon
    points="200 0, 250 50, 300 0, 350 100"
    stroke="magenta" fill="cyan"
  />

</svg>

Texte

modifier

Un texte est inclus entre des balises <text … > … </text>. Dans sa forme la plus simple, on écrit simplement 

<text y="1em">
  Texte à écrire.
</text>

L'attribut y="1em" permet de s'assurer que le texte est écrit dans la zone affichée, sinon, il est écrit au dessus de la ligne y = 0 qui est le haut de la zone d'affichage.

Les attributs spécifiques de l'élément text sont :

  • x, y : coordonnées à laquelle le texte est écrit ;
  • font-family : nom de la police, par exemple pour les polices par défaut sans, serif et monospace, ou bien de spolices spécifiques comme Arial, Times, Courier…
  • font-size : le corps (taille des lettres) ;
  • font-weight : graisse,
  • dx, dy : décalages par rapport au « curseur » (pour dx) et à la ligne de base (pour dy) ;
  • rotate : rotation des caractères (mais ils restent sur une ligne horizontale) ;
  • textLength : indique la longueur que le texte doit occuper ; si l'on met cet attribut, alors le texte est étiré ou compressé pour que la ligne ait exactement cette longueur ;
  • lengthAdjust : si l'on utilise l'attribut textLength, la valeur de cet attribut indique si seuls les espaces sont modifiés (valeur spacing) ou bien si les caractères sont également déformés (valeur spacingAndGlyphs) ;
  • text-anchor : indique l'alignement horizontal du texte et peut prendre les valeurs : start (commence au point indiqué, équivalent d'un alignement à gauche), middle (est centré sur le point indiqué) ou end (se termine sur le point indiqué, équivalent à un alignement à droite).

Notes que les valeurs des attributs peuvent être des suites de valeurs. Par exemple 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400px" height="400px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc> Un texte </desc>

  <text
    font-family="Arial" font-size="20pt"
    x="1ex" y="2em" dy="0 -0.5em 0.5em" rotate="0 0 45 0">
      Bonjour
  </text>

</svg>

affiche le mot « Bonjour » mais :

  • la lettre « o » est élevée d'un demi cadratin (donc est en exposant), puisque le texte est décalé de –0,5 em au deuxième caractère puis décalé à nouveau de 0,5 em au troisième ;
  • la lettre « n » est tournée de 45° dans le sens des aiguilles d'une montre, puisque le texte est tourné de 45° au troisième caractère puis remis à 0 au quatrième.

Le texte peut être découpé en zones (span), en élément tspan, chaque élément ayant des propriétés différentes. Par exemple 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400px" height="400px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc> Un texte </desc>

  <text x="1ex" y="2em">
      <tspan>Bonjour </tspan>
      <tspan font-weight="bold" fill="red">le </tspan>
      <tspan fill="blue">monde.</tspan>
  </text>

</svg>

le mot « Bonjour » utilise est écrit en noir et graisse maigre, le mot « le » est écrit en gras et en rouge, le mot « monde. » est écrit en bleu et graisse maigre.

On peut mettre du HTML dans le document SVG et donc bénéficier de toutes ses possibilités. Comme le code HTML est un « Objet étranger », il doit être dans un élément foreignObject qui définit les dimensions de la zone d'inclusion. Par exemple : 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400px" height="400px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc> Du HTML encapsulé </desc>

  <foreignObject width="400px" height="80px">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <p style="font-family:monospace; font-size:18pt">
        Ceci est du <em>texte</em> <strong>HTML</strong>.
      </p>
    </body>
  </foreignObject>

</svg>

Image externe

modifier

On peut inclure une images extérieure, par exemple un fichier SVG, PNG ou JPEG. Pour cela, il faut déclarer un nouvel espace de nom XML, xlink, pour pouvoir accéder à une ressource extérieure ; on utilise alors l'élément image. Les attributs spécifiques sont :

  • x, y : emplacement du coin en haut à gauche de l'image ;
  • width, height : largeur et hauteur de l'image (les deux sont obligatoires) ;
  • preserveAspectRatio : indique si les proportions de l'image sont respectées ou si l'image est déformée pour rentrer dans le rectangle (width, height), et comment l'image est alignée par rapport au rectangle[2] ;
  • xlink:href : indique l'adresse où aller chercher l'image (adresse réticulaire de type IRI).

Par exemple : 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400px" height="400px" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc> Image encapsulée </desc>

  <image
     xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Husky_puzzle_book.svg/100px-Husky_puzzle_book.svg.png"
     width="100" height="75"
  >
    <desc> Logo Wikibooks </desc>
  </image>

</svg>

Groupement d'éléments

modifier

Il est possible de grouper des éléments avec l'élément g. Cela permet d'appliquer des attributs à plusieurs éléments en même temps.

L'usage de groupe est très important lorsque l'on travaille avec plusieurs éléments : la balise de description permet une meilleure accessibilité aux déficients visuels (puisqu'elle peut être transcrite en braille ou lue en audio-description) et cela permet d'organiser le document. Ainsi, dès qu'un document comprend plusieurs éléments, il est important que chaque élément soit dans un groupe, même si un groupe ne contient qu'un seul élément.

Dans l'exemple suivant, le groupage est utilisé pour tourner deux éléments graphiques ensemble. 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="248" height="176" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
>

  <g id="groupe1"
    transform="rotate(-15, 127, 88)"
  >
      <desc> Tampon </desc>
      <rect
        x="35" y="35" width="177" height="89" rx="7" ry="7"
        stroke="red" stroke-width="3" fill="none"
      />
      <text
        font-family="Arial" font-weight="bold" font-size="20"
        fill="red"
        text-anchor="middle"
      >
        <tspan x="124" y="70">Approuvé</tspan>
        <tspan x="124" y="100">par le W3C</tspan>
      </text>
  </g>

</svg>

Exemple complet

modifier

Voici un exemple comprenant plusieurs objets graphiques.

Nous avons défini les attributs font-familiy et font-size afin qu'il s'appliquent à tous les éléments du document, ce qui évite d'avoir à les redéfinir pour chaque élément text.

 
Résultat du code SVG.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!-- taille visée : format A4 (21 cm × 29,7 cm)
  avec 90 dpi, 1cm = 35.43px (arrondi à l'entier le plus proche) -->

<svg width="744" height="1052" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     font-family="monospace" font-size="12"
>

  <title> Un logigramme simple </title>
  <desc> Logigramme selon la norme ISO 5807 </desc>

  <g id="depart">
    <desc> étiquette de départ du logigramme </desc>
    <rect
      x="283" y="35"
      width="177" height="71"
      rx="7" ry="7"
      fill="lightyellow" stroke="black" stroke-width="1"
    />
    <text
      x="372" y="71"
      text-anchor="middle" >
        Début
    </text>
  </g>

  <g id="premierLien">
    <desc> lien entre le départ et la première action </desc>
    <line
      x1="372" y1="106" x2="372" y2="177"
      stroke="black" stroke-width="1"
    />
  </g>

  <g id="premiereAction">
    <desc> première action du logigramme </desc>
    <polygon
      points="319 177, 496 177, 425 248, 248 248"
      fill="lightyellow" stroke="black" stroke-width="1px"
    />
    <text
      x="372" y="213"
      text-anchor="middle" >
        Contenu du wikilivre
    </text>
  </g>

  <g id="deuxiemeLien">
    <desc> lien entre la première action et le test </desc>
    <line
      x1="372" y1="248" x2="372" y2="319"
      stroke="black" stroke-width="1"
    />
  </g>

  <g id="test">
    <desc> test </desc>
    <polygon
      points="283 354, 372 319, 460 354, 372 390"
      fill="lightyellow" stroke="black" stroke-width="1"
    />
    <circle
      cx="469" cy="354" r="9"
      fill="lightyellow" stroke="black" stroke-width="1"
    />
    <text
      x="372" y="354"
      text-anchor="middle" >
        Cela vous a plu
    </text>
  </g>

  <g id="lienSiFaux">
    <desc> lien si le résultat du test est faux </desc>
    <polyline
       points="478 354, 620 354, 620 461"
       fill="none" stroke="black" stroke-width="1"
    />
    <text x="485" y="347">
      Faux
    </text>
  </g>

  <g id="lienSiVrai">
    <desc> lien si le résultat du test est vrai </desc>
    <line
       x1="372" y1="390" x2="372" y2="461"
       fill="none" stroke="black" stroke-width="1"
    />
    <text
      x="365" y="425"
      text-anchor="end" >
        Vrai
    </text>
  </g>

  <g id="procedureSiVrai">
    <desc> procédure si le wikilivre a plu </desc>
    <rect
      x="283" y="461"
      width="177" height="71"
      fill="lightyellow" stroke="black" stroke-width="1"
    />
    <line
      x1="301" y1="461" x2="301" y2="531"
      stroke="black" stroke-width="1"
    />
    <line
      x1="443" y1="461" x2="443" y2="531"
      stroke="black" stroke-width="1"
    />
    <text
      x="372" y="496"
      text-anchor="middle" >
        Féliciter l'auteur
    </text>
  </g>

  <g id="procedureSiFaux">
    <desc> procédure si le wikilivre a déplu </desc>
    <rect
      x="531" y="461"
      width="177" height="71"
      fill="lightyellow" stroke="black" stroke-width="1"
    />
    <line
      x1="549" y1="461" x2="549" y2="531"
      stroke="black" stroke-width="1"
    />
    <line
      x1="691" y1="461" x2="691" y2="531"
      stroke="black" stroke-width="1"
    />
    <text
      text-anchor="middle" >
        <tspan x="620" y="485"> Rédiger une </tspan>
        <tspan x="620" y="507"> critique positive </tspan>
    </text>
  </g>

  <g id="lienVraiVersFin">
    <desc> lien de la procédure si le livre a plu vers la fin </desc>
    <line
       x1="372" y1="531" x2="372" y2="602"
       fill="none" stroke="black" stroke-width="1"
    />
  </g>

  <g id="lienFauxVersFin">
    <desc> lien de la procédure si le livre a déplu vers la fin </desc>
    <polyline
       points="620 531, 620 567, 372 567"
       fill="none" stroke="black" stroke-width="1"
    />
  </g>

  <g id="fin">
    <desc> étiquette de fin du logigramme </desc>
    <rect
      x="283" y="602"
      width="177" height="71"
      rx="7" ry="7"
      fill="lightyellow" stroke="black" stroke-width="1"
    />
    <text
      x="372" y="638"
      text-anchor="middle" >
        Fin
    </text>
  </g>

</svg>

Notes

modifier
  1. ↑ (en) « Recognized color keyword names », sur W3C (consulté le 30 mars 2017)
  2. ↑ Pour plus de précisions, voir Structure d'un fichier SVG > Les attributs de l'élément svg.

Structure d'un fichier SVG < ↑ > Chemins

Récupérée de « https://fr.wikibooks.org/w/index.php?title=Découvrir_le_SVG/Éléments_graphiques&oldid=675567 »