Scalable Vector Graphics - Définition

Introduction

Scalable Vector Graphics
Logo simple de SVG
Extension	.svg
Type MIME	image/svg+xml
Développé par	World Wide Web Consortium
Type de format	Format d'image vectorielle
Extension du	XML
Spécification	Format ouvert
modifier

Différence entre les images matricielles et vectorielles.
Les images vectorielles peuvent être agrandies à l’infini.

Scalable Vector Graphics qui, traduit de l’anglais, signifie « graphique vectoriel adaptable », et couramment abrégé par SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium.

SVG : le dessin et les cartes

Le SVG est très utilisé dans le monde de la cartographie et du téléphone portable.

Caractéristiques

Les coordonnées, dimensions et structures des objets vectoriels sont indiquées 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 de caractères à utiliser. Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins (paths), qui utilisent les courbes de Bézier et permettent ainsi d’obtenir presque n’importe quelle forme. Le remplissage peut se faire à l’aide de dégradés (gradients) de couleurs de motifs (pattern) qui sont des objets SVG quelconques, ou de filtres (appelés shaders en imagerie 3D). On peut également appliquer des motifs le long des chemins (markers) et utiliser les fonctions de remplissage. Le canal alpha, pour la transparence, est géré à tous les niveaux.

Comme dans tout document XML, les objets sont organisés sous forme d’arbre. Le format permet l’intégration d’animations, ou la manipulation des objets graphiques par programmation, notamment grâce à des scripts qui peuvent être intégrés dans le SVG.

SVG peut être inclus dans d’autres documents XML, comme par exemple des documents XHTML ou des documents XML devant être traités par XSL-FO. Respectant la norme XML, une image SVG peut également être manipulée par l’intermédiaire du modèle Document Object Model (DOM).

SVG peut être visualisé nativement avec certains navigateurs web, ou avec un plug-in (voir : ).

Certains environnements graphiques l’utilisent pour la gestion et l’affichage d’icônes, et d’interface, comme X.org, GNOME, KDE ou certains téléphones portables.

Des logiciels graphiques permettent de modifier facilement chaque forme, par exemple en déplaçant des points, ou en changeant la couleur des traits, … Il en est de même pour le texte qui peut être modifié sans toucher aux formes, ce qui facilite grandement la modification de schémas.

Exemple

Le code suivant permet d’afficher un rectangle, un segment, un cercle et un texte (précisés ici en tailles absolues et non relatives, donc pas à proprement parler scalable) :

       version="1.0" encoding="utf-8"?>               xmlns="http://www.w3.org/2000/svg"          version="1.1"         width="300"         height="200">        >Exemple simple de figure SVG>        >          Cette figure est constituée d'un rectangle,           d'un segment de droite et d'un cercle.        >                            width="100" height="80"           x="0" y="70"           fill="green" >                   x1="5" y1="5"           x2="250" y2="95"           stroke="red" >                   cx="90" cy="80"           r="50"           fill="blue" >          x="180" y="60">           Un texte         >      >