SVG en HTML
fichiers SVG peuvent être incorporés dans des documents HTML via les balises suivantes: <embed>, <object> ou <iframe>.
code SVG peut être intégré directement dans la page HTML, ou vous pouvez accéder directement au fichier SVG.
Utilisation de la balise <embed>
<Embed>:
- Avantages: Tous les principaux navigateurs sont pris en charge, et permet les scripts
- Inconvénients: Non recommandé pour une utilisation dans HTML4 et XHTML (mais autorisés dans HTML5)
Syntaxe:
<embed src="circle1.svg" type="image/svg+xml" />
Résultats:
Utilisation de la balise <object>
<Object>:
- Avantages: Tous les principaux navigateurs sont pris en charge, et le soutien pour HTML4, XHTML et norme HTML5
- Inconvénients: ne permet pas l'utilisation de scripts.
Syntaxe:
<object data="circle1.svg"
type="image/svg+xml"></object>
Résultats:
Utilisez balise <iframe>
<Iframe>:
- Avantages: Tous les principaux navigateurs sont pris en charge, et permet les scripts
- Inconvénients: Non recommandé pour une utilisation dans HTML4 et XHTML (mais autorisés dans HTML5)
Syntaxe:
<iframe src="circle1.svg"></iframe>
Résultats:
SVG intégré directement dans le code HTML
Firefox, Internet Explorer9, Google Chrome et Safari, vous pouvez inclure du code SVG directement en HTML.
Remarque: SVG peut être intégré directement dans Opera.
Exemples
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
Essayez »
Lien vers les fichiers SVG
Vous pouvez également créer un lien vers une étiquette avec <a> fichiers SVG: Lien vers les fichiers SVG
Vous pouvez également créer un lien vers une étiquette avec les fichiers SVG <a>:
<a href="circle1.svg">View SVG file</a>
Résultats:
Voir le fichier SVG