Inkscape : guide du logiciel de dessin vectorielObtenir le livre.
Inkscape » SVG et Internet » Affichage simple de SVGPrécédent Index Suivant

Affichage simple de SVG

Il y a plusieurs façons différentes d'afficher des fichiers SVG dans une page Web. La façon la plus simple est de placer simplement un lien vers un fichier SVG. Les navigateurs qui supportent le SVG afficheront le dessin par eux-mêmes sur une page.

Pour placer un dessin SVG dans un document XHTML (Extensible Hypertext Markup Language, Langage de balisage hypertexte extensible) ou HTML (Hypertext Markup Language, Langage de balisage d’hypertexte) on peut soit inclure le dessin SVG dans le fichier XHTML à l'aide d'Espaces de nommage ou en utilisant la balise XHTML <object> pour inclure un fichier SVG externe.

[Avertissement]Avertissement

Une méthode que vous pourriez voir utilisée pour inclure un dessin SVG dans un document pour le Web, utilisant la balise <embed>, ne fait pas partie de la spécification XHTML (ni de la spécification HTML 4). Les navigateurs modernes (p. ex. Firefox et Opera) sont conformes à la norme XHTML et utilisent la balise <object>, tandis que l'extension d'Adobe requiert l'utilisation de la balise <embed>.

Utilisation des balises <object>

Une façon simple et facile d'inclure un SVG dans une page Web consiste à utiliser la balise XHTML <object>. Voici un exemple : 


<?xml version="1.0"?>     1
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>SVG inclus avec une balise <object> dans un fichier XHTML</title>
  </head>
  <body>

   <h1>Un rectangle SVG (par balise <object>)</h1>

   <object type="image/svg+xml" data="web_rectangle.svg">     2
    Le navigateur ne supporte pas les fichiers SVG !     3
   </object>

  </body>
</html>

1

Déclaration XML.

2

Inclusion du fichier SVG. "image/svg+xml" est le type MIME du fichier inclus. Il doit être indiqué.

3

Texte qui sera affiché si un navigateur ne supporte pas le SVG. Les navigateurs devraient ignorer les balises qu'ils ne comprennent pas et par conséquent exposer le texte.

Utilisation d'espaces de nommage

A travers les Espaces de nommage, un fichier SVG peut être placé directement dans un fichier XHTML. Voici un exemple d'un fichier XHTML très simple qui affiche un carré bleu. Le carré a été dessiné avec Inkscape (pour plus de clarté, le dessin d'Inkscape a été enregistré comme fichier SVG simple et certains attributs non utilisés du rectangle ont été supprimés). 


<?xml version="1.0"?>     1
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     2
  <head>
   <title>SVG incorporé dans un fichier XHTML</title>
  </head>
  <body>

<h1>Un rectangle SVG (par espaces de nommage)</h1>

<!-- Created with Inkscape (http://www.inkscape.org/) -->     3
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"     4
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs
     id="defs1343" />
  <g
     id="layer1">
    <rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </g>
</svg>     5

  </body>
</html>

1

Déclaration de la version XML. Notez qu'il n'y a qu'une seule déclaration <?xml?> dans le document.

2

Début de l'espace de nommage XHTML.

3

Début du contenu SVG d'Inkscape. Notez que la ligne <?xml?> a été supprimée.

4

Déclaration de l'espace de nommage SVG. Notez que lorsque 'xmlns' ne porte pas d'extension (p. ex. ':svg'), alors la ligne déclare un espace de nommage par défaut.

5

Fin de l'espace de nommage SVG et du contenu SVG d'Inkscape.

Le fichier ci-dessus sera affiché par Firefox 1.5 du moment que le nom de fichier se termine par « .xml ». Toutefois il ne sera pas validé par le service de validation du balisage du W3C. Pour être validé, des modifications doivent être opérées. Le « DOCTYPE » doit être changé en "XHTML 1.1 plus MathML 2.0 plus SVG 1.1". La version du SVG doit être 1.1 pour correspondre au « DOCTYPE », et toutes les balises SVG doivent commencer par "svg:" pour déclarer explicitement à quel espace de nommage elles se rapportent. Ce dernier est requis en raison de conflits d'espaces de nommage entre XHTML et SVG. Le fichier suivant sera validé. 


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>SVG inclus par espace de nommage dans un fichier XHTML</title>
  </head>
  <body>

<h1>Un rectangle SVG (par espaces de nommage)</h1>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg:svg     1
   xmlns:svg="http://www.w3.org/2000/svg"     2
   version="1.1"
   width="150"
   height="150"
   id="svg1341">
  <svg:defs
     id="defs1343" />
  <svg:g
     id="layer1">
    <svg:rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </svg:g>
</svg:svg>

  </body>
</html>

1

Début du contenu SVG d'Inkscape. Notez que l'objet est maintenant déclaré avec un préfixe 'svg:'. Tous les objets SVG doivent utiliser ce préfixe.

2

Déclaration de l'espace de nommage SVG. Notez l'ajout de ':svg' à la déclaration 'xmlns' par comparaison avec l'exemple précédent.

Pour obtenir de l'extension Adobe qu'elle affiche le contenu SVG incorporé dans un fichier XHTML ou HTML demande un peu de travail. L'extension est antérieure à beaucoup de travail sur les espaces de nommage. Vous pouvez découvrir plus de détails sur cette magie noire sur le site Wiki SVG.

Précédent Niveau supérieur Suivant
Chapitre 19. SVG et Internet Sommaire Ajout de liens
© 2005-2009 Tavmjong Bah.Se procurer le livre.Four spheres