SVG (Scalable Vector Graphics)

Démarrer avec SVG

SVG (pour Scalable Vector Graphics en anglais, soit « graphiques vectoriels adaptables ») est un langage construit à partir de XML et qui permet de décrire des graphiques vectoriels en deux dimensions.

Il s'agit d'un format texte, standardisé de façon ouverte pour le Web, pour décrire des images qui peuvent être affichées nettement à n'importe quelle taille et qui est conçu pour fonctionner avec les autres technologies web standard comme CSS, DOM, JavaScript, et SMIL. D'une certaine façon, SVG est aux graphiques ce que HTML est au texte.

Les images SVG et leur comportement sont définies dans des fichiers texte XML. Cela signifie qu'on peut rechercher dans ces textes, les indexer, réaliser des opérations scriptées, les compresser. De plus, cela signifie aussi qu'on peut en créer ou en éditer avec n'importe quel éditeur de texte ou avec des logiciels de dessin.

Contrairement aux images matricielles classiques aux formats JPEG ou PNG, les images SVG peuvent être affichées à n'importe quelle taille sans perte de qualité. De plus, on peut les localiser en adaptant le texte qu'elles contiennent, sans avoir nécessairement besoin d'un éditeur graphique. Avec des bibliothèques logicielles adaptées, les fichiers SVG peuvent être traduits à la volée.

SVG a été développé par le W3C (World Wide Web Consortium) depuis 1999.

Voir aussi le tutoriel SVG.

Documentation

Référence des éléments SVG

Des informations à propos de chaque élément SVG.

Référence des attributs SVG

Des informations à propos de chaque attribut SVG.

Référence du DOM SVG

Des informations quant à l'API DOM exposée par SVG, qui permet des interactions avec JavaScript.

Appliquer des effets SVG à du contenu HTML

SVG peut fonctionner avec HTML, CSS, et JavaScript. On pourra utiliser SVG pour améliorer de façon progressive une page ou une application web.

Outils

Exemples