Comprendre le Web

Scalable Vector Graphics

Fichier - <path> - dessin animé - Icônes - Images - Liens 

<title>Possibilités en SVG</title>
<rect width="150" height="100" x="100" y="20" rx="30" ry="50" fill="white" />
<circle cx="260" cy="40" r="40" fill="blue" />
<ellipse cx="0" cy="50" rx="200" ry="50" fill="yellow" />
<polygon points="100,10 190,78 160,198 40,198 10,78" fill="brown" />
<polyline points="210,100 220,120 230,80 240,140 260,100 300,170" stroke="green" fill="none"
/>
<line x1="0" y1="180" x2="300" y2="0" stroke="orange" stroke-width="4"
stroke-dasharray="20,10,4,10" />
<text x="60" y="180" stroke="lime" style="font-size:200%">SVG is useful !</text>

Toute balise <svg> devrait contenir la balise <title> pour améliorer l'accessibilité et la compréhension du contenu pour les utilisateurs qui utilisent des technologies d'assistance.

Possibilités en SVG SVG is useful !

  1. Cercle <circle>
  2. Ellipse <ellipse>
  3. Rectangle <rect>
  4. Polygone <polygon>
  5. Ligne brisée <polyline>
  6. Ligne <line>
  7. Texte <text>

Le SVGest un langage qui permet de dire comment dessiner au navigateur web. Ce langage est beaucoup plus simple que le français.

Description (incomplète) du dessin ci-dessus

Un rectangle blanc avec des coins arrondis, un cercle bleu (qui recouvre partiellement le rectangle blanc), une demi ellipse jaune, (qui recouvre également partiellement le rectangle blanc), un pentagone brun (qui recouvre partiellement l'ellipse et le rectangle), une fine ligne brisée verte (qui ressemble à des montagnes) d'une épaisseur d'un pixel (1 pixel = 1 point sur l'écran), une ligne droite en pointillé de couleur orange et d'une épaisseur de 4 pixels, et, finalement, du texte (dans l'image, partiellement sur le pentagone)

Le tout avec une transparence (sans couleur de fond), de sorte que le dessin semble être intégré au reste de la page web (et non "collé" sur cette page comme une photo)

La description "littéraire" ci-dessus n'est pas précise. Elle ne décrit pas la position des objets (rectangle, cercle, ...), ni leurs dimensions, ni d'autres caractéristiques telles que les arrondis du rectangle.

Avantages

  1. La longueur du code SVG est plus courte que sa description précise en français. Il est plus facile de faire que de dire ! (ce qu'on a fait)

    Voir en haut de cette page les 7 lignes de code SVG. Que 7 lignes !

  2. Le code SVG est ultra léger par rapport à un fichier-image (.jpg, .png, .gif, ...). L'affichage sera donc bien plus rapide qu'avec ce type de fichier-image.

    Le code SVG (ci-dessus) ne pèse que 592 octets.

  3. Il est plus facile de modifier un code SVG qu'un fichier-image (= gain de temps).

    Toutefois, pour créer un dessin complexe, il est préférable d'utiliser un logiciel de dessin.
    Listing de quelques logiciels au bas de cette page web.

  4. Via du code JS, le dessin est zoomable (sans perte de qualité)

  5. Chaque forme (y compris les balises <text>, <image>, ...) peut contenir un lien (vers une page web)

    La balise HTML <map> permet de définir des aires cliquables ( <area>) d'une image (matricielle). Toutefois, la définition de ces aires est souvent approximative et/ou complexe.

  6. Le dessin peut être animé.

    Les seuls fichier-images (matricielles) pouvant être animés sont les fichiers .gif.

  7. Le code SVG s'intègre parfaitement au code HTML. Le code SVG peut être copié dans le code HTML. Il n'y alors qu'un seul fichier (HTML) => pas de risque de perte du fichier-image (et "Enregistrer l'image sous ..." ne figure plus dans le menu contextuel du navigateur)

  8. ...

Seul inconvénient : Le SVG ne convient pas aux images (telles que des photos). Normal, on ne dessine pas une photo !

Toutefois, la balise <image> permet d'intégrer une "photo" dans un dessin, à l'instar de la balise <text>.

Cette mini-étude portera sur la version 2.0 du SVG.
Seules les bases seront abordées. Elles seront cependant suffisantes pour créer et animer quelques formes.

Le système de coordonnées

Système de coordonnées utilisé en SVG 0 X Y
Système de coordonnées (informatique)

Le système de coordonnées utilisé pour dessiner dans un plan (une feuille) est composé de deux droites perpendiculaires (non dessinées). La droite horizontale (située en haut) est appelée axe des abscisses (souvent appelée axe des x). La droite verticale (située à gauche) est appelée axe des coordonnées (souvent appelée axe des y).

Un point est défini par deux nombres indiquant sa position par rapport à une origine(0,0).

Cette origine (0,0) est le coin supérieur gauche. Tous les nombres liés à une dimension ou une position sont des entiers (car représentant des pixels).

Si la position est "négative", le point est invisible. Mais, il existe. Ainsi, une animation qui modifie la position d'une forme peut la faire apparaître.

Système de coordonnées utilisé en mathématique
Système de coordonnées utilisé en mathématique Y X O
Système de coordonnées (mathématique)

La différence entre les systèmes de coordonnées mathématique et informatique est l'orientation de l'axe des y.
En mathématique, l'axe vertical est orienté vers le haut. En informatique, vers le bas.

Explication

Avant l'informatique, les dessins étaient faits sur un support concret (une feuille de papier, un tableau, ...). On connaissait les dimensions avant de dessiner.

L'informatique utilise un support virtuel. La largeur et la longueur/hauteur ne sont plus limitées.

L'écran n'affiche qu'une partie du support. Ainsi, sur une page web, un texte trop long ou une image trop grande dépasse de l'écran ! Apparaissent alors un ou deux barres de défilement permettant de voir la partie initialement cachée.

Comme on commence à lire en haut à gauche, il est logique que de choisir l'origine du système de coordonnées (0,0) en haut à gauche. Comme on lit vers la gauche, l'axe horizontal est orienté vers la gauche. Comme on lit vers le bas, l'axe vertical est orienté vers le bas (en informatique).

Code SVG de ses axes

Langage SVG

Lorsque le code SVG n'est pas contenu dans un fichier, mais dans la balise <svg>il ne peut être récupéré par lecteur qu'en consultant le code source du fichier HTML. Le menu contextuel n'affichera pas "Enregistrer sous ...".

Triangle équilatéral

Un dessin vectoriel ne se dégrade pas quelque soit le zoom appliqué. Il n'y a pas de pixellisation — apparition de carrés de couleur unique de plus en plus gros au fur et à mesure qu'on zoome —, l'image est donc toujours nette. Ce dessin est une forme "mathématique". Ce format ne convient pas pour des photos, mais très bien pour des schémas. 

<svg width="71" height="100" >
  <!-- triangle equilatéral, 71 = sqrt(2)/2 -->
  <polygon points="0,0 71,50 0,100" fill="lime" />
</svg>

points="0,0 71,50 0,100" signifie que le premier point (0,0) est est à l'origine du système de coordonnées, que le second point (71,50) est à 71 pixels sur l'axe des x et 50 pixels sur l'axe des y, que le troisième point (0,100) est à 0 pixel sur l'axe des x et 100 pixels sur l'axe des y. fill="lime" signifie que la couleur (de remplissage) est "lime" (= nom de la couleur vert clair)

Le code SVG, ci-dessus, pèse 82 octets (sans le commentaire). Ce qui est plus léger qu'un fichier-image, auquel il aurait fallu ajouter les octets liés à un code HTML tel que : <img src="fichier.png" width="71" height="100" alt="">(ici, 54 octets).

De plus, s'il faut modifier le graphique tant au niveau de la forme que de sa couleur, il suffit de modifier le code (et non de créer un nouveau fichier binaire).

Ajoutons que la couleur de fond de l'extérieur du graphique est celle du fond de page (ou de son conteneur); ce qui crée un effet de transparence et donc d'une intégration parfaite dans la page.

Par défaut, la figure est "remplie" (fermée) et la couleur de fond d'un graphique est le noir.

L'unité de mesure peut aussi être un pourcentage de son conteneur (svg)

Les attributs width et height de la balise svg— qui est de type in-line — définissent la taille de l'image.

Translation

Le nom de la balise animateTransform contient une majuscule.
=> Tidy doit être configuré avec output-xhtml et input-xml doivent être coché

Une forme peut être animée.

Une animation peut vite devenir gênante (voire provoquer une épilepsie). 

<svg width="71" height="100" >
  <!-- triangle equilatéral, 71 = sqrt(2)/2 -->
  <polygon points="0,0 71,50 0,100" fill="lime" >

<animateTransform attributeName="transform" type="translate"
    from="-71 0" to="0 0" dur="10s" repeatcount="indefinite" />
  </polygon>
</svg>

Via du JavaScript, la balise <svg> et son contenu peuvent être modifiés. Ce qui permet notamment d'agir sur une forme avec la souris (voire créer un jeu vidéo).

Il est également possible de faire une présentation textuelle originale.

Présentation textuelle originale T h i b a u t

Fichier SVG

Bien que ce ne soit pas obligatoire, le code SVG peut être placé dans un fichier ayant l'extension ".svg". Ainsi, le dessin peut être utilisé dans différentes pages web (ou plusieurs fois dans la même page web).

Dans ce cas, l'attribut xmlns="http://www.w3.org/2000/svg" doit être ajouté dans la balise <svg>pour que le code SVG puis être enregistré dans un fichier *.svg qui pourra alors être intégré dans plusieurs pages web, via la balise HTML <img />.

triangle.svg : 

<svg xmlns="http://www.w3.org/2000/svg" width="71" height="100">
  <polygon points="0,0 71,50 0,100" style="fill:lime" />
</svg>

Si les dimensions ne sont pas indiquées, les dimensions par défaut, largeur de 300 pixels sur une hauteur de 150 pixels, seront utilisées.

L'intégration dans le code HTML, se fait comme pour tout fichier-image (binaire ou non) : 

<p>
  <img src="triangle.svg" alt=""
height="200" />
  <img src="triangle.svg" alt="" />
  <img src="triangle.svg" alt=""
height="50" />
  <img src="triangle.svg" alt=""
height="25" />
  <img src="triangle.svg" alt=""
width="200" height="50" />
</p>

Ci-dessous, le résultat du code ci-dessus. Même fichier, différentes tailles. Sans perte de qualité, même lorsqu'elle est affichée au double de sa taille par défaut.

Rappel : Les deux attributs height et width de la balise <img /> doivent être utilisés pour modifier la taille originale de l'image.(Si un seul de ces deux attributs est utilisé, l'image reste proportionnelle). Si les valeurs des attributs height et width de la balise <img /> sont supérieurs à ceux de la balise <svg>, le dessin sera agrandi sans perte de qualité (sans pixellisation), contrairement aux images matricielles (.jpg, .png, .gif, ...), qui sont contenues dans des fichiers binaires.

Des attributs, autre que xmlns, width, height sont possibles pour cette balise : x, y, viewBox, preserveAspectRatio, zoomAndPan, style, id, class, ...
Plus d'info sur MDN : Attributes

La balise "svg" ne dispose pas de l'attribut "title".

Comme tout fichier-image utilisé dans une page web, le fichier SVG peut alors être "enregistré sous ..." par lecteur de la page web.

L'affichage (sans passer par l'intégration dans un fichier HTML) peut se faire directement (dont à sa taille originale) via un navigateur web. Comme tout fichier pouvant être lu par un navigateur web, vous pouvez le "glisser" sur la fenêtre du navigateur (puis le "lâcher") ou faire un clic droit sur le nom du fichier et dans le menu contextuel choisir "Ouvrir avec ...".

L'intégration du code SVG dans le code HTML est obligatoire pour bénéficier des événements, tel qu'un clic de souris (par exemple, pour redémarrer l'animation)

Affichage du fichier "triangle.svg",
dans le navigateur web Opera,
sous Windows 10, en mode contraste élevé.

L'affichage peut aussi se faire via des logiciels dédiés au SVG, tel que Inkspace.

Vous pouvez configurer votre système d'exploitation de telle sorte que le logiciel de votre choix s'ouvre lorsque vous double-cliquez sur le nom du fichier à ouvrir (par exemple, dans un navigateur web)

Télécharger le fichier triangle.svg.

Cercle

Le cercle est représenté par la balise circle.

Un cercle Centre du cercle (cx,cy) Rayon (r)

Un cercle est défini par un centre et un rayon. L'attribut r représente la dimension du rayon. Les attributs facultatifs cx représentant la position du centre sur l'abscisse et cy celle sur les ordonnées. La position par défaut est (0,0). 

<svg width="400" height="200" style="background-color:white">
  <circle cx="200" cy="200" r="200" />
</svg>

Le graphique est tronqué, car il dépasse de son cadre.

Graphique tronqué

Cercle

   

Ellipse

L'ellipse est représentée par la balise ellipse.

Une ellipse rx ry Centre (cx,cy)

Une ellipse est, ici, définie par un centre et un rayon variable. L'attribut rx représente la dimension du rayon sur l'axe des abscisses et ry celle sur l'axe des ordonnées. Les attributs facultatifs cx représente la position du centre sur l'abscisse et cy celle sur les ordonnées. La position par défaut est (0,0). 

<svg width="400" height="200" style="background-color:white">
  <ellipse cx="20" cy="100" rx="350" ry="100" />
  <ellipse cx="20" cy="100" rx="260" ry="80"
fill="white" />
</svg>

Lorsque rx = ry, l'ellipse devient un cercle.
La valeur par défaut de l'attribut fill est "black".

Ellipse

   

Rectangle

Le rectangle est représenté par la balise rect.

Un rectangle est défini par ses deux dimensions. L'attribut width a comme valeur une string représentant la dimension horizontale. L'attribut height a comme valeur une string représentant la dimension verticale.

Un rectangle Coin supérieur gauche (x,y) rx ry width height

Les attributs suivants sont facultatifs.
Leur valeur par défaut vaut 0.

  • x : distance par rapport au côté gauche
  • y : distance par rapport au sommet
  • rx : dimension de l'arrondi sur l'axe des abscisses
  • ry : dimension de l'arrondi sur l'axe des ordonnées 
<svg width="400" height="300" style="background-color:white">
  <rect x="100" y="100" width="190" height="190" rx="30" ry="50" />
</svg>

Le carré est un rectangle dont la particularité est d'avoir ses deux dimensions égales (largeur = hauteur).

Rectangle

   

Polygone

Le polygone est représenté par la balise polygon.

Un polygone

Un polygone est défini par ses points. L'attribut points représente l'ensemble des points. Chaque point est représenté par deux nombres entiers positifs séparés par une virgule. Le premier nombre correspond à la position sur l'abscisse et le second, celle sur l'ordonnée. Chaque point est séparé par un espace.

Chaque point peut être représenté par deux nombres entiers positifs séparés par un espace. Dans ce cas, chaque point est séparé par une virgule. Toutefois, cette notation n'est pas intuitive : <polygon points="100 10,190 78,160 198,40 198,10 78"></polygon> 

<svg width="400" height="250" style="background-color:white">
  <polygon points="100,10 190,78 160,198 40,198 10,78" />
  <polygon points="300,10 240,198 390,78 210,78 360,198" />
</svg>

Les lignes du polygone peuvent se couper. Ci-dessus, seul l'ordre des points diffère.

Polygone régulier

   

La ligne brisée

La ligne brisée est représenté par la balise polyline.

Une ligne brisée

Une ligne brisée est défini par ses points (de rupture de la ligne). L'attribut points représente l'ensemble des points. Chaque point est représenté par deux nombres séparés par une virgule. Le premier nombre correspond à la position sur l'abscisse et le second, celle sur l'ordonnée. Chaque point est séparé par un espace.

La couleur du trait (stroke) est obligatoire.
Par défaut, fill="black" et stroke-width="1". 

<svg width="400" height="250" style="background-color:white">
  <polyline points="100,10 190,78 160,198 40,198 10,78"
    stroke="black"
fill="none" />
  <polyline points="300,10 390,78 360,198 240,198 210,78"
    stroke="red" stroke-width="5" stroke-dasharray="10,10"/>
</svg>

En définissant une bordure, la différence entre polyline et polygon devient évidente. La demi-épaisseur de la bordure se trouve à l'intérieur de la forme (L'autre demi-épaisseur se trouve à l'extérieur de la forme).

La ligne brisée

Définir une bordure est obligatoire.

 

   

Ligne

La ligne, une section d'une droite, est représentée par la balise line.

Des segments de droite

Une ligne est, ici, définie par deux points et la couleur du trait

  • x1 et y1 représente les coordonnées du premier point
  • x2 et y2 représente les coordonnées du second point
  • stroke représente la couleur du trait (obligatoire)

Par défaut, l'attribut stroke-width vaut 1. 

<svg width="400" height="200" style="background-color:white">
  <line x1="50" y1="30" x2="350" y2="130"
stroke="black" />
  <line x1="50" y1="50" x2="350" y2="150" />
  <line x1="50" y1="70" x2="350" y2="170" stroke-width="1" />
  <line x1="50" y1="90" x2="350" y2="190"
stroke="black" />
</svg>

Le segment de droite

Définir une bordure est obligatoire.

   

Les attributs : stroke, stroke-width et stroke-dasharray

Les attributs stroke, stroke-width et stroke-dasharray concernent la ligne (entourant la forme ou non). Ils concernent, respectivement, sa couleur, son épaisseur, et son style de hachure.

La valeur par défaut de l'attribut stroke est "black".
Rappel : La valeur par défaut de l'attribut fill est "black".

La valeur de l'attribut stroke peut être :

  • un nom de couleur (valide)
  • un code hexadécimal (#xxxxxx)
    où x varie de 0 à F
  • une fonction rgb(x,x,x)
    où x varie de 0 à 255 
<svg width="300" height="70">
  <line x1="0" y1="10" x2="300" y2="10" stroke="black" />
  <line x1="0" y1="20" x2="300" y2="20" stroke="red"
    stroke-width="2" />
  <line x1="0" y1="30" x2="300" y2="30" stroke="rgb(0,0,0)"
    stroke-width="4" stroke-dasharray="5,5" />
  <line x1="0" y1="40" x2="300" y2="40" stroke="#000000"
    stroke-width="4" stroke-dasharray="15,15" />
  <line x1="0" y1="50" x2="300" y2="50" stroke="#FFFFFF"
    stroke-width="4" stroke-dasharray="20,10,4,10" />
  <line x1="0" y1="60" x2="300" y2="60" stroke="rgb(255,255,255)"
    stroke-width="4" stroke-dasharray="25,15,4,15,4,15" />
</svg>

D'autres attributs existent. Plus d'infos sur MDN : Fills and Strokes

<text>

Le texte est un graphique particulier représenté par la balise text. Le texte est placé entre la balise ouvrante et fermante. Les attributs x et y sont les coordonnées du point qui marque le début du texte (en bas à gauche).

SVG is useful ! (x,y) = point de départ du texte SVG is ... rotation 

<svg height="100" width="300" style="background-color:white">
  <text x="20" y="40">SVG is useful !</text>
  <circle cx="20" cy="40" r="1" stroke="red" />
  <text x="2" y="60" fill="red">(x,y) = point de départ du texte</text>
  <text x="20" y="150"
stroke="black"
fill="lime" style="font-size:400%">
    SVG is ...
  </text>
  <text
transform="translate(300, 100) rotate(-45)">rotation</text>
</svg>

L'attribut fill donne la couleur [de fond] des lettres.

L'attribut stroke donne la couleur de bordure des lettres. En indiquant une couleur à la bordure, le texte semble être mis en gras lorsque la taille des lettres est petite.

<tspan>

La balise tspan— fille de la balise text — permet, comme la balise span en HTML d'isoler du texte pour lui donner un formatage particulier. Il est surtout utilisé pour faire un retour de ligne.

Cette balise dispose de 4 attributs : x, y, dx, dy. Ces attributs permettent de positionner le contenu (textuel) de la balise. Les valeurs de x et y sont relatives à une position absolue. Les valeurs de dx et dy indique le déplacement horizontal et vertical par rapport à la position relative au texte de la balise tspan (ou text) précédente.

Cette balise dispose des attributs : stroke, stroke-width, fill, style, ...

Cette balise dispose aussi de l'attribut : rotate. Toutefois, la rotation (horlogique) concerne chaque lettre.

Plusieurs lignes : Ligne 1 Ligne 2 Ligne 3 Ligne 4 

<svg height="90" width="200">
  <text x="10" y="20">Plusieurs lignes :
    <tspan x="20"
dy="20" stroke="red">Ligne 1</tspan>
    <tspan x="30" y="60">Ligne 2
rotate="-45"</tspan>
    <tspan
dx="30" dy="20">Ligne 3</tspan>
    <tspan x="10" dy="50" stroke="black" stroke-width="3" fill="red"
     style="font-size:400%">Ligne 4</tspan>
  </text>
</svg>

L'attribut stroke donne la couleur de la ligne entourant le graphique-texte. Deux lignes entourent la forme vide. Le texte devient plus gros et semble être mis en gras.

text-anchor

L'attribut text-anchor permet de positionner le texte par rapport au point de départ (x). Il accepte trois valeurs = "start" (par défaut), "middle", "end".

start middle end 
<svg height="70" width="200" style="background-color:white">
  <text
x="50" y="20" text-anchor="start">start</text>
  <text
x="50" y="40" text-anchor="middle">middle</text>
  <text
x="50" y="60" text-anchor="end">end</text>
  <line x1="50" y1="10" x2="50" y2="65" stroke="red"></line>
</svg>

CSS

Les propriétés CSS peuvent être utilisées comme valeur de l'attribut style. Telles que : font-family, font-size, letter-spacing, word-spacing, text-decoration, opacity, ... + via du CSS avancé, effectuer une rotation, une animation, ...

La balise <textpath>permet d'écrire du texte le long d'une courbe.

Thibaut

T h i b a u t

Code SVG : 

<svg width="1024" height="300">

  <text x="150" y="250" font-size="150" font-family="Times"
  stroke-width="2" stroke="black">

  <tspan dy="-50" fill="#0000FF" rotate="-5">T</tspan>
  <tspan dy="-50" fill="#FF0000" rotate="10">h</tspan>
  <tspan dy="+50" fill="#00FF40" rotate="-5">i</tspan>
  <tspan dy="+50" fill="#00FFFF" rotate="5">b</tspan>
  <tspan dy="-50" fill="#FF00FF" rotate="">a</tspan>
  <tspan dy="-50" fill="#C0C0C0" rotate="-10">u</tspan>
  <tspan dy="+50" fill="#FF8000" rotate="15">t</tspan>

  </text>
</svg>

transform="translate() rotate()"

Cet attribut permet une transformation : un déplacement éventuel, suivi d'une rotation éventuelle. Les attributs x et y ne doivent alors pas être indiqués.

Cet attribut s'applique aux balises <text>, <rect>, ... 

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="350">
  <line x1="10" y1="250" x2="10" y2="180" stroke="black" />
  <text x="20" y="200">38°</text>
  <rect x="10" y="250" width="300" height="146"
transform="rotate(-52, 10,250)"</>
</svg>

rotate(angle, x, y) où angle est en degré (sens horlogique)
et où x et y sont les coordonnées du point de rotation.

Si le point de rotation n'est pas indiqué, la rotation se fait au point d'origine (0,0).

Autres transformations : translate(), scale(), ...

38°

<image>

La balise <image> permet d'inclure une image (matricielle ou non) dans le dessin vectoriel. 

<svg width="200" height="100" style="background-color:white">
  <image x="20" y="20" width="50" height="50" href="../avatarFe.webp" />
</svg>

Location de l'image. En HTML, < img scr="..." />. En SVG, < image href="..." />.

<a>

Comme en HTML, la balise <a>permet de lier une forme (ou une image) à une page web.

lien 

<svg width="200" height="100" style="background-color:white">

<a href="#image">
    <image x="20" y="20" width="50" height="50" href="../avatarFe.png" />

</a>
  <a href="#text">
    <text x="90" y="50">lien</text>
  </a>
</svg>
Fichier CSS supplémentaire à lier au fichier HTML

svg.css : 

/* Extrait de https://developer.mozilla.org/fr/docs/Web/SVG/Element/a

Comme SVG ne fournit pas de style visuel par défaut pour les liens,
il est en recommandé d'en ajouter manuellement */

@namespace svgns url(http://www.w3.org/2000/svg);

svgns|a {
  cursor: pointer;
}

svgns|a text {
  fill: blue; /* Même pour du texte, SVG utilise fill plutôt que color */
  text-decoration: underline;
}

svgns|a:hover, svgns|a:active {
  outline: dotted 1px blue;
}

Étant donné que cet élément partage son nom de balise avec l'élément HTML <a>, la sélection de "a" avec CSS ou querySelector peut s'appliquer au mauvais type d'élément. La règle @namespace permet de faire la distinction entre les deux.

<g>

La balise <g> est un conteneur utilisé pour grouper des objets.

Les objets contenus ont pour origine le point en haut à gauche de ce conteneur.

Les transformations appliquées à l'élément <g> sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément <use> .

Les enfants de g héritent de ses attributs de présentation
(pas les attributs de positionnement : x1, y2, ..., ni ceux de dimensions : width, height, ...) 

<svg>
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="140" cy="40" r="25"></circle>
    <circle cx="160" cy="60" r="25"></circle>
  </g>
</svg>

Voir aussi : g- <symbol>

<defs>

La balise <defs> permet de contenir des définitions. Chaque définition devra alors être identifiée via l'attribut id pour pouvoir être ensuite utilisée.

<linearGradient>

La balise <linearGradient> permet de créer un effet de dégradé de couleur linéaire. Ce dégradé va de gauche à droite (dégradé vertical), de haut en bas (dégradé horizontal) ou en oblique.

Le nom de cette balise contient une majuscule.
=> Tidy doit être configuré avec output-xhtml et input-xml doivent être coché

SVG

  • id est l'identifiant de l'effet
  • x1 et y1, coordonnées du premier point de ligne
  • x2 et y2, coordonnées du second point de ligne 
  <svg height="150" width="400">
    <defs>
      <linearGradient id="
grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(
#grad1)" />
    <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG<text>
  </svg>

Plus d'info sur linearGradient

<radialGradient>

La balise <radialGradient> permet de créer un effet de dégradé de couleur radial. Ceci permet d'obtenir un effet 3D.

Le nom de cette balise contient une majuscule.
=> Tidy doit être configuré avec output-xhtml et input-xml doivent être coché

  • id est l'identifiant de l'effet
  • cx et cy coordonnées du premier centre
  • r dimension du rayon
  • fx et fy coordonnées du second centre 
<svg height="150" width="400">
  <defs>
    <radialGradient id="
grad2" cx="75%" cy="75%" r="75%" fx="75%" fy="75%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0"></stop>
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop>
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="100" rx="100" ry="100" fill="white"></ellipse>
  <ellipse cx="200" cy="100" rx="100" ry="100" fill="url(
#grad2)"></ellipse>
</svg>

Plus d'info sur radialGradient

<use>

L'élément <use> permet la réutilisation d'un élément identifié et défini dans <defs>. Cet élément identifié est de type <g> lorsqu'on veut réutiliser plusieurs formes. Le point de référence de l'élément identifié est son point gauche supérieur.

Pour placer une forme ainsi définie, il suffit d'indiquer la valeur ad hoc de l'attribut href (la valeur de son id précédé par #) et d'indiquer les valeurs voulues des attributs x et y de la balise <use>. 

<svg>
  <defs>
    <g id="group1">
      <rect x="50" y="50" width="50" height="50"></rect>
      <circle cx="50" cy="50" r="50"></circle>
    </g>
  </defs>
  <use href="#group1"
x="50"
y="50"></use>
  <use href="#group1" x="200" y="50"></use>
</svg>

Cette page ne donne qu'un aperçu du SVG. Pour plus d'informations, consulte les liens ci-dessous.