Structure d'un fichier SVG

 

Déclaration XML

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

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

"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">

 

la balise <svg>

· 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>