SVG, réaliser des graphismes en XML pour le Web

SVG, Scalable Vector Graphic, est une spécification de documents pour décrire des graphiques 2D vectoriels en XML.
Il est compatible avec XML 1.0.
On l'utilisera principalement pour faire des pages Web graphiques en remplacement de Flash. Il existe des frameworks pour réaliser des applications Web en SVG.

Sommaire
tetris SVG
Le jeu Tetris en SVG

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.

Par rapport à Canvas, SVG convient mieux comme format pour des graphismes produits avec un logiciel de dessin ou autre, à intégrer dans une page web, tandis que Canvas convient pour du graphisme créé dynamiquement dans la page au moment ou elle s'affiche.

Par rapport à une image bitmap, SVG à l'avantage du redimensionnement sans perte en définition, et permet l'interaction avec l'utilisateur.
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é:

Exemple:

<embed src="webmasting.svg" type="image/svg+xml" width="200" height="100">

Fonctions principales de SVG

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:

Les composants d'un document SVG

SVG vs. Canvas

Comme on peut le voir dans les exemples plus loin:

On génère directement le contenu de Canvas avec du code JavaScript dans la page. Mais on peut générer automatiquement un contenu SVG à partir de données prises dans une base de donnée pour les convertir en graphique.
Ou encore, on peut réaliser un dessin avec Inkscape et produire un fichier SVG qui sera intégré dans une page HTML.

Les balises SVG peuvent contenir des balises HTML. Une balise de lien <a> par exemple. Ce n'est pas le cas pour Canvas.

On peut réaliser un jeu aussi bien en SVG qu'avec Canvas.

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:

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 moderne et déclencher la capture.
  4. Sauver la capture, de préférence comme fichier PNG.

Utiliser FOP

FOP est un script écrit en java créé par Apache pour convertir SVG en PDF.

Hello World! en SVG

Exemple d'un programme minimal, fonctionnant sur tous les navigateurs modernes.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg width="220px" height="120px"  xmlns="http://www.w3.org/2000/svg">
    <g>
        <text font-size="32"  x="25" y="60">
           Hello, World!
        </text>
    </g>
</svg>

SVG dans une page HTML

Vous pouvez insérer le code suivant dans une page HTML, cela s'affichera parfaitement...

<svg width="220px" height="120px">
     <text font-size="32"  x="25" y="60" fill="green">
            Hello, World!
    </text>
</svg>
Hello, World!

Demo simple: Tetris

Charger le fichier SVG pour lancer la démonstration.

Vous pouvez regarder le source de la page pour voir le code ou la télécharger. C'est un fichier SVG et JavaScript.
Le code SVG sert surtout à offrir une surface graphique tout comme le fait la balise Canvas, et des fonctions de dessin, l'essentiel du programme est en JavaScript.

Plus d'informations et démos

Démonstrations

Palais de Trajan

Références

Bibliothèques

Outils

© 2005-2017 Xul.fr