SVG est une spécification de documents pour décrire des graphiques 2D à dimension variable, en XML.
Il est compatible avec XML 1.0.
On l'utilisera principalement pour faire des pages Web graphiques en remplacement de Flash ou en combinaison avec XUL. Il existe des frameworks pour réaliser des applications Web en SVG.

Sommaire

• Pourquoi utiliser SVG?
• Comment utiliser SVG?
• Fonctions principales de SVG.
• Format du fichier.
• Comment programmer des documents SVG?
• Composants de SVG.
• SVG et XML.
• Convertir SVG.
• Plus d'informations.

Pourquoi utiliser SVG?

SVG permet de placer du graphisme dans une page Web ou un document local qui soit en interaction avec des données textuelles. Une page SVG peut être construite à partir d'une base de données, et il peut être consulté par un moteur de recherche. Vous pouvez traduire des données numériques XML en graphiques par une transformation XSL.
Une page SVG est adaptable en taille, et interactive. Vous pouvez ainsi montrer une ville, ou un immeuble et permettre à un utilisateur de les visiter en choisissant des endroits précis.
SVG est un standard défini par le World Web Consortium et peut être utilisé librement par les auteurs ou utilisateurs, sans paiement de licence.

Comment utiliser SVG?

Un fichier SVG est un document XML dont les balises sont propres au graphisme. Il est affiché par un navigateur ordinaire avec le plug-in approprié.
SVG peut être utilisé:
- dans une seule page web entière.
- inséré dans la page avec les balises d'inclusion: img src, object, applet, iframe.
- lié avec la balise de lien <a>.
- inclus par une propriété CSS ou XSL ou en XHTML.
Exemple:
<embed src="webmasting.svg" type="image/svg+xml" width="200" height="100">

Fonctions principales de SVG

• transformations
• couleurs, opacité, gradients, textures.
• remplissage: peindre le contenu d'une forme.
• stroke: peindre le pourtour d'une forme ou d'un texte.
• rognure (couper les parties dépassant les bords).
• effets de filtres
• patron d'objets
• insertion de symboles ou images aux coordonnées.
• interactivité, gestion d'évènements
• dynamique
• scripting
• animation

Format du fichier

Un fichier SVG doit avoir l'extension ".svg".
Un fichier SVG compressé, au format zip doit avoir l'extension ".svgz" .
Comme on peut enregistrer une image prise dans une page web, on peut enregistrer une image SVG, sous .svg or .svgz.

Un fichier SVG n'a pas de doctype mais plutôt une balise svg informative comme celle-ci:

   <svg version="1.1"
        baseprofile="full"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:ev="http://www.w3.org/2001/xml-events">

Comment programmer des documents SVG?

Pour construire un document SVG, il vous faut un canevas. Batik en fournit un en Java nommé "SVGCanvas2D" qui convertit vos images en SVG.
Si vous voulez construire visuellement un document SVG, il vous faut un composant pour l'afficher et permettre à l'utilisateur d'interagir avec le contenu (insérer des objets, rotation, placer du texte, etc.) "JSVGCanvas" est un composant Java pour le faire.
Il vous faut aussi manipuler le document SVG à partir d'un langage de script avec une librairie DOM. DOM (Document Object Model) est une représentation orientée objet du document. Des évènements peuvent être assignés ensuite aux éléments SVG.
Tous ces modules sont fournis par Batik pour les programmeurs Java.

Composants de SVG

Types de données

Un document SVG est fait de:

• Formes graphiques vectorielles
• Images
• Textes
• Conteneurs d'autres éléments
• Propriétés de style

Les éléments

- Canvas: une surface où dessiner.
- Viewport: une région rectangulaire dans un canvas.
- Use: un patron.
- Property: un paramètre de rendu du document.
- Formes graphiques: rect, circle, ellipse, line, polyline, polygon.
- Image.
- Texte
- Symboles: objet réutilisable comme les sumboles de diagrammes et électroniques.
- Container, contient d'autres éléments:

• g: a container utilisé pour grouper des éléments graphiques, utilisé comme canevas partiel.
• svg: un document.
• switch: une liste d'éléments alternatifs avec conditions pour un sélecter un.
• clipPath: éléments masqués.
• mask: utilisation d'objets comme masque.
• pattern: une texture.
• a: un lien.

SVG et XML

Xml peut être traduit en SVG avec une définition XSL. Cela permet à des documents générés par une application, des statistiques par exemple, d'être reproduit sous forme graphique.
Il est compatible avec HTML 4.0 et XHTML 1.0
Les extensions XML suivantes peuvent être utilisées dans des documents SVG:

• XLink: pour le référencement.
• XPointer: syntaxe pur référencé un élément.
• Stylesheet: style soit sous CSS 2 ou XSL.
• DOM: inclus en SVG et compatible avec DOM 2 plus la gestion d'évènements.
• Incorpore et étend SMIL, le langage d'animation.

Convertir SVG en GIF, PNG, JPG ou autre format d'image

Utiliser Batik

Il suffit d'exporter l'image dans le format voulu. Le rendu n'est pas parfait.

Faire une copie d'écran

1) Placer l'écran dans une résolution assez élevée pour afficher l'image entière. (Sous Windows 9x, les tweakui peuvent aider à changer la résolution).
2) Utiliser un outil de capture d'écran comme IrfanView ou XnView ou un programme spécialisé comme MWSnap, et lancer la capture en tâche de fond pour la fenêtre et le client courant.
3) Afficher le fichier SVG avec un navigateur (le plug-in d'Adobe doit être installé) et presser la touche de capture.
4) Sauver la capture, de préférence comme fichier PNG.

Demo simple: Tetris

Voir le source, en JavaScript et SVG. Requiert Firefox 1.5.

Plus d'informations

Voir aussi

• Canvas. Les graphismes sur Canvas se font en SVG.
• SVG ou Canvas? Quel support choisir? (Anglais).

Démonstrations

• Plusieurs démos.
• Exemples utilisant plusieurs éditeurs ou autres programmes.
• Adobe et SVG.

Références

• W3C. La spécification officielle.
• Le projet Mozilla pour SVG.
• SVG Basics.

Outils

• Batik Un ensemble de modules pour générer, afficher et convertir SVG, en Java.
• SVG Web. Une extension qui ajoute le support SVG aux navigateur qui ne l'implémentent pas nativement, incluant Internet Explorer et Firefox.
• FOP. Un outil en java pour convertir SVG en PDF.
• Raphael. Bibliothèque JavaScript pour réaliser des graphiques.
• Inkscape. Editeur open source pour Windows, Linux, Mac.