Easy-Micro


LANGAGE Langage SVG
SVG

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.

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>

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>

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.

Intégrer un SVG dans sa page Web

Il y a différentes façon d'intégrer du SVG dans sa page Web :
  1. 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>
  2. 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
  3. Dans des fichiers XML ou XHTML
  4. En tant qu'image CSS : SVG Gradient Background Maker
  5. 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)

Pour aller plus loin...


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 23 février 2019 - Semaine 08 - Saint Lazare (Demain: Saint Modeste)
Aujourd'hui, c'est l'anniversaire de Louis Bertignac (1954-65 ans), musicien français (guitariste du groupe de rock français Téléphone). Autre 23 février: 1468 - Mort de Gutenberg, inventeur de l'imprimerie.
Haut de page Easy-Micro