oujood.com

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.

chercher |


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="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.

Par carabde 20 Avril 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web