Loading AI tools
format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. De Wikipédia, l'encyclopédie libre
« SVG » redirige ici. Pour les autres significations, voir SVG (homonymie).
Le Scalable Vector Graphics (en français « graphique vectoriel adaptable[1] »), ou SVG, est un format de données ASCII conçu pour décrire des ensembles de graphiques vectoriels 2D et basé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium.
Cet article sur l'informatique doit être recyclé ().
Une réorganisation et une clarification du contenu paraissent nécessaires. , discutez des points à améliorer ou précisez les sections à recycler en utilisant {{section à recycler}}.
| Extensions | .svg, .svgz |
|---|---|
| Type MIME | image/svg+xml, image/SVG |
| Signature | <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg |
| Développé par | |
| Version initiale | |
| Type de format |
Format d'image vectorielle |
| Basé sur | |
| Origine de | |
| Norme | |
| Spécification | |
| Site web |
SVG a été développé à partir de 1999 par un groupe de sociétés au sein du W3C après la mise en concurrence des propositions Precision Graphics Markup Language (PGML) proposé par Adobe à partir de PostScript et Vector Markup Language (VML) proposé par Microsoft à partir de Rich Text Format (RTF). À cette base se sont ajoutées différentes influences, en particulier les feuilles de style en cascade (CSS)[2].
En , le W3C publie la « Scalable Vector Graphics (SVG) 1.0 Specification, W3C Recommendation »[3]. En , le standard évolue vers la recommandation en version 1.1 avec une seconde édition en , qui est la version actuelle.
En parallèle apparaît en la recommandation « Scalable Vector Graphics (SVG) Tiny 1.2 Specification » dont le but est d'être utilisable sur les appareils mobiles (téléphone mobile, assistant personnel…). Il se présente comme un sous ensemble du « SVG 1.1 Full »[4].
La version 2 du langage est en cours de définition au sein du W3C depuis 2012[5],[6], et est stabilisée en version candidate à la validation depuis octobre 2018[7] (en date de mars 2023).
Le SVG est très utilisé dans le monde de la cartographie et du téléphone mobile.[réf. nécessaire]
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[8]), 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 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 : les navigateurs SVG).
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, par exemple pour les traductions.
Le code suivant permet d’afficher un rectangle, un segment, un cercle et un texte :
Code XML
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
<title>Exemple simple de figure SVG</title>
<desc>
Cette figure est constituée d'un rectangle,
d'un segment de droite et d'un cercle.
</desc>
<rect width="100" height="80" x="0" y="70" fill="green" />
<line x1="5" y1="5" x2="250" y2="95" stroke="red" />
<circle cx="90" cy="80" r="50" fill="blue" />
<text x="180" y="60">Un texte</text>
</svg>
|
Image correspondante
|
Il est possible d’utiliser le format SVG pour des images plus complexes (illustration de la Tectonique des plaques).
 |
Le support du SVG est possible à différents niveaux : plugin dans le navigateur, au niveau applicatif (navigateur ou logiciel d’édition SVG), au niveau de l'environnement de bureau (KDE, par exemple) ou du « matériel » (téléphone).
Certains éditeurs visuels sont fournis avec un éditeur en mode texte. Parfois ce mode texte supporte la complétion et la coloration syntaxique pour aider à écrire du SVG.
La création d'un document image vectorielle à partir d'une image raster (bitmap / en mode point) peut s'effectuer de différentes manières qui correspondent à des usages différents. Elle peut être réalisée de manière simple et automatique quand il ne s'agit que de conserver l'apparence d'une image « au trait ». La création d'un document image vectorielle peut nécessiter le recours à un logiciel spécialisé avec, éventuellement, l'intervention d'un opérateur, s'il s'agit de créer un document image vectoriel où les composantes de l'image (les segments composant les tracés par exemple) peuvent avoir des significations différentes. C'est le cas de la vectorisation d'une carte scannée comportant des objets dont il est intéressant de conserver la différenciation : limite de cours d'eau, limites de voirie, limites de forêts, etc.
En ligne :
Des environnements graphiques utilisent le format SVG : X.Org, GNOME et KDE, ainsi que de nombreux téléphones cellulaires, tels que les Sony Ericsson. Acorn RISC OS incluent également un support natif d'un format vectoriel nommé Acorn Draw, proche de SVG.
Le rendu SVG est intégré dans HTML5 (balises <svg> et </svg>) et est supporté nativement par la plupart des navigateurs Web depuis 2010[19].
Les plugin pour SVG ne sont plus maintenus actuellement, du moins pour le navigateur Internet Explorer. Seul reste maintenu le plugin KSVG.
La mise en œuvre du rendu SVG pour les périphériques mobiles (PDA, téléphones portables) est faite de façon native (Ikivo, Bitflash Adobe), ou par logiciel de navigation (navigateurs Java Sun, Opera Mini et iPhone Safari).
La norme supportée par ces périphériques dépend du fabricant de téléphone et de la version installée. La plupart des versions supportent la norme SVG Tiny 1.1 et parfois 1.1+ avec le support de module annexe (gradient et opacité).
Nokia supporte le rendu SVG en interne pour ses plates-formes des Nokia S60 ou en s'appuyant sur Java et les normes JSR 226, Java ME pour la plate-forme des S60 (3e édition Pack 1). D'autres séries comme le 6280 supportent aussi le SVG.
La plupart des téléphones Sony Ericsson phones commencent à supporter le SVG Tiny 1.1 comme le K700 et le 1.1+ comme le K750 (pl), C905, W890 (en) et W995.
Les périphériques supportant la plate-forme java ME et la norme JSR 226 supportent aussi un rendu SVG 1.1+.
SVG est aussi supporté par des modèles fabriqués par Motorola, Samsung, LG ou Siemens, Sony.
La norme SVG ne permet pas de créer des points d'articulations[pas clair], tels des nœuds dans un graphe. La notion de pointeur n'existe pas en SVG[pas clair], ce qui rend la description de scènes dynamiques complexe.
SVG n'a pas hérité de toutes les propriétés de son parent direct VML, tel le dégradé « GradientTitle », l'ombre de type « Perspective », l’« Extrusion » 3D, l'auto stroke-fill, l'auto fill-darken, l'auto fit text-ajust, etc.. Des alternatives factices existent, mais elles rendent les fichiers SVG plus lourds et plus lents à l'affichage.
Enfin, SVG n'est en majorité supporté par les navigateurs que dans sa version 1.1, ce qui ne permet pas d'employer de contrôle de flux (flowRoot, flowRegion) et ne permet donc pas par exemple de faire du texte qui s'adapte à son conteneur et qui effectue des retours à la ligne automatiquement.
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
