Comment incérer un graphique SVG dans une Page HTML

SVG dans les Pages HTML

Ce cours est distiné a ceux qui veulent apprendre comment les graphiques SVG peuvent être incorporés dans des pages HTML de deux manière
Les graphiques SVG peuvent être incorporés dans des pages HTML de deux manière
1-avecles balises <embed>, <object>, ou <iframe>.
2- Le code SVG peut être incorporé directement dans des pages HTML.
Vous pouvez aussi créer un lien au fichier SVG comme tout autre fichier.

chapitre précédent

sommaire

chapitre suivant

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 :

Incorporer SVG avec la balise <object>

Incorporer SVG avec la balise <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

Sélectionner 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 :

Sélectionner 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.