Le format d’images SVG (Scalable Vector Graphics) est un format de dessin vectoriel parfait pour des besoins graphiques légers.
Regardons d’un peu plus près les avantages de SVG, les outils pour le générer, et les différentes manières de l’intégrer dans une page web.
Les bases du format d’images SVG
Le gros avantage du format SVG est qu’il ne stocke que les informations décrivant les formes dessinées, à savoir les coordonnées spatiales, les couleurs, et les effets appliqués.
- Cela lui permet d’être :
- bien plus léger que des formats JPG, GIF, et PNG qui stockent les informations pixel par pixel,
- étirable sans subir de perte de qualité, contrairement aux formats pré-cités,
- présent dans le DOM, et par conséquent manipulable par JavaScript,
- stylisable via CSS.
SVG est un format ouvert et libre.
Etant basé sur le langage XML, il est éditable dans un simple éditeur de texte classique, mais pour voir le rendu du code, et dessiner sans écrire une ligne de code, il est nécessaire d’utiliser un outil de dessin vectoriel, dont les principales célébrités sont Inkscape (gratuit) et Adobe Illustrator (payant).
Google propose également son propre outil :
svg-edit.googlecode.com
Comment procéder à l’intégration du format d’images SVG à une page web ?
Passons maintenant en revue les différentes façons de procéder.
La balise object
La balise HTML4 object, si elle n’est pas spécifiquement conçue pour l’intégration du SVG, peut être utilisée pour cela.
<object type="image/svg+xml" data="exemple.svg" width="150" height="150"> …</object>
La balise svg
En HTML5, une balise spécifique est créée pour importer du contenu SVG dans une page web.
<svg width="150" height="150">
...
</svg>
Par CSS
Le format SVG peut être utilisé comme ressource pour une image de fond en CSS.
.exemple {
background : url("exemple.svg") no-repeat;
}
Il est également possible d’utiliser des fontes SVG via @font-face.
Support du format d’images SVG par les navigateurs
A l’heure actuelle, les fonctionnalités de base sont bien supportées, comme en atteste le site caniuse.com.
Dans un prochain article, nous rentrerons plus en détail dans la structure du format, ainsi que les formes qu’il est possible de créer avec SVG.
Références :
http://www.w3.org/TR/SVG/
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
http://svg-wow.org/
