Découvrir le SVG/Structure d'un fichier SVG

Fichier SVG indépendant

Un document SVG indépendant est un fichier de texte ayant la structure suivante :

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

  <title> Le titre </title>
  <desc> Description </desc>

  …
  <!-- commentaire -->

 </svg>

Nous distinguons :

une zone d'en-tête : cette zone, la même pour tous les fichiers utilisant la même version du SVG (ici la version 1.1), permet aux logiciels (applications) de savoir ce que contient le fichier :

<?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">

le dessin en lui-même qui est contenu entre la balise d'ouverture <svg> et la balise de fermeture </svg> ;
la balise d'ouverture <svg> contient des attributs, ici : la largeur du dessin width="10cm", la hauteur du dessin height="10cm", la version du langage version="1.1" et la déclaration de « l'espace de nom XML » (XML namespace), xmlns="…" ;
le dessin peut avoir un titre, compris entre les balises <title>…</title>, et une description comprise entre les balises <desc>…</desc> ; ces éléments sont importants car ils améliorent l'accessibilité au document pour les déficients visuels : ils peuvent être retranscrits en braille ou lu en audio-description.

Comme dans tout fichier XML, les commentaires se mettent dans une balise . Le texte de commentaire sert à faciliter la lecture du code mais n'est pas interprété (il n'a aucun effet).

Dans l'en-tête, l'attribut encoding="UTF-8" indique que le fichier texte est au format UTF-8 ; c'est un format qui permet en particulier d'utiliser les lettres avec des diacritiques (àâäçéèêëîïôöùüÿ ÀÂÄÇÉÈÊËÎÏÔÖÛÜŸ) et les ligatures (æœ ÆŒ). Le pseudo-attribut standalone="no" indique que le document dépend du DTD déclaré, c'est-à-dire qu'un certain nombre d'éléments, par exemple des valeurs par défaut, sont dans un fichier extérieur, le DTD (ici, il s'agit du fichier svg11.dtd situé sur le site w3.org). Une déclaration standalone=yes indique que le document est indépendant, c'est-à-dire que toutes les déclarations des balises sont contenues dans le document.

Exemple

Ouvrez un éditeur de texte (par exemple Atom, Bloc Note/Notepad pour Windows, TextEdit pour MacOS, Emacs…).

Collez le texte suivant :

<?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"
  />

</svg>

Enregistrez le fichier sous le nom rectangle.svg dans un répertoire (dossier) que vous retrouverez facilement ; le cas échéant, assurez-vous que fichier est bien au format « texte pur UTF-8 » (et non pas, par exemple, au format RTF ou ANSI)^[1] et que l'éditeur de texte ne rajoute pas une extension (par exemple *.txt)^[2].
Affichez le dessin dans un navigateur Web.
Ouvrez le dessin dans Inkscape.

Dans les deux cas, vous devez avoir un rectangle plein noir.

Document SVG au sein d'un document HTML

Le langage HTML permet de créer des pages Web.

Pour plus de détails voir : Le langage HTML.

Une page HTML peut contenir directement du code SVG. Il est alors compris entre des balises <svg> … </svg>.

Exemple : Nous considérons ici du XHTML.

Ouvrez un éditeur de texte (par exemple Atom, Bloc Note pour Windows, TextEdit pour MacOS, Emacs…).

Collez le texte suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title> Rectangle noir </title>
  </head>

  <body>
    <p>Voici un rectangle noir :</p>
    <svg width="3cm" height="2cm" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <rect
        x="0.5cm" y="0.5cm" width="2cm" height="1cm"
      />
    </svg>
  </body>

</html>

Enregistrez le fichier sous le nom rectangle.html dans un répertoire (dossier) que vous retrouverez facilement ; le cas échéant, assurez-vous que fichier est bien au format « texte pur » (ASCII ou UTF-8 et non pas, par exemple, au format RTF) et que l'éditeur de texte ne rajoute pas une extension (par exemple *.txt).
Affichez la page dans un navigateur Web.

Ici, vous devez avoir le texte « Voici un rectangle noir : » suivi d'un rectangle plein noir.

Les attributs de l'élément `svg`

La balise ouvrante <svg… > peut contenir un certain nombre d'attributs, sous la forme mot-clef = "valeur". Les principales sont :

version : indique la version de SVG utilisée, par exemple version = 1.1 ;
width, height : indique respectivement la largeur et la hauteur de la zone de dessin ;
xmlns : définit l'espace de noms, c'est-à-dire grossièrement les mots « réservés », les instructions ;
preserveAspectRatio : indique la manière dont le dessin s'adapte à la zone d'affichage qui lui est dédiée :
- preserveAspectRatio="xMidYMid" (valeur par défaut) : le dessin est centré sur la zone d'affichage et le rapport largeur/hauteur est conservé,
- preserveAspectRatio="none" : le dessin est déformé de sorte que le rectangle contenant le dessin est aussi le rectangle de la zone d'affichage,
- preserveAspectRatio="xMinYMin" : le dessin est calé sur les valeurs minimales de x et de y de la zone d'affichage et le rapport largeur/hauteur est conservé,
- preserveAspectRatio="xMaxYMax" : le dessin est calé sur les valeurs maximales de x et de y de la zone d'affichage et le rapport largeur/hauteur est conservé ;
zoomAndPad : cet attribut indique s'il est possible de modifier la taille du dessin et de le translater (mais cet attribut n'est pas toujours pris en compte)
- zoomAndPad="magnify" (valeur par défaut) : il est possible d'augmenter la taille du dessin (zoomer) ou de la diminuer (dézoomer), et de translater le dessin (pan),
- zoomAndPad="disable" : le dessin reste à la même place et à la même taille.

Un document SVG peut contenir un sous-document SVG. Dans ce cas-là, on peut en outre définir, pour les sous-documents, les attributs x et y qui permettent de placer le sous-dessin dans le dessin général.

Repère et unités

Le repère par défaut est le suivant :

l'origine, de coordonnées (x = 0, y = 0), est le coin en haut à gauche ;
l'axe x est l'axe horizontal, il est orienté vers le droite ;
l'axe y est vertical, il est orienté vers le bas ;
les angles sont orientés de l'axe x vers l'axe y, c'est-à-dire que les angles positifs correspondent à une rotation dans le sens des aiguilles d'une montre.

Si le document SVG est intégré dans un autre document, il peut être tourné ce qui va changer les orientations des axes par rapport au document général. Ceci peut par ailleurs être modifié par certains attributs^[3].

Les coordonnées et les longueurs sont exprimées sous la forme d'un nombre et d'une unité. Pour les nombres, le séparateur décimal est le point. L'unité « naturelle » du SVG est le pixel, abrégé en px ; c'est l'unité par défaut, celle qui est appliquée si l'on n'indique pas d'unité. La taille affichée ou imprimée dépend de la résolution déclarée :

pour une imprimante, elle est souvent exprimée en point par pouce (dot per inch, dpi), ainsi, pour une résolution de 90 dpi, une longueur d'1 px fera 1/90 pouces soit 0,282 mm et il faudra 35,43 px pour faire 1 cm ;
pour un écran, cela dépend de sa taille réelle (souvent exprimée par la longueur de sa diagonale en pouces ou en cm) et par la résolution d'affichage : ainsi, un écran ayant une diagonale de 61 cm (24 pouces), au format 16/9 et avec une résolution de 1 920 × 1 200, une longueur d'1 px fera 0,271 mm^[4] et il faudra 36,92 px pour faire 1 cm.

Les autres unités sont^[5]^,^[6] :

% : pourcentage, proportion de la taille totale du dessin en x ou en y ;
cm, mm, in : respectivement centimètre, millimètre et pouce (1 in = 25,4 mm) ;
em : cadratin (largeur d'une lettre « M » capitale), correspondant à l'attribut font-size du style appliqué (CSS) ;
ex : hauteur d'x (hauteur de la lettre « x » minuscule), correspondant à l'attribut x-height du style appliqué (CSS) ;
pt : point typographique dit « point pica », unité dans laquelle on exprime le corps de la fonte ; 1 pt = 1/72 in = 0,353 mm ;
pc : pica ; 1 pc = 12 pt = 12/72 in = 1/6 in = 4,23 mm ;

Le rendu des unités « physiques » (cm, mm, in…) dépend de la résolution et des dimensions du dispositif (écran, imprimante)^[7]. Si l'on met dans le même document des longueurs en unités physiques et des longueurs en pixels, alors certains objets auront toujours la même taille réelle alors que d'autres auront des dimensions qui dépendront du dispositif de rendu.

À moins que cela ne soit volontaire, il faut donc s'attacher à tout exprimer en px, unité « naturelle » du SVG^[8], ou bien en pourcentage, afin de maîtriser le résultat ; le facteur d'échelle pouvant être ensuite réglé à l'affichage ou à l'impression. Pour certains dessins simples, on peut utiliser uniquement des unités réelles mais cela restreint les possibilités de dessin.

L'attribut viewBox permet de redéfinir l'unité par défaut et donc de travailler, par exemple, en centimètres (voir Manipulations avancées > Fenêtre (viewport)).

Validation du code

Vous pouvez vérifier si votre code est conforme aux recommandations du W3C avec le site Markup Validation Service^[9]

Notes

↑ Pour le Bloc Note Windows, il faut choisir l'option UTF-8 dans le menu déroulant Encodage de la boîte de dialogue Enregistrer sous.
↑ Pour le Bloc Note Windows, il faut choisir l'option Tous les fichiers (*.*) dans le menu déroulant Type de la boîte de dialogue Enregistrer sous.
↑ comme viewBox et transform, voir le chapitre Manipulations avancées.
↑ L'écran de diagonale 61 cm fait environ 52 cm de large sur 32 cm de long (ce qui ne respecte pas exactement le rapport 16/9). On a donc 1 px = 52/1 200 = 0,0271 cm = 0,271 mm.
↑ (en) « Coordinate Systems, Transformations and Units > Units », sur W3C (SVG1.1), 16 août 2011 (consulté le 4 avril 2017)
↑ (en) « Coordinate Systems, Transformations and Units > Units », sur W3C (SVG2 candidate recommandation), 15 juillet 2016 (consulté le 4 avril 2017)
↑ Voir aussi : « Unités CSS : em, px, pt, cm, in… », sur W3C, 24 février 2017 (consulté le 6 avril 2017)
↑ Certains attributs n'acceptent que des coordonnées sans unité, donc en px
↑ (en) W3C, « Markup Validation Service » (consulté le 31 mars 2017)

Introduction < ↑ > Éléments graphiques

[1] Pour le Bloc Note Windows, il faut choisir l'option UTF-8 dans le menu déroulant Encodage de la boîte de dialogue Enregistrer sous.

[2] Pour le Bloc Note Windows, il faut choisir l'option Tous les fichiers (*.*) dans le menu déroulant Type de la boîte de dialogue Enregistrer sous.

[3] viewBox et transform, voir le chapitre Manipulations avancées.

[4] L'écran de diagonale 61 cm fait environ 52 cm de large sur 32 cm de long (ce qui ne respecte pas exactement le rapport 16/9). On a donc 1 px = 52/1 200 = 0,0271 cm = 0,271 mm.

[unites1.1-5] (en) « Coordinate Systems, Transformations and Units > Units », sur W3C (SVG1.1), 16 août 2011 (consulté le 4 avril 2017)

[6] (en) « Coordinate Systems, Transformations and Units > Units », sur W3C (SVG2 candidate recommandation), 15 juillet 2016 (consulté le 4 avril 2017)

[7] Voir aussi : « Unités CSS : em, px, pt, cm, in… », sur W3C, 24 février 2017 (consulté le 6 avril 2017)

[8] Certains attributs n'acceptent que des coordonnées sans unité, donc en px

[9] (en) W3C, « Markup Validation Service » (consulté le 31 mars 2017)

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]