Langage SVGSVG
Scalable Vector Graphics
Attention de ne pas confondre le format SVG dont-il est question ici, avec les fragments SVG en incorporation HTML5 (ou SVG inline)
Le Scalable Vector Graphics (SVG) est une spécification du W3C. C'est un format de fichier basé sur XML permettant de décrire des ensembles de graphiques vectoriels (il peut donc remplacer Flash).
Le format vectoriel est un format basé sur des coordonnées dans un repère orthonormé. Il s'oppose au format matriciel que sont les JPG, GIF et autre PNG qui sont construites par remplissage de surface, pixel par pixel.
Les coordonnées, dimensions et structures des objets vectoriels sont indiqués sous forme numérique dans le document XML. Un système spécifique de style (CSS ou XSL) permet d'indiquer les couleurs et les polices d'écriture à utiliser.
Pour créer des fichiers SVG, on utilise un logiciel de vectorisation comme Adobe Illustrator ou le gratuit Inkscape.
Comment utiliser SVG?
Pour être visualisé sur le web, le fichier SVG est enchâssé (embed) dans un fichier HTML.
Si vous utilisez le navigateur Internet Explorer, le plug-in "SVGWiever" d'Adobe est nécessaire pour afficher ce fichier SVG. Téléchargeable gratuitement (2Mo) à l'adresse suivante: http://www.adobe.com/svg/viewer/install/main.html. A noter qu'Adobe a intégré SVGWiever depuis la version 5 d'Acrobat Reader.
Un fichier SVG n'a pas de doctype mais plutôt une balise svg informative comme la deuxième ligne ci-dessus.
Le format vectoriel est un format basé sur des coordonnées dans un repère orthonormé. Il s'oppose au format matriciel que sont les JPG, GIF et autre PNG qui sont construites par remplissage de surface, pixel par pixel.
Les coordonnées, dimensions et structures des objets vectoriels sont indiqués sous forme numérique dans le document XML. Un système spécifique de style (CSS ou XSL) permet d'indiquer les couleurs et les polices d'écriture à utiliser.
Pour créer des fichiers SVG, on utilise un logiciel de vectorisation comme Adobe Illustrator ou le gratuit Inkscape.
Comment utiliser SVG?
Pour être visualisé sur le web, le fichier SVG est enchâssé (embed) dans un fichier HTML.
Si vous utilisez le navigateur Internet Explorer, le plug-in "SVGWiever" d'Adobe est nécessaire pour afficher ce fichier SVG. Téléchargeable gratuitement (2Mo) à l'adresse suivante: http://www.adobe.com/svg/viewer/install/main.html. A noter qu'Adobe a intégré SVGWiever depuis la version 5 d'Acrobat Reader.
Contenu du fichier index.htm (Voir cet exemple)
<html>
<head><title>Exemple d'affichage de fichier SVG</title></head>
<body>Voici mon fichier SVG:<br />
<embed src="mesrectangles.svg" type="image/svg+xml" width="300" height="200" />
</body>
</html>
<html>
<head><title>Exemple d'affichage de fichier SVG</title></head>
<body>Voici mon fichier SVG:<br />
<embed src="mesrectangles.svg" type="image/svg+xml" width="300" height="200" />
</body>
</html>
Contenu du fichier mesrectangles.svg
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1" baseProfile="full" x="0" y="0" width="300" height="200" id="svg2">
<title>Rectangles</title>
<defs id="defs4" />
<g id="layer1">
<rect width="300" height="120" x="0" y="20" fill="green" id="rect1306" />
<rect width="80" height="150" x="20" y="30" fill="red" id="rect1308" />
<rect width="140" height="80" x="50" y="50" fill="blue" id="rect1310" />
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1" baseProfile="full" x="0" y="0" width="300" height="200" id="svg2">
<title>Rectangles</title>
<defs id="defs4" />
<g id="layer1">
<rect width="300" height="120" x="0" y="20" fill="green" id="rect1306" />
<rect width="80" height="150" x="20" y="30" fill="red" id="rect1308" />
<rect width="140" height="80" x="50" y="50" fill="blue" id="rect1310" />
</g>
</svg>
Un fichier SVG n'a pas de doctype mais plutôt une balise svg informative comme la deuxième ligne ci-dessus.
Il existait d'autres langages de description graphique avant le SVG, comme le VML ou le PGML.
Precision Graphics Markup Language (PGML)
Le PGML est un langage graphique basé sur le XML (eXtensible Markup Language) et sur les formats PDF et PostScript, permettant d'insérer des images vectorielles dans les pages Web.
Le langage PGML, proposé par Adobe et appuyé par IBM, Netscape et Sun, se veut un concurrent du langage VML (Vector Markup Language). Une de ses caractéristiques est de permettre la conversion de documents PDF et PostScript en XML.
Généralement on définit SVG = PGML + VML
Plus d'infos sur Wikipedia.
Precision Graphics Markup Language (PGML)
Le PGML est un langage graphique basé sur le XML (eXtensible Markup Language) et sur les formats PDF et PostScript, permettant d'insérer des images vectorielles dans les pages Web.
Le langage PGML, proposé par Adobe et appuyé par IBM, Netscape et Sun, se veut un concurrent du langage VML (Vector Markup Language). Une de ses caractéristiques est de permettre la conversion de documents PDF et PostScript en XML.
Généralement on définit SVG = PGML + VML
Plus d'infos sur Wikipedia.
Intégrer un SVG dans sa page Web
Il y a différentes façon d'intégrer du SVG dans sa page Web :- On peut intégrer du SVG dans sa page Web, en utilisant l'élément object :
<object data="monrectangle.svg" width="100%" height="400px" type="image/svg+xml"></object> - On peut intégrer du SVG dans sa page Web en tant que type de document complet (avec une extension de fichier .svg) comme cet exemple de page SVG
- Dans des fichiers XML ou XHTML
- En tant qu'image CSS : SVG Gradient Background Maker
- Et enfin, en utilisant les éléments HTML comme img, embed, iframe, ou frame
Sites utiles
|
• W3c (VO) • SVG.org (VO) • XUL (VF) • Wikipedia (VF) |
• SVGFR (VF) • XMLFR (VF) • Adobe (VO) • SVGWiever (VO) • SVGMap (VF) |
