Découvrir le SVG/Éléments graphiques
Les éléments graphiques sont les instructions qui vont créer le dessin.
Syntaxe générale et aspect des objets.
La syntaxe générale pour les éléments graphiques est :
où
Certains attributs définissent la mise en forme de l'objet, appelée « coloriage » "()", et sont communs à tous les éléments présenté ici. Les principaux sont :
Les valeurs des attributs codice_8 et codice_9 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, par exemple :
La valeur numérique de la couleur est sous la forme codice_65 où codice_66, codice_67 et codice_68 désigne la composante au format hexadécimal (entre codice_69 et codice_70) de rouge, de vert et de bleu.
La valeur de l'attribut codice_10 est une dimension. On utilise en général l'unité par défaut codice_72.
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, codice_73, permet notamment de faire tourner l'objet. La valeur est codice_74, 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 codice_75 ou bien codice_76.
Voici un exemple complet. Le second rectangle est tourné autour de son centre ("cx" = , "cy" = ) :
<?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.
Un rectangle se dessine avec un élément codice_77. La syntaxe est codice_78, les attributs étant :
Par exemple, le code suivant place un rectangle de de large et de de haut au point (, ) avec des angles arrondis d'un rayon de :
<rect
 x="40px" y="80px" width="60px" height="128px"
 rx="8px" ry="8px"
Cercles et ellipses.
Un cercle se trace avec l'élément codice_4. Les attributs sont les coordonnées du centre codice_88 et codice_89, et le rayon codice_90.
Un cercle se trace avec l'élément codice_91. Les attributs sont les coordonnées du centre codice_88 et codice_89, le rayon horizontal codice_85 et le rayon vertical codice_86.
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.
Pour tracer un segment de droite [M1M2], on utilise l'élément codice_5. Les quatre attributs spécifiques sont simplement codice_97, codice_98, codice_99 et codice_100 : les coordonnées des deux extrémités M1("x"1, "y"1) et M2("x"2, "y"2).
On peut tracer une ligne brisée avec l'élément codice_101. L'argument spécifique est codice_102 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 codice_72.
L'élément codice_104 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.
Un texte est inclus entre des balises codice_105. Dans sa forme la plus simple, on écrit simplement
<text y="1em">
 Texte à écrire.
</text>
L'attribut codice_106 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 codice_107 sont :
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 :
Le texte peut être découpé en zones "()", en élément codice_133, 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 codice_134 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.
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, codice_135, pour pouvoir accéder à une ressource extérieure ; on utilise alors l'élément codice_136.
Les attributs spécifiques sont :
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.
Il est possible de grouper des éléments avec l'élément codice_145. 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.
Voici un exemple comprenant plusieurs objets graphiques.
Nous avons défini les attributs codice_146 et codice_117 afin qu'il s'appliquent à tous les éléments du document, ce qui évite d'avoir à les redéfinir pour chaque élément codice_107.
<?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.
"../Structure d'un fichier SVG/" < ↑ > "../Chemins/"