Premiers pas

Commençons par un exemple simple

Jetez un coup d'oeil au morceau de code suivant :

<svg version="1.1"
     baseProfile="full"
     xmlns="https://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red"/>

  <circle cx="150" cy="100" r="80" fill="green"/>

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

Quelques explications s'imposent quant au fonctionnement du rendu :

1. Nous commençons avec l'élément svg à la racine :
   • la déclaration du doctype que l'on voit en (X)HTML peut être enlevée car la DTD du SVG provoque plus de problèmes qu'elle n'en résout.
   • pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile doivent toujours être utilisés.
   • en tant que langage basé sur XML, l'espace de nommage du document SVG doit toujours utiliser des limites définies, d'où l'attribut xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Namespaces Crash Courses.
2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect/> qui recouvre l'intégralité de l'espace.
3. Un cercle vert d'un rayon de 80px est dessiné par dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.
4. Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.

Les propriétés basiques des fichiers SVG

• La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés en avant des autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au dessus de tous les autres.
• Les documents SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes :
  • Si le HTML est du XHTML et est distribué sous forme de application/xhtml+xml, le SVG peut directement être intégré dans la source XML.
  • SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5.
  • Le document SVG peut être défini avec un élément object :

    <object data="image.svg" type="image/svg+xml" />

  • De la même manière, un iframe peut être utilisé :

    <iframe src="image.svg"></iframe>

  • Théoriquement, une balise img peut également être utilisée. Cependant, cette méthode n'est supportée dans Firefox que depuis la version 4.0.
  • Enfin, SVG peut être créé dynamiquement avec du Javascript et injecté dans le DOM HTML. Ceci permet aux technologies de remplacement pour les navigateurs, qui ne peuvent pas traiter SVG, d'être mises en œuvre. Pour approfondir cette technique, vous pouvez lire cette page.
• La manière dont SVG gère les tailles et les unités sera traitée à la page suivante.

Les types de fichiers SVG

Les documents SVG peuvent être déclarés de deux manières. Normalement, les fichiers SVG sont des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).

Les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (cf plus bas).

Un mot sur les serveurs Web

Maintenant que vous avez une petite idée de la manière de créer des fichiers SVG basiques, la prochaine étape est de les envoyer sur un serveur Web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :

Content-Type: image/svg+xml

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

Content-Type: image/svg+xml
Content-Encoding: gzip

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur Réseau ou un site comme web-sniffer.net. Donnez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez la page de configuration d'un serveur sur le wiki SVG pour quelques solutions simples.

La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.

Interwiki Languages Links