OUJOOD.COM
HTML5 cours tutorial SVG
Incorporer SVG avec la balise <embed>
Avantage : prise en charge dans tous les principaux navigateurs et
permet l'écriture de scripts
Inconvénient : déconseillée dans HTML4 et XHTML (mais autorisée dans
HTML5)
Syntaxe :
|
<embed src="circle.svg" type="image/svg+xml" /> |
Incorporer SVG avec la balise <object>
<object> :
Avantage : prise en charge dans tous les principaux navigateurs et est
la norme HTML4, XHTML et HTML5
Inconvénient : n'autorise pas les scripts
Syntaxe :
|
<object data="circle.svg" type="image/svg+xml"></object> |
Incorporer SVG avec la balise <iframe>
<iframe> :
Avantage : prise en charge dans tous les principaux navigateurs
Inconvénient : génère une bordure de fenêtre sans style spécifique et
est non autorisé en HTML4/XHTML strict DTD
Syntaxe :
|
<iframe src="circle1.svg"></iframe> |
Intégrer le code SVG directement dans le code HTML
Dans Firefox, Internet Explorer 9, Google Chrome, Opera et Safari, vous
pouvez également intégrer le code SVG directement dans le code HTML :
Exemple
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <title> Intégrer le code SVG directement dans le code HTML</title> </head> <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="#00fe00" /> </svg> </body> </html>
Lien vers un fichier SVG
Vous pouvez également lier à un fichier SVG avec la balise <a> :
<a href="circle1.svg">View SVG file</a>
Mettre un graphique SVG comme ancre d’un lien
Vous pouvez aussi utiliser l’image créée en SVG comme ancre d’un lien
Exemple :
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <title> Intégrer le code SVG directement dans le code HTML</title> </head> <body> <a href="https://www.oujood.com/"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#00fe00" /> </svg></a> </body> </html>
Formes de base en SVG
SVG prend en charge l'ensemble des éléments de la forme de base suivan Formes de base en SVG
SVG contient l'ensemble les éléments de forme de base suivants :
Rectangles (y compris les coins arrondis en option), créés avec
l'élément 'rect' ,
Cercles, créés avec l'élément 'circle' ,
Ellipses, créés avec l'élément 'ellipse' ,
Lignes droites, créés avec l'élément 'line' ,
poly lignes, créés avec l'élément 'polyline' , et
Polygones, créés avec l'élément 'polygon' .
Nous étudierons ces formes en détail dans les prochains chapitres.