Premiers pas

Types de fichier SVG

Les fichiers SVG existent en deux formats. Les fichiers SVG normaux sont de simples fichiers texte contenant des balises SVG. L'extension recommandée pour ces fichiers est .svg (en minuscules).

À cause de la taille importante que les fichiers SVG peuvent atteindre quand ils sont utilisés pour certaines applications (GIS, etc), la spécification SVG autorise aussi les fichiers compressés gzip. L'extension recommandée pour ces fichiers est .svgz (en minuscules). Malheureusement, il est très difficile de faire fonctionner correctement un fichier SVG compressé avec tous les agents utilisateurs qui en sont capables quand le fichier est desservi par un serveur Microsoft IIS. De plus Firefox 1.5 ne peut pas lire de tels fichiers SVG en local. Évitez les fichiers SVG compressés gzip, sauf si vous les publiez sur un serveur qui les gère correctement (voir ci-dessous).

Un exemple simple

Regardons sans plus tarder un exemple simple. Regardez le code suivant.

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

  <!-- Définition du fond : rect(angle) et de sa couleur de remplissage (blanc) -->
  <rect width="100%" height="100%" fill="white" />

  <!-- Définition d'un premier rectangle rouge, de sa position et de ses dimensions --> 
  <rect x="30" y="50" width="240" height="100" fill="red" />
  <!-- Définition du cercle rouge, de la position de son centre et de son rayon --> 
  <circle cx="150" cy="100" r="80" fill="red" />

  <!-- Définition du texte : position, taille, ancrage et couleur --> 
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

Cela aura pour résultat la capture d'écran ci-dessous :

XXX: Quelques explications quant tout ça (NdT : Cette partie est encore à rédiger dans la partie anglaise) :

• Le doctype peut être enlevé parce que la DTD du SVG provoque plus de problèmes qu'elle n'en résout.
• Pour identifier la version du SVG pour d'autres types de validation, à la place, les attributs version et baseProfile devraient toujours être utilisés.
• En tant que dialecte XML, l'espace de nommage du document SVG doit toujours utiliser des limites correctes (d'où l'« attribut » xmlns). Voir la page Namespaces Crash Course pour plus d'informations.

Un mots sur les serveurs Web

Maintenant que vous avez une petite idée de comment créer des fichiers SVG basiques, la prochaine étape est de les envoyer sur un serveur Web. À ce stade, il existe quelques gotchas. 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 la bonne en-tête HTTP avec vos fichiers SVG en utilisant un site comme web-sniffer.net. Donnez l'URL d'un de vos fichiers SVG et regarder les en-têtes HTTP de la réponse. Si vous remarquer que votre serveur n'envoie pas les en-têtes avec les valeurs données ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à les convaincre de configurer correctement leurs serveur 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 d'avoir vérifier le votre. Si votre serveur n'est pas configuré pour envoyer les bonnes en-têtes avec les fichiers SVG qu'il dessert, 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 les ouvrir.