SVG dans une page HTML

Les fichiers SVG peuvent être intégrés dans un document HTML à l'aide des balises suivantes : <embed>, <object> ou <iframe>.

SVG dans une page HTML

Voici maintenant trois méthodes différentes pour intégrer des fichiers SVG dans une page HTML.

Utilisation de la balise <embed>

La balise <embed> est supportée par tous les navigateurs populaires et permet l'utilisation de scripts.

Remarque :L'utilisation de la balise <embed> pour intégrer des fichiers SVG dans une page HTML est recommandée par Adobe SVG Viewer ! Cependant, si vous devez créer un XHTML valide, vous ne pouvez pas utiliser <embed>. La balise <embed> n'est pas définie dans aucune norme HTML.

Grammaire :

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Remarque :L'attribut pluginspage pointe vers l'URL de téléchargement du plugin.

Utilisation de la balise <object>

La balise <object> est une balise standard de HTML 4, supportée par tous les navigateurs plus récents. Son inconvénient est qu'elle ne permet pas l'utilisation de scripts.

Remarque :Si vous avez installé la dernière version de Adobe SVG Viewer, alors lorsque vous utilisez la balise <object>, les fichiers SVG ne fonctionnent pas (au moins pas dans IE) !

Grammaire :

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Remarque :L'attribut codebase pointe vers l'URL de téléchargement du plugin.

Utilisation du tag <iframe>

Le tag <iframe> fonctionne sur la plupart des navigateurs.

Grammaire :

<iframe src="rect.svg" width="300" height="100">
</iframe>

Je m'attends ...

Si l'on pouvait ajouter des éléments SVG entre eux simplement en引用 SVG de l'espace de noms, ce serait génial, comme ceci :

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>Ceci est un paragraphe HTML</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>