Voir la source de Découvrir le SVG/Manipulations avancées

<noinclude>{{NavTitre|book={{BASEPAGENAME}}|prev=Chemins|next=Le SVG pour l'enseignement des mathématiques et de la programmation}}</noinclude>

== Réutilisation d'objets ==

Un objet peut être réutilisé, « cloné ». Il faut pour cela lui définir un attribut <code>id</code> (identité), c'est-à-dire lui donner un nom, une étiquette. On peut ensuite utiliser un élément <code>use</code> et faire référence à cet objet grâce à l'attribut <code>href</code> de l'espace de nom <code>xlink</code>.

L'exemple ci-dessous dessine un rectangle, puis en fait une copie située {{unité|60|px}} plus à droite.
{{note|Les attributs <code>x</code> et <code>y</code> sont des coordonnées ''relatives'' à l'objet original.}}

<syntaxhighlight lang="xml">
<?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="106" height="71" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
>

  <title> Copie d'un rectangle </title>
  <desc> Deux rectangles identiques </desc>

  <rect
    x="0" y="0" width="106" height="71"
    stroke="black" fill="none"
  /> <!-- Cadre de l'image -->

  <rect id="rectangle1"
    x="18" y="18" width="36" height="18"
  /> <!-- Rectangle de base -->

  <use xlink:href="#rectangle1" x="60" /> <!-- Copie du rectangle à une abscisse différente -->
</svg>
</syntaxhighlight>

On peut définir un objet sans le tracer pour ensuite le dupliquer. Cela se fait avec l'élément <code>defs</code>, qui s'utilise comme l'élément <code>g</code>. Les éléments <code>defs</code> devraient se trouver juste après la balise d'ouverture <code>&lt;svg … &gt;</code>. L'exemple suivant donne le même résultat que ci-dessus :

<syntaxhighlight lang="xml">
<?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="106" height="71" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
>

  <title> Copie d'un rectangle </title>
  <desc> Deux rectangles identiques </desc>

  <defs>
    <rect id="rectangle1"
      width="36" height="18"
    /> <!-- Rectangle de base -->
  </defs>

  <rect
    x="0" y="0" width="106" height="71"
    stroke="black" fill="none"
  /> <!-- Cadre de l'image -->

  <use xlink:href="#rectangle1" x="18" y="18" /> <!-- Première copie du rectangle -->
  <use xlink:href="#rectangle1" x="71" y="18" /> <!-- Seconde copie du rectangle -->
</svg>
</syntaxhighlight>

Ici, l'objet original a été défini à l'origine (0, 0), les attributs <code>x</code> et <code>y</code> de l'élément <code>use</code> deviennent donc des coordonnées absolues.

À la place de l'élément <code>defs</code>, on peut utiliser l'élément <code>symbol</code> qui fonctionne de la même manière. Les deux différences sont que :
* l'identifiant se met directement dans la balise, <code>&lt;symbol id="…"&gt; … &lt;/symbol&gt;</code> ;
* lorsque l'on utilise un élément <code>symbol</code>, on crée une fenêtre ''({{lang|en|viewport}})'' à l'intérieur de l'image ; on peut par exemple utiliser les attributs <code>preserveAspectRatio</code> et <code>viewBox</code>.

== Calques ==

De nombreux logiciels de dessin utilisent la notion de « calque » ''({{lang|en|layer}})''. Un calque  est un groupe de figures qui sont ensemble. Il faut imaginer un document comme une superposition de feuilles transparentes, chaque feuille transparente étant un calque. On peut typiquement changer l'ordre d'empilement des calques, certains dessins en cachant d'autres, et l'on peut rendre visible ou invisible un calque (par exemple afficher une grille ou la masquer).

En SVG, il n'y a pas de notion de calque, mais la notion de groupe (élément <code>g</code>) et de symbole (éléments <code>symbol</code>) sont équivalentes.

L'ordre des instructions dans le document indique l'ordre dans lequel les éléments sont dessinés ; ainsi, si l'on dessine deux éléments, le deuxième peut recouvrir le premier, le cacher. Ainsi, l'ordre des groupe correspond à l'ordre des calques, le premier groupe du document est le calque du bas et le dernier groupe est le calque du dessus. On peut changer l'ordre des calques en déplaçant les groupes dans le fichier.

Par ailleurs, un groupe peut posséder un attribut <code>visibility</code> qui permet de le masquer (valeur <code>"hidden"</code>) ou de l'afficher (valeur <code>"visible"</code>). S'il s'agit d'un symbole ou d'un groupe mis dans un élément <code>defs</code>, l'attribut doit avoir la valeur <code>"inherit"</code> afin que s'applique la valeur définie dans l'appel <code>use</code>, par exemple :

<syntaxhighlight lang="xml">
  <symbol
      id="rectangle1" visibility="inherit"
  >
    <rect 
      width="36" height="18"
    /> <!-- Rectangle de base -->
  </symbol>

  <use
    visibility="visible"
    xlink:href="#rectangle1" x="18" y="18"
  />
</svg>
</syntaxhighlight>

== Transformations géométriques ==

=== Attribut <code>transform</code> ===

Nous avons déjà présenté l'attribut <code>transform</code> précédemment, voir ''[[../Éléments graphiques#Syntaxe générale et aspect des objets|Éléments graphiques &gt; Syntaxe générale et aspect des objets]]''.Nous disposons également des transformations suivantes (les virgules peuvent être omises) :
* <code>rotate(''angle'', ''cx'', ''cy'')</code> : effectue une rotation de centre (''cx'', ''cy''), les valeurs étant dans l'unité par défaut, et d'amplitude ''angle'' (en degrés par défaut) ;
* <code>translate(''tx'', ''ty'')</code> : effectue une translation de vecteur (''tx'', ''ty'') ;
* <code>scale(''s'')</code> : effectue une homothétie (changement d'échelle) de facteur ''s'' ;
* <code>scale(''sx'', ''sy'')</code> : dilate d'un facteur ''sx'' selon l'axe des ''x'' et d'un facteur ''sy'' selon l'axe ''y'' ;
* <code>skewX(''angle'')</code> : incline l'image d'une quantité ''angle'' (en degrés par défaut) selon l'axe des ''x'' ;
* <code>skewY(''angle'')</code> : incline l'image d'une quantité ''angle'' (en degrés par défaut) selon l'axe des ''y'' ;
* <code>matrix(''a'', ''b'', ''c'', ''d'', ''e'', ''f'')</code> : effectue l'application linéaire correspondant à la matrice de transformation <math>\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}</math>.
Pour reprendre l'exemple ci-dessus, on pourrait écrire :
<syntaxhighlight lang="xml">
 <use xlink:href="#rectangle1"
   transform="scale(2) rotate(45) translate(18, 18)" />
</syntaxhighlight>

Concernant la transformation matricielle, si (''x''<sub>0</sub>, ''y''<sub>0</sub>) sont les coordonnées avant transformation et (''x''<sub>1</sub>, ''y''<sub>1</sub>) sont les coordonnées après transformation, on a :
: <math>\begin{pmatrix} x_1 \\ y_1 \\ 1 \end{pmatrix} =
      \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \cdot \begin{pmatrix} x_0 \\ y_0 \\ 1 \end{pmatrix}</math>.
On a donc les équivalences :
: <math>\mathtt{translate(tx, ty)}\ :\ \begin{pmatrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{pmatrix},\ \mathtt{matrix(1, 0, 0, 1, tx, ty)}</math>
: <math>\mathtt{scale(sx, sy)}\ :\ \begin{pmatrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{pmatrix},\ \mathtt{matrix(sx, 0, 0, sy, 0, 0)}</math>
: <math>\mathtt{rotate(a)}\ :\ \begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix},\ 
    \mathtt{matrix(\cos a, \sin a, -\sin a, \cos a, 0, 0)}</math>
: <math>\mathtt{skewX(a)}\ :\ \begin{pmatrix} 1 & \tan a & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix},\ \mathtt{matrix(1, 0, \tan a, 1, 0, 0)}</math>
: <math>\mathtt{skewY(a)}\ :\ \begin{pmatrix} 1 & 0 & 0 \\ \tan a & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix},\ \mathtt{matrix(1, \tan a, 0, 1, 0, 0)}</math>

{{Attention|Quand une série de transformations est spécifiée, celles-ci sont appliquées de droite à gauche.}}
<syntaxhighlight lang="xml">
<circle r="100" transform="translate(18, 18) scale(2) " />
</syntaxhighlight>
La séquence équivaut à l'arborescence ci-dessous : les éléments internes étant appliqués avant les éléments englobants.
<syntaxhighlight lang="xml">
<g transform="translate(18, 18)"> <!-- en troisième -->
  <g transform="scale(2)"> <!-- en deuxième -->
    <circle r="100" /> <!-- Interne en premier -->
  </g>
</g>
</syntaxhighlight>

=== Exemple : création d'une courbe de Koch ===

[[Fichier:Von koch 6 etapes.svg|vignette|Courbe de Koch de profondeur 6.]]

[[Fichier:Creation courbe vonKoch.svg|vignette|upright=2|Principe du tracé d'une courbe de von Koch en SVG.]]

La [[wikipedia:fr:Courbe de Koch|courbe de Koch]] est une courbe fractale qui peut se construire en répétant des opérations simples. Le code suivant a été proposé par [[commons:User:Fibonacci|User:Fibonacci]] sur Wikimedia Commons. Il consiste à tracer un trait horizontal de longueur arbitraire ''l''<sub>0</sub> = 14 et de lui attribuer l'étiquette <code>it0</code> :
<syntaxhighlight lang="xml">
<line x2="14" stroke="#000" stroke-width="10" stroke-linecap="round" id="it0"/>
</syntaxhighlight>
On remarque ici que l'on a par défaut ''x''<sub>1</sub> = 0, ''y''<sub>1</sub> = 0, ''y''<sub>2</sub> = 0.

Cet objet est ensuite translaté de cette même longueur ''l''<sub>0</sub> = 14 puis tourné de {{unité|–60|°}} ; le tout est mis dans un groupe portant l'identifiant <code>it1</code> :
<syntaxhighlight lang="xml">
<g id="it1">
  <line x2="14" stroke="#000" stroke-width="10" stroke-linecap="round" id="it0"/>
  <use xlink:href="#it0" transform="translate(14)rotate(-60)"/>
</g>
</syntaxhighlight>
Cet objet <code>it1</code> est à son tour dupliqué, translaté d'une longueur 3 × ''l''<sub>0</sub> = 42 et retourné horizontalement par la commande <code>scale(-1, 1)</code>. Le tout est mis dans un groupe portant l'identifiant <code>it2</code>. Et ainsi de suite ; comme on a six étapes récursives, la dernière translation se fait d'une longueur 3<sup>6</sup> × ''l''<sub>0</sub> = {{formatnum:10206}}. L'ensemble est ensuite ramené à une échelle permettant de tenir dans la fenêtre de 621 × 180. Le code complet est donc :
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="621" height="180">

<g transform="translate(4,179)scale(0.06)">
  <g id="itB">
    <g id="itA">
      <g id="it9">
        <g id="it8">
          <g id="it7">
            <g id="it6">
              <g id="it5">
                <g id="it4">
                  <g id="it3">
                    <g id="it2">
                      <g id="it1">
                        <line x2="14" stroke="#000" stroke-width="10" stroke-linecap="round" id="it0"/>
                        <use xlink:href="#it0" transform="translate(14)rotate(-60)"/>
                      </g>
                      <use xlink:href="#it1" transform="translate(42)scale(-1,1)"/>
                    </g>
                    <use xlink:href="#it2" transform="translate(42)rotate(-60)"/>
                  </g>
                  <use xlink:href="#it3" transform="translate(126)scale(-1,1)"/>
                </g>
                <use xlink:href="#it4" transform="translate(126)rotate(-60)"/>
              </g>
              <use xlink:href="#it5" transform="translate(378)scale(-1,1)"/>
            </g>
            <use xlink:href="#it6" transform="translate(378)rotate(-60)"/>
          </g>
          <use xlink:href="#it7" transform="translate(1134)scale(-1,1)"/>
        </g>
        <use xlink:href="#it8" transform="translate(1134)rotate(-60)"/>
      </g>
      <use xlink:href="#it9" transform="translate(3402)scale(-1,1)"/>
    </g>
    <use xlink:href="#itA" transform="translate(3402)rotate(-60)"/>
  </g>
  <use xlink:href="#itB" transform="translate(10206)scale(-1,1)"/>
</g>
</svg>
</syntaxhighlight>

=== Fenêtre ''({{lang|en|viewport}})'' ===

Certains éléments créent une fenêtre ''({{lang|en|viewport}})'' : <code>svg</code> (crée la fenêtre cadre), <code>symbol</code> (voir ci-dessus), <code>image</code> et <code>foreignObject</code>.

Les limites de cette fenêtre peuvent être définis, comme indiqué précédemment, par les attributs <code>x</code>, <code>y</code>, <code>width</code> et <code>height</code> (voir ''[[../Structure d'un fichier SVG#Les attributs de l'élément svg|Structure d'un fichier SVG &gt; Les attributs de l'élément svg]]''). Cela permet de translater l'objet et le cas échéant de lui appliquer un facteur d'échelle, en fonction de la valeur de l'attribut <code>preserveAspectRatio</code> ''(ibid.)''.

L'attribut <code>viewBox</code> permet de définir un repère à l'intérieur de cette fenêtre : la syntaxe
: <code>viewBox="xmin, ymin, largeur, hauteur"</code>
indique que le point en haut à gauche aura les coordonnées (''xmin'', ''ymin'') et que le point en bas à droite les coordonnées (''xmin'' + ''largeur'', ''ymin'' + ''hauteur''). Notez que les virgules ne sont pas obligatoires.

Ainsi, nous reprenons l'exemple ci-dessous mais en utilisant l'attribut <code>viewBox</code> pour avoir des valeurs de coordonnées et de longueur en centimètres plutôt qu'en pixels. Notez qu'il faut redéfinir l'épaisseur de trait par défaut (nous prenons ici une épaisseur unité de {{unité|0.03|cm}}).

<syntaxhighlight lang="xml">
<?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="3cm" height="2cm" version="1.1"
     viewBox="0 0 3 2"
     stroke-width="0.03"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
>

  <title> Copie d'un rectangle </title>
  <desc> Deux rectangles identiques </desc>

  <defs>
    <rect id="rectangle1"
      width="1" height="0.5"
    /> <!-- Rectangle de base -->
  </defs>

  <rect
    x="0" y="0" width="3" height="2"
    stroke="black" fill="none"
  /> <!-- Cadre de l'image -->

  <rect
    x="0" y="0" width="3" height="2"
    stroke="black" fill="none"
  /> <!-- Cadre de l'image -->

  <use xlink:href="#rectangle1" x="0.5" y="0.5" /> 
  <use xlink:href="#rectangle1" x="2" y="0.5" />
</svg>
</syntaxhighlight>

== Apparence des éléments ==

=== Marqueurs ===

Un marqueur est un symbole graphique qui s'affiche au milieu ou à l'extrémité d'une ligne : triangle (pointe de flèche), carré, disque… On peut ainsi créer un élément <code>marker</code> et l'utiliser dans un élément <code>path</code>, <code>line</code>, <code>polyline</code> ou <code>polygon</code>.

L'élément <code>marker</code> est un « conteneur », à l'image d'un élément <code>g</code>, qui possède un identifiant (attribut <code>id</code>). Lorsque l'on dessine la courbe (donc dans l'élément <code>path</code>, <code>line</code>…), on place alors un attribut <code>marker-start</code> (marqueur en début de ligne), <code>marker-mid</code> (milieu) ou <code>marker-end</code> (marqueur en fin de ligne) avec la valeur <code>"url(#''identifiant'')"</code>.

Par exemple, si l'on désire mettre un disque à chaque extrémité de la ligne, on peut écrire :
<syntaxhighlight lang="xml">
<defs>
  <marker
      id="extremiteDeLigne"
  >
    <circle
      cx="1.5" cy="1.5" r="1"
      stroke="none" fill="blue"
    />
  </marker>
</defs>

<path
  d="M10 50
  Q50 10, 75 50"
  marker-start="url(#extremiteDeLigne)"
  marker-end="url(#extremiteDeLigne)"
  stroke="black" stroke-width="5" fill="none"
/>
</syntaxhighlight>
mais le résultat obtenu n'est probablement pas celui attendu :
* le disque n'est pas centré sur l'extrémité de la ligne mais est décalé ;
* le disque est très petit et si vous augmentez le rayon, vous obtenez un carré à la place.
En effet, le marqueur est affiché dans une fenêtre ''({{lang|en|viewport}})'' dont la taille est proportionnelle à la largeur du trait de la courbe (ici {{unité|5|px}}) et de dimension 3 × 3 par défaut (c'est-à-dire un carré faisant trois fois l'épaisseur de la ligne).

Le code suivant est plus satisfaisant :
<syntaxhighlight lang="xml">
<marker
    id="extremiteDeLigne"
    markerWidth="5" markerHeight="5"
    refX="2.5" refY="2.5"
>
  <circle
    cx="2.5" cy="2.5" r="2.5"
    stroke="none" fill="blue"
  />
</marker>
</syntaxhighlight>
Les attributs :
* <code>markerWidth</code> et <code>markerHeight</code> définissent une fenêtre de 5 × 5 (par rapport à l'épaisseur du trait) ;
* <code>refX</code> et <code>refY</code> décalent la fenêtre de ses demi-dimensions afin qu'elle soit centrée sur l'extrémité de la ligne.
Le cercle est ensuite placé au centre de la fenêtre et son rayon est choisi pour qu'il soit inscrit dans la fenêtre ; si l'on trace le périmètre (on définit une couleur par le paramètre <code>stroke</code>), il faut ajuster le rayon pour que l'épaisseur du trait soit contenue dans la fenêtre.

Le code suivant permet de placer des traits d'arrêt perpendiculaires à la ligne :
<syntaxhighlight lang="xml">
<defs>
  <marker
      id="extremiteDeLigne"
      markerWidth="1" markerHeight="10"
      refX="0.5" refY="5"
      orient="auto"
  >
    <line
      x1="0.5" y1="0" x2="0.5" y2="10"
      stroke="black" fill="none"
    />
  </marker>
</defs>

<path
  d="M10 50
  Q50 10, 75 50"
  marker-start="url(#extremiteDeLigne)"
  marker-mid="url(#extremiteDeLigne)"
  marker-end="url(#extremiteDeLigne)"
  stroke="black" stroke-width="1" fill="none"
/>
</syntaxhighlight>
Nous avons utilisé l'attribut <code>orient="auto"</code> qui permet d'aligner les axes du repère de la fenêtre du marqueur avec la direction locale de la ligne. On peut à la place indiquer une valeur numérique, il s'agit alors de l'angle duquel est tournée la fenêtre par rapport au la page (et non pas par rapport à la direction de la courbe).

{{note|1=Pour être sûr que le marquer d'origine ne soit pas dessiné, il doit avoir l'attribut <code>display="none"</code> ; c'est le cas s'il est placé dans l'élément <code>defs</code>.}}

Voici un exemple complet :
<syntaxhighlight lang="xml">
<?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="29.7cm" height="21cm" version="1.1"
     viewBox="0 0 297 210"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <title> Cote d'angle </title>
  <desc> Cote d'angle </desc>

  <defs>
      polygon.fleche {
        stroke: none;
        fill:black
      }
      path {
        stroke: black;
        stroke-width: 0.199;
        fill:none
      }
      text {
        font-family: "Liberation Sans", "Nimbus Sans L", Arial, sans-serif
      }
    ]]></style>

    <marker
      id="fleche1"
      markerWidth="10" markerHeight="6.67"
      refX="0" refY="3.33"
      orient="auto"
    >
      <polygon class="fleche"
        points="0 3.33, 10 0, 5 3.33, 10 6.67"
      />
    </marker>

    <marker
      id="fleche2"
      markerWidth="10" markerHeight="6.67"
      refX="10" refY="3.33"
      orient="auto"
    >
      <polygon class="fleche"
        points="10 3.33, 0 0, 5 3.33, 0 6.67"
      />
    </marker>
  </defs>

    <!-- cote d'angle -->

    <path
      d="M259.75 182.63
         A6 6
         0, 0, 0
         259.75 176.63"
         marker-start="url(#fleche1)"
         marker-end="url(#fleche2)"
    />

    <text
      x="261.44" y="180.89"
      font-size="2.7"
      text-anchor="start"
    >
      60°
    </text>

 </g>

</svg>
</syntaxhighlight>
Ce code est un extrait de l'image ''[[:Fichier:Trame isometrique.svg]]''.

=== Transparence ===

Les différents objets graphiques peuvent posséder un attribut <code>fill-opacity</code> dont la valeur peut être :
* un nombre entre 0 et 1 : <code>fill-opacity="0"</code> indique un élément totalement transparent, <code>fill-opacity="1"</code> indique un élément totalement opaque (valeur par défaut) ;
* la valeur <code>fill-opacity="inherit"</code> : typiquement pour un objet « cloné » par un élément <code>use</code>, utilise l'opacité définie dans l'élémznt <code>use</code>.

=== Dégradés de couleurs ===

En SVG, on peut définir deux types de dégradés de couleur : les dégradés linéaires — la couleur change lorsque l'on se déplace dans une direction — et les dégradés radiaux — la couleur change lorsque l'on s'éloigne d'un point.

Un dégradé est représenté par un identifiant. Il peut être appliqué pour le remplissage d'un objet, avec la syntaxe <code>fill="url(#''identifiant'')"</code>, ou à son trait avec la syntaxe <code>stroke="url(#''identifiant'')"</code>.

Le dégradé peut se représenter comme une échelle de couleurs. Les couleurs de référence sont appelées « arrêts » ''({{lang|en|stops}})'' et sont caractérisés par :
* leur position sur l'échelle ''({{lang|en|offset}})'' ;
* la nature de la couleur.
Ainsi, les gradients contiennent au moins deux éléments <code>stop</code> ayant pour attributs :
* <code>offset</code> : nombre entre 0 et 1, ou bien pourcentage, désignant la position dans l'échelle ; le bas de l'échelle est désigné par <code>offset="0"</code> ou bien <code>offset="0%"</code>, le haut de l'échelle est désigné par <code>offset="1"</code> ou bien <code>offset="100%"</code> ;
* <code>stop-color</code> : couleur habituelle, par exemple <code>stop-color="black"</code> ou bien <code>stop-color="#000000"</code> (voir ''[[../Éléments graphiques#Syntaxe générale et aspect des objets|Éléments graphiques &gt; Syntaxe générale et aspect des objets]]'') ;
* le cas échéant <code>stop-opacity</code> qui définit l'opacité de l'arrêt (voir ci-dessus).

==== Dégradé linéaire ====

Un dégradé linéaire est défini par un élément <code>linearGradient</code>. Cet élément est entre les balises <code>defs</code> en début de document est possède un identifiant (attribut <code>id</code>). L'exemple suivant définit un dégradé du bleu au rouge et l'applique à un rectangle :

<syntaxhighlight lang="xml">
<defs>
  <linearGradient
    id="dégradé"
  >
    <stop offset="0" stop-color="blue" />
    <stop offset="1" stop-color="red" />
  </linearGradient>
</defs>

<rect id="rectangle1"
    x="18" y="18" width="36" height="18"
    fill="url(#dégradé)"
/>
</syntaxhighlight>
On peut également définir le vecteur du gradient sous la forme de quatre attributs <code>x1</code>, <code>y1</code>, <code>x2</code> et <code>y2</code> : les arrêts à 0 % et à 100 % sont placés respectivement aux points P<sub>1</sub>(''x''<sub>1</sub>, ''y''<sub>1</sub>) et P<sub>2</sub>(''x''<sub>2</sub>, ''y''<sub>2</sub>), et les ligne de même couleur sont perpendiculaires à la droite (P<sub>1</sub>P<sub>2</sub>). Par exemple, le code suivant fait un dégradé suivant la grande diagonale du rectangle :
<syntaxhighlight lang="xml">
<defs>
  <linearGradient
    id="dégradé"
    x1="0" y1="0"
    x2="100%" y2="100%"
  >
    <stop offset="0" stop-color="blue" />
    <stop offset="1" stop-color="red" />
  </linearGradient>
</defs>

<rect id="rectangle1"
    x="18" y="18" width="36" height="18"
    fill="url(#dégradé)"
/>
</syntaxhighlight>

L'élément peut contenir un attribut <code>gradientTransform</code> qui fonctionne de la même manière que l'attribut <code>transform</code> des objets graphiques (voir [[#Attribut transform|ci-dessus]]). Cela permet par exemple d'incliner ''({{lang|en|skew}})'' le dégradé.

Enfin, l'attribut <code>spreadMethod</code> définit ce qui se passe si l'objet est plus étendu que le dégradé (c'est-à-dire si le vecteur gradient ne couvre pas les abscisses et les ordonnées de 0 à 100 % de l'objet) :
* <code>spreadMethod="pad"</code> : les couleurs aux extrêmes sont étendues jusqu'aux bords de l'objet ;
* <code>spreadMethod="reflect"</code> : le dégradé part dans l'autre sens ;
* <code>spreadMethod="repeat"</code> : le dégradé recommence, il se répète.

==== Dégradé radial ====

Un dégradé radial s'obtient avec l'élément <code>radialGradient</code>. Les attributs spécifiques sont :
* <code>cx</code>, <code>cy</code> et <code>r</code> : paramètre du disque contenant le dégradé ; l'arrêt à 100 % se situe sur le périmètre du cercle de centre (''cx'', ''cy'') et de rayon ''r'' ; par défaut, le disque est le plus petit disque contenant l'objet (c'est-à-dire que ''cx'' = ''cy'' = ''r'' = 50 %) ;
* <code>fx</code>, <code>fy</code> : coordonnées du foyer du dégradé ; l'arrêt à 0 % se situe au point de coordonnées (''fx'', ''fy'') ; par défaut, ce point se situe au centre du disque (''fx'' = ''cx'', ''fy'' = ''cy'').
On dispose également des attributs <code>gradientTransform</code> et <code>spreadMethod</code>.

Par exemple :
<syntaxhighlight lang="xml">
<defs>
  <radialGradient
    id="dégradé"
  >
    <stop offset="0" stop-color="blue" />
    <stop offset="1" stop-color="red" />
  </radialGradient>
</defs>

<rect
    x="10%" y="10%" width="80%" height="80%"
    fill="url(#dégradé)" stroke-width="3"
/>
</syntaxhighlight>

=== Motifs ===

Il est possible de remplir une surface par un motif.

Un motif est un dessin inclus entre les balises d'un élément <code>pattern</code>. Il s'utilise de la même manière qu'un dégradé.

Par exemple, si l'on veut remplir une surface par des disques bleus :

<syntaxhighlight lang="xml">
<defs>
  <pattern
    id="motif"
    x="0" y="0" width="0.1" height="0.1"
  >
    <circle
      cx="5" cy="5" r="3"
      fill="blue" stroke="none"
    />
  </pattern>
</defs>

<rect
    x="10%" y="10%" width="80%" height="80%"
    fill="url(#motif)" stroke="black" stroke-width="1"
/>
</syntaxhighlight>
Les paramètres <code>width</code> et <code>height</code> demandent quelques explications. Par défaut, la valeur <code>1</code> désigne la dimension totale de l'objet à remplir (largeur totale pour <code>width</code>, hauteur totale pour <code>height</code>). En mettant les valeurs <code>0.1</code>, nous indiquons que le motif est répété tous les 0,1 dans l'unité locale, c'est-à-dire tous les 1/10 de la largeur et de la hauteur ; cela affiche donc 10 motif dans le sens de la hauteur et 10 motifs dans le sens de la largeur, soit 100 disque sur la surface.

Cette situation peut poser problème : en effet, la taille et les proportions largeur/hauteur du motif dépendent des dimensions de l'objet alors que l'on voudra sans doute que le motif apparaisse tel que dessiné.

On peut indiquer des dimensions « classiques » avec l'attribut <code>patternUnits="userSpaceOnUse"</code> : les valeurs indiquées dans les attributs <code>width</code> et <code>height</code> sont alors la largeur et la hauteur du rectangle dans lequel le motif est dessiné, et la surface est ensuite pavée par ces rectangles. Les dimensins du motif sont alors indépendantes des dimensions de l'objet. Par exemple :
<syntaxhighlight lang="xml">
<defs>
  <pattern
    id="motif"
    patternUnits="userSpaceOnUse"
    x="7.5" y="7.5" width="15" height="15"
  >
    <circle
      cx="5" cy="5" r="3"
      fill="blue" stroke="none"
    />
  </pattern>
</defs>

<rect
    x="10%" y="10%" width="80%" height="80%"
    fill="url(#motif)" stroke="black" stroke-width="1"
/>
</syntaxhighlight>

Les motifs s'appliquent également aux contours.

Voir aussi : ''[[:commons:Category:SVG patterns]]''.

=== Traits et pointillés ===

Les éléments à une dimension — chemins ''({{lang|en|path}})'', segments de droite ''({{lang|en|line}})'', polygones ''({{lang|en|polyline}})'' — disposent d'un paramètre <code lang="xml">stroke-dasharray</code>. Il s'ensuit une liste de nombres séparés par des virgules, qui correspondent à la longueur des segments et des espaces vides. Les nombres peuvent être des longueurs — avec une unité (<code>mm</code>, <code>in</code>, <code>px</code>) ou sans unité pour l'unité par défaut — ou bien des pourcentages — <code>%</code> —, il s'agit alors du pourcentage de la taille de l'image ou de la boîte englobante (dégradé, motif, masque, filtre).

'''Exemple'''

Pour un trait mixte (alternance trait long-trait court) :
<syntaxhighlight lang="xml">
<?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"
>

  <line
    x1="0" y1="0" x2="200" y2="200"
    stroke="black" stroke-width="1"
    stroke-dasharray = "40, 8, 8, 8"
  />
</svg>
</syntaxhighlight>

=== Filtres ===

{{...}}

=== Masques ===

{{...}}

=== Animation ===

Le langage SVG dispose d'éléments permettant des faire des animations<ref>{{lien web
 | url = https://www.w3.org/TR/SVG11/animate.html
 | titre = Animation (SVG 1.1)
 | site = W3C
 | consulté le = 2018-12-01
}}</ref>{{,}}<ref>{{lien web
 | url = https://svgwg.org/specs/animations/
 | titre = SVG animations
 | site = SVG WG
 | consulté le = 2018-12-01
}}</ref>, essentiellement les éléments <code>animate</code> et <code>animateTransform</code>. Il faut pour cela que le navigateur gère ces éléments ; c'est le cas de d'Opera, Firefox, Safari et Chrome.

Les éléments graphiques sont définis par des paramètres numériques (position, taille…). L'élément <code>animate</code> permet de modifier les valeurs de manière continue durant une certaine durée. La syntaxe globale est :
 <animate attributeName="''paramètre''"
      begin="''instantInitial''" dur="''durée''"
      from="''valeurInitiale''" to="''valeurFinale''"
 />
Elle concerne son parent direct. Par exemple, si l'on veut changer la position d'un rectangle, on écrit :
<syntaxhighlight lang="xml">
<rect x="0" y="0" width="5" height="5" stroke="black" stroke-width="1px" fill="none">
  <animate attributeName="x"
      begin="0s" dur="5s"
      from="0" to="10"
 />
</rect>
</syntaxhighlight>
le rectangle va ainsi passer de la position ''x'' = 0 à ''x'' = 10 en cinq secondes. Vous remarquerez que la balise <code>rect</code> a été coupée en deux : <code>&lt;rect…&gt; … &lt;/rect…&gt;</code> au lieu de la balise unique <code>&lt;rect… /&gt;</code> habituelle.

Dans l'élément <code>animate</code>, l'attribut <code>fill</code> indique le comportement lorsque l'animation touche à sa fin : <code>"freeze"</code> pour que l'objet reste dans son état final, <code>"remove"</code> pour qu'il revienne à son état initial.

Si l'on veut modifier un paramètre de l'attribut <code>transform</code>, on utilise l'élément <code>animateTransform</code>.

Exemple complet :
<syntaxhighlight lang="xml">
<?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="320px" height="200px" version="1.1"
     viewBox="0 0 320 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <title> Ça bouge ! </title>
  <desc> Texte se modifiant de plusieurs manières </desc>

  <defs>
    <style type="text/css"><![CDATA[
      text {
        font-family: "Liberation Serif", "Times New Roman", serif;
        font-size: 20
      }
    ]]></style>
  </defs>

  <!-- le texte bouge de droite à gauche -->
  <text x="0" y="15">
    <animate attributeName="x"
      begin="0s" dur="5s"
      fill="freeze"
      from="200" to="0"
    />
    Ça bouge !
  </text>

  <!-- le texte passe du bleu au rouge -->
  <text x="0" y="35">
    <animate attributeName="fill"
      begin="0s" dur="5s"
      fill="freeze"
      from="#0000ff" to="#ff0000"
    />
    Ça bouge !
  </text>

  <!-- le texte grossit -->
  <text x="0" y="55">
    <animate attributeName="font-size"
      begin="0s" dur="5s"
      fill="freeze"
      from="1" to="16"
    />
    Ça bouge !
  </text>

  <!-- le texte tourne -->
  <g transform="translate(120, 35)">
    <text x="0" y="0" text-anchor="middle">
      <animateTransform attributeName="transform"
        type="rotate"
        begin="0s" dur="5s"
        fill="freeze"
        from="0" to="360"
      />
      Ça bouge !
    </text>
  </g>

</svg>
</syntaxhighlight>
[https://upload.wikimedia.org/wikipedia/commons/8/88/Texte_ca_bouge_SVG_anime_href.svg Voir le résultat.]

Plutôt que de mettre l'élément <code>animate</code> entre les balises ouvrantes et fermantes de l'élément graphique, on peut aussi y faire référence avec un attribut <code>xlink:href</code>, par exemple :
 <syntaxhighlight lang="xml">
<rect id="rectangle"
  x="0" y="0" width="5" height="5" stroke="black" stroke-width="1px" fill="none"
/>
<animate xlink:href="#rectangle"
  attributeName="x"
  begin="0s" dur="5s"
  from="0" to="10"
/>
</syntaxhighlight>

== Utilisation de styles ==

Les styles permettent de définir des paramètres par défaut. Lorsque plusieurs objets utilisent les mêmes paramètres (couleur de remplissage, couleur de trait, épaisseur de trait…), il est utile de définir un style. Ainsi, lorsque l'o change le style, cela change l'affichage pour tous les objets, donc :
* cela permet des changement faciles et rapide même lorsqu'il y a de nombreux objets ;
* cela assure une homogénéité au sein du document voire entre les documents (dans le cas d'un feuille de style extérieure) ;
* cela évite les erreurs : une erreur affectant plusieurs objets, elle est repérée beaucoup plus vite.

=== Style au format CSS ===

{{loupe|Le langage CSS}}

==== Feuille de style externe ====

On peut avoir recours à une feuille de style externe, sous la forme d'un fichier <code>.css</code>. Par exemple

'''Fichier <code>monstyle.css</code>'''
<syntaxhighlight lang="css">
rect {
  fill: red;
  stroke: blue;
  stroke-width: 3
}
</syntaxhighlight>

'''Fichier <code>mondessin.svg</code>'''
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="monstyle.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="3cm" height="2cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <title> Rectangle </title>
  <desc> Un rectangle </desc>

  <rect
    x="0.5cm" y="0.5cm" width="2cm" height="1cm"
  />

</svg>
</syntaxhighlight>

Dans le fichier CSS, nous définissons le style par défaut des éléments <code>rect</code>.

Dans le fichier SVG, nous avons ajouté une référence à la feuille de style : <code>&lt;?xml-stylesheet href="mystyle.css" type="text/css"?&gt;</code>.

==== Styles définis dans le fichier SVG ====

Les styles peuvent être déclarés à l'intérieur du fichier SVG, soit en en-tête, soit dans l'élément lui-même — mais alors le CSS présente peu d'intérêt.

'''En en-tête du fichier'''
<syntaxhighlight lang="xml">
<?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="3cm" height="2cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <title> Rectangle </title>
  <desc> Un rectangle </desc>

  <defs>
    <style type="text/css"><![CDATA[
      rect {
        fill: red;
        stroke: blue;
        stroke-width: 3
      }
    ]]></style>
  </defs>

  <rect
    x="0.5cm" y="0.5cm" width="2cm" height="1cm"
  />
</svg>
</syntaxhighlight>

'''Dans l'élément'''
<syntaxhighlight lang="xml">
<?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="3cm" height="2cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <title> Rectangle </title>
  <desc> Un rectangle </desc>

  <rect
    x="0.5cm" y="0.5cm" width="2cm" height="1cm"
    style="fill: red; stroke: blue; stroke-width: 3"
  />
</svg>
</syntaxhighlight>

==== Classes ====

On peut définir des classes, c'est-à-dire des styles différenciés. Par exemple :

<syntaxhighlight lang="xml">
<?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="3cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <title> Rectangle </title>
  <desc> Un rectangle </desc>

  <defs>
    <style type="text/css"><![CDATA[
      rect {
        stroke-width: 3
      }
      rect.rougebleu {
        fill: red;
        stroke: blue;
      }
      rect.vertjaune {
        fill: green;
        stroke: yellow;
      }
    ]]></style>
  </defs>

  <rect class="rougebleu"
    x="0.5cm" y="0.5cm" width="2cm" height="1cm"
  />
  <rect class="vertjaune"
    x="0.5cm" y="2cm" width="2cm" height="1cm"
  />
</svg>
</syntaxhighlight>

ou encore :
<syntaxhighlight lang="xml">
<?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="3cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <title> Rectangle </title>
  <desc> Un rectangle </desc>

  <defs>
    <style type="text/css"><![CDATA[
      rect {
        stroke-width: 3
      }
      use.rougebleu {
        fill: red;
        stroke: blue;
      }
      use.vertjaune {
        fill: green;
        stroke: yellow;
      }
    ]]></style>

    <rect id="modele"
        width="2cm" height="1cm"
    />
  </defs>

  <use xlink:href="#modele"
    class="rougebleu"
    x="0.5cm" y="0.5cm"
  />
  <use xlink:href="#modele"
    class="vertjaune"
    x="0.5cm" y="2cm"
  />
</svg>
</syntaxhighlight>

==== Passage de la souris ====

L'exemple suivant permet de modifier l'apparence d'objets lorsque le pointeur de la souris survole l'objet ''({{lang|en|hover}})''<ref>{{lien web
 | url = https://groups.google.com/d/msg/mozilla.dev.tech.svg/fHWe2nqxw_M/9tisrhTmAAAJ
 | lang = en
 | auteur = Jeremie Patonnier
 | titre = Re: Good place to be asking non FF SVG questions?
 | site = Mozilla FireFox dev-tech-svg mailing list ''sur'' Google Groupes
 | date = 2017-08-31 | consulté le = 2017-09-01
}}</ref>.

Fichier SVG :
<syntaxhighlight lang="xml">
<svg width="150" height="150" viewBox="0 0 100 100">
  <g class="highlight">
    <g>
      <circle cx="50" cy="50" r="40" />
      <text x="50" y="60" text-anchor="middle" fill="#FFF">Hi!</text>
    </g>
  </g>
</svg>
</syntaxhighlight>

Fichier CSS :
<syntaxhighlight lang="css">
text {
  fill: #FFF;
  font: bold 30px sans-serif;
  stroke-width: 0;
}

.highlight {
  stroke: #0F0;
  stroke-width: 0;
  transition: stroke-width 300ms;
}

.highlight:hover {
  stroke-width: 10px;
}

.highlight:hover text {
  stroke-width: 1px;
}
</syntaxhighlight>

=== Style au format XSL ===

Le XSL est un langage permettant de transformer automatiquement du XML, et donc par conséquent du SVG. On peut ainsi utiliser le XSL pour indiquer d'ajouter systématiquement les attributs <code>fill="red" stroke="blue" stroke-width="3"</code> aux éléments SVG <code>rect</code>.

On crée pour cela un fichier <code>monstyle.xsl</code> contenant
<syntaxhighlight lang="xml">
  <xsl:template match="svg:rect">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">red</xsl:attribute>
      <xsl:attribute name="stroke">blue</xsl:attribute>
      <xsl:attribute name="stroke-width">3</xsl:attribute>
    </xsl:copy>
  </xsl:template>
</syntaxhighlight>

puis on ajoute dans l'en-tête du fichier SVG :
<syntaxhighlight lang="xml">
<?xml-stylesheet href="monstyle.xsl" type="application/xml"?>
</syntaxhighlight>

{{loupe|Programmation XML/XSLT|Programmation XML/XSL-FO}}

== Métadonnées ==

Les métadonnées ''({{lang|en|metadata}})'' sont des informations sur le fichier lui-même. La présence de métadonnées facilite le traitement automatique des données, par exemple leur recensement, leur catégorisation. Le W3C a développé une norme appelée RDF ''({{lang|en|resource description framework}})'' et sa mise en œuvre dans le XML.

L'intégration de métadonnées nécessite de déclarer les espaces de nom <code>rdf</code> auquel nous ajoutons <code>rdfs</code> ''({{lang|en|RDF schema}})'' et <code>dc</code> ''({{lang|en|Dublin core}})'' qui fournissent une syntaxe.

<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="yes"?>
<svg width="4cm" height="3cm" version="1.1"
    xmlns = "http://www.w3.org/2000/svg">
  <desc>
    <title> Le titre </title>
    <descr> La description.</descr>
 </desc>
  <metadata>
    <rdf:RDF
         xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
         xmlns:dc = "http://purl.org/dc/elements/1.1/" >
      <rdf:Description about="http://example.org/myfoo"
           dc:title="Le titre"
           dc:description="La description"
           dc:publisher="Organisation publiant les données"
           dc:date="2017-04-11"
           dc:format="image/svg+xml"
           dc:language="fr" >
        <dc:creator>
          <rdf:Bag>
            <rdf:li>Albane Aaron</rdf:li>
            <rdf:li>Bernard Barnier</rdf:li>
          </rdf:Bag>
        </dc:creator>
      </rdf:Description>
    </rdf:RDF>
  </metadata>
  …
</svg>
</syntaxhighlight>

Si l'on veut ajouter des informations sur la licence, on peut déclarer l'espace de nom <code>c</code> ''({{lang|en|Creative Commons}})'' :
<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="yes"?>
<svg width="4cm" height="3cm" version="1.1"
    xmlns = "http://www.w3.org/2000/svg"
    xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:cc="http://creativecommons.org/ns#">
  <desc>
    <title> Le titre </title>
    <descr> La description.</descr>
 </desc>
  <metadata>
    <rdf:RDF>
      <cc:Work
         rdf:about="http://example.org/myfoo">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title> Le titre </dc:title>
        <cc:license
           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
      </cc:Work>
      <cc:License
         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Reproduction" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Distribution" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#Notice" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#Attribution" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
      </cc:License>
    </rdf:RDF>
  </metadata>
  …
</svg>
</syntaxhighlight>

== Liens ==

L'élément <code>a</code> permet de rendre un objet cliquable, le clic menant vers une adresse donnée. L'objet est encapsulé entre des balises <code>&lt;a xlink:href="…"&gt; … &lt;/a…&gt;</code>. Par exemple :
<syntaxhighlight lang="xml">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>Example - un lien sur une ellipse ellipse
  </desc>

  <rect x=".01" y=".01" width="4.98" height="2.98" 
        fill="none" stroke="blue"  stroke-width=".03"/>

  <a xlink:href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
             fill="red" />
  </a>

</svg>
</syntaxhighlight>

== Notes ==

{{références}}

----
''[[../Chemins/]]'' &lt; [[Découvrir le SVG|↑]] &gt; ''[[../Le SVG pour l'enseignement des mathématiques et de la programmation|Le SVG pour l'enseignement]]''

[[Catégorie:Découvrir le SVG (livre)|Manipulations avancees]]