7. Structuration: éléments de groupage et références

Voici la liste des éléments les plus importants. Notez qu’il faut se référer à la spécification pour connaître tous les attributs de ces éléments. Ici, nous ne montrons qu’un petit extrait !

7.1 Le fragment d’un document SVG: <svg>

<svg> est la racine d’un graphisme SVG
on peut imbriquer des éléments svg parmi d’autres et les positionner
Chaque <svg> crée un nouveau système de coordonnées. Ainsi on peut facilement réutiliser des fragments graphiques sans devoir modifier des coordonnées
Voir aussi: Utilisation d’un viewport et Système de coordonnées, transformations et unités

Exemple 7-1: Hello SVG 2

http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg2.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg>

 <rect
 x="50" y="50" rx="5" ry="5" width="200" height="100"       style="fill:#CCCCFF;stroke:#000099"/>

 <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:14;">      HELLO cher visiteur  </text>

 <svg with="200" height="200" x="200" y="100">

    <rect
 x="50" y="50" rx="5" ry="5" width="200" height="100"

	       style="fill:#CCCCFF;stroke:#000099"/>

    <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:14;">         HELLO cher visiteur </text>

 </svg> 
</svg>

7.2 Groupage d’éléments avec <g>

L’élément <g> sert à regrouper des éléments "qui vont ensemble":

Les enfants de <g> héritent les propriétés, le groupe est documenté avec <title> et <desc>

Exemple 7-2: Un simple groupe de bambous

http://tecfa.unige.ch/guides/svg/ex/svg-intro/grouping/group1.svg

 <g stroke="green"
 stroke-dasharray="9 1"
 >

  <title content="structured text">Mon plus beau dessin </title>

  <line x1="5" y1="80" x2="155" y2="80" stroke-width="30"        	stroke="black
" stroke-dasharray="none
" />

  <line x1="10" y1="30" x2="30" y2="100" stroke-width="5" />

  <line x1="40" y1="30" x2="60" y2="100" stroke-width="10" />

  <line x1="70" y1="30" x2="90" y2="100" stroke-width="15" />

  <line x1="100" y1="30" x2="120" y2="100" stroke-width="20" />

  <line x1="130" y1="30" x2="140" y2="100" stroke-width="25" />

 </g>

Notez comme la couleur verte et le "dashing" stroke-dasharray="9 1 " sont hérités.
La ligne noire par contre utilise des "overrides", par exemple stroke="black "

7.5 Utilisation d’éléments <use>

<use> permet de réutiliser les objets suivants: <svg>, <symbol>, <g>, éléments graphics et <use>
<use> se comporte légèrement différemment selon le type d’objet définit (voir la spécification !):
Il s’agit donc d’un instrument de base pour éviter de répéter du code.

A. Objets réutilisables

Les objets doivent avoir un identificateur XML

<rect id="redsquare" fill="red" width="10" height="10"/>

xlink est le simple XLink standard, il faut donc ne oublier de définir son namespace (normalement vous le faites dans la racine)

<svg width="10cm" height="3.5cm" viewBox="0 0 100 30"

     xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink
">

B. Attributs importants:

x, y, with, height permettent de repositionner et de redimensionner l’objet
xlink:href permet de référencer et instantier l’objet (avec son attribut "id" )

Exemple 7-3: Réutilisation d’un rectangle

http://tecfa.unige.ch/guides/svg/ex/svg-intro/grouping/use1.svg

<svg width="10cm" height="3.5cm" viewBox="0 0 100 30"

     xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink">

 <rect id="MyRect" width="60" height="10"/>

 <use x="20" y="10" fill="yellow" xlink:href="#MyRect" />

 <use x="20" y="20" fill="red" xlink:href="#MyRect" />

</svg>

Exemple 7-4: Utilisation d’un objet <symbol>

http://tecfa.unige.ch/guides/svg/ex/svg-intro/grouping/use2.svg

 <symbol id="bleublancrouge">

  <rect x="0" fill="blue" width="10" height="10"/>

  <rect x="10" fill="white" width="10" height="10"/>

  <rect x="20" fill="red" width="10" height="10"/>

  <rect x="0" fill="none" width="30" height="10" stroke="black"/>

 </symbol>

 <use x="10" y="5" xlink:href="#bleublancrouge" />

 <use x="20" y="20" xlink:href="#bleublancrouge" opacity="0.3" />

Exemple 7-5: Utilisation de 2 <defs> carrés

http://tecfa.unige.ch/guides/svg/ex/svg-intro/grouping/use3.svg

  <defs>

  <rect id="redsquare" fill="red" width="10" height="10"/>

  <rect id="yellowsquare" fill="yellow" width="10" height="10"/>

 </defs>

 <use x="20" y="0" xlink:href="#yellowsquare" />

 <use x="30" y="0" xlink:href="#redsquare" />

 <use x="40" y="0" xlink:href="#yellowsquare" />

	 <use x="20" y="10" xlink:href="#redsquare" />

	 <use x="30" y="10" xlink:href="#yellowsquare" />

	 <use x="40" y="10" xlink:href="#redsquare" />

	 <use x="20" y="20" xlink:href="#yellowsquare" />

	 <use x="30" y="20" xlink:href="#redsquare" />

	 <use x="40" y="20" xlink:href="#yellowsquare" />

      Les couleurs de l’Espagne sont plus gaies que celle de la France :)

7.7 Images <image>

Formats bitmap supportés: png et jpeg
<image> permet également d’insérer un fichier svg (avec un nouveau viewport)

Attributs importants:

x = "<coordinate>" et y ="<coordinate>"

définit l’emplacement (comme pour <rect>, <svg>, <g>, etc.)

width = "<longeur>" et height = "<longeur>"

définit hauteur et largeur de l’image (comme pour <rect>, <svg>, <g>, etc.)

Des valeurs positives indiquent la taille à afficher

(Note: une valeur de 0 empêche l’affichage, les valeurs négatifs sont interdits)

xlink:href = "<uri>"

définit l’URI où se trouve l’image

Adaptation de la taille de l’image

Voir preserveAspectRatio et viewBox dans Système de coordonnées, transformations et unités
Une image est affiché par défaut selon les dimensions que vous donnez !

Exemple 7-6: Inclusion d’une image à plusieurs sauces

http://tecfa.unige.ch/guides/svg/ex/svg-intro/images/images1.svg

<image x="10" y="50" width="200" height="100"       xlink:href="cathedrale_ge.jpg">

  <title>Eglise large</title>

</image>

<image x="250" y="50" width="50" height="100"       xlink:href="cathedrale_ge.jpg">  <title>Eglise longue</title></image>

<image x="310" y="50" width="100" height="100"      xlink:href="cathedrale_ge.jpg       preserveAspectRatio="xMinYMin meet">

  <title>Eglise juste</title>

</image>