SVG dans les Pages HTML

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.

Somaire

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 :

<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

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="http://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.

chapitre précédent

sommaire

chapitre suivant

Par carabde 20 Avril 2014