<?xml version="1.0"
standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December
1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
· Un document SVG se compose d'un ou plusieurs fragments délimités par la balise <svg>
· Il peut y avoir plusieurs structures <svg> emboitées dans le même document ou dans des documents composites résultants de plusieurs espaces de noms
· La balise <svg> redéfinit l'espace utilisateur
Attributs principaux de la balise <svg>
· x = "x0" ; position en x du coin supérieur gauche ( pour les structures internes )
· y = "y0" ; position en y du coin supérieur gauche ( pour les structures internes )
· width = "w0" ; largeur en pixels de l'espace ( pour les structures externes )
· height = "h0" ; hauteur en pixels de l'espace ( pour les structures externes )
· viewbox
· style
Voir les autres attributs sur le site de W3C dans la section structure du document, éléments SVG
La
balise <g>
Elle regroupe et nomme des éléments qui se partagent des attributs communs : couleur, style, ...
· Exemple :
<g style="fill:red" id="Grands rectangles rouges">
<rect x="100" y="100" width="200"
height="200” />
<rect x="300" y="400" width="100"
height="100” />
</g>
<g style="fill:blue" id="Petits rectangles bleus">
<rect x="10"
y="10" width="20" height="20” />
<rect x="30"
y="40" width="10" height="10” />
</g>
· On peut imbriquer autant de structures <g> que l'on veut :
· Les objets
isolés ( ne figurant pas dans une structure <g> ) sont considérés comme figurant
dans leur propre groupe ( leurs attributs ne sont pas propagés )
Référencement
On peut utiliser plusieurs types de référencement
1-Référencement relatif
La référence est locale
Exemple
<linearGradient id="myGradient"> .... </linearGradient>
...
<rect style="fill:url(#myGradient) />
2-Référencement absolu
La référence est une URI générale
La référence ne se trouve pas dans le fichier courant
La balise <defs>
Elle autorise la définition d'objets référencés plus tard dans le même fichier
Exemple :
<defs>
<linearGradient id="Gradient01"> .... </linearGradient >
</defs>
...
<rect style="fill:url(#Gradient01) ..../>
Il est requis que toutes les définitions d'objets devant être référencés plus tard soient faites dans la même structure <defs>
Il n'y a donc qu'une
structure <defs> par fichier SVG
La balise <symbol>
Elle permet de définir des objets graphiques réutilisables dans les cas suivants
La balise <use> permet le référencement d'éléments définis dans une structure <defs > ( forme d'inclusion )
Exemple :
<defs>
<symbol id="s1" >
......
</symbol>
</defs>
<g >
<use xlink:href="#s1" />
</g>
L'élément use peut référencer :
- soit un élément du même fichier dont l'ancêtre est un élément <defs>
- soit un élément d'un autre fichier dont l'ancêtre est un élément <defs>
La balise <image> autorise le référencement d'images entières dans une zone rectangulaire définie dans les coordonnées utilisateur
Les formats d'images acceptés doivent être :
· PNG
· JPEG
· SVG
Exemple :
<image x="200" y="300"
width="100px" height="100px"
xlink:href="monimage.png" />
Structures de métadonnées
La structure <desc> autorise l'insertion de commentaires non rendus
La structure
<title>
autorise un titre pouvant être rendu par les viewers, dans le bandeau par
exemple
Ces balises sont importantes car nécessaires pour la « search engine ».
Exemple :
<g>
<title> Mon image
</title>
<desc> Cette image ne contient qu'un rectangle </desc>
<rect ..... />
</g>