SVG en HTML
Les fichiers SVG peuvent être intégrés dans des documents HTML à l'aide des balises suivantes : <embed>, <object>.
Le code SVG peut être intégré directement dans la page HTML, ou vous pouvez créer un lien directement vers le fichier SVG.
Utilisez la balise <embed>
<embed> :
Avantages : Tous les principaux navigateurs prennent en charge et autorisent l'utilisation du script.
Inconvénients : Utilisation non recommandée en HTML4 et XHTML (mais autorisée en HTML5)
Syntaxe :
Résultat :
Utilisez la balise <object>
<object> :
Avantages : pris en charge par tous les principaux navigateurs et prend en charge les normes HTML4, XHTML et HTML5.
Inconvénients : Les scripts ne sont pas autorisés.
Syntaxe :
Résultat :
Utilisez la balise <iframe> 🎜 >
<iframe> :- Avantages : pris en charge par tous les principaux navigateurs et permet les scripts
- Inconvénients : non recommandé Utilisé dans HTML4 et XHTML (mais autorisé en HTML5)
Syntaxe :
Résultat :
Intégrer le code SVG directement dans HTMLDans Firefox, Internet Dans Explorer 9 , Google Chrome et Safari, vous pouvez intégrer du code SVG directement dans HTML.
Remarque : SVG ne peut pas être intégré directement dans Opera.
<!DOCTYPE html> <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>
Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Lien vers un fichier SVGVous pouvez également créer un lien vers un fichier SVG à l'aide de la balise <a> : Créer un lien vers un fichier SVGVous pouvez également lien vers un fichier SVG à l'aide de la balise <a> Lien vers un fichier SVG :
Résultat :Afficher le fichier SVG
