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 :
<?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">
Comme dans tout fichier XML, les commentaires se mettent dans une balise codice_10. 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 codice_11 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 codice_12 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 codice_13 situé sur le site codice_14). Une déclaration codice_15 indique que le document est indépendant, c'est-à-dire que toutes les déclarations des balises sont contenues dans le document.
Exemple
<?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>
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.
Une page HTML peut contenir directement du code SVG. Il est alors compris entre des balises codice_18.
Exemple :
Nous considérons ici du XHTML.
<!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>
Ici, vous devez avoir le texte « Voici un rectangle noir : » suivi d'un rectangle plein noir.
Les attributs de l'élément codice_21.
La balise ouvrante codice_22 peut contenir un certain nombre d'attributs, sous la forme codice_23. Les principales sont :
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 codice_37 et codice_38 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 :
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.
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 codice_39 ; 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 :
Les autres unités sont, :
Validation du code.
Vous pouvez vérifier si votre code est conforme aux recommandations du W3C avec le site ""
Notes.
"../Introduction/" < ↑ > "../Éléments graphiques/"

Programmation XML/SVG
Le format d'image vectorielle SVG ("Scalable Vector Graphics") est une utilisation concrète du format XML pour décrire les images vectorielles comme un ensemble d'éléments graphiques organisé en un arbre d'éléments XML.
Voir le livre Découvrir le SVG pour plus de détails.