SVG XML:SVG de base
Un article de WikiTuto.
Sommaire |
Structure d'une simple page SVG
Prologue
Un fichier SVG commence par une déclaration de version XML standard, comme par exemple
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
Il faut alors ajouter le "DocType" correspondant à la version SVG utilisée :
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
Il est cependant préférable, en cours de développement, de copier localement la DTD de SVG, et d'y accéder en local :
<!DOCTYPE svg SYSTEM "svg10.dtd">
La version 1.1 de la DTD SVG existe également, mais représente une évolution en terme de modularisation hors de propos ici.
Élément racine
La racine d'un fichier SVG est un élément... <svg>. Mais il est nécessaire de définir deux "espaces de noms", un par défaut et un second permettant d'avoir accès à d'autres fonctionnalités que nous verrons par la suite, comme suit :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:link="http://www.w3.org/1999/xlink">(...)</svg>
La taille de la fenêtre SVG est définie par les attributs width et height de l'élément <svg> : <svg width="400" height="250" xmlns="http://www.w3.org/2000/svg">
Imbrication d'un fichier SVG dans HTML
A moyen terme on devrait pouvoir insérer directement du code SVG dans du code XHTML. Certaines variantes de Mozilla possèdent cette fonctionnalité avec un sous-ensemble de SVG.
La version canonique (déconseillée avec le visualisateur d'Adobe) demande d'utiliser la balise <embed>, sous la forme <embed src="..." width="..." height="..." type="image/svg+xml">, mais elle ne marche pas parfaitement.
La solution la plus souple d'emploi reste d'utiliser un environnement <iframe>. Par exemple :
<iframe src="salut-tout-le-monde.svg" height="540" width="95%" frameborder="0">
(Contenu alternatif: image+texte, texte seulement...)
</iframe>
