SVG

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

SVG veut dire Scalable Vector Graphics (Graphiques Vectoriels Adaptables) et est un standard W3C (en XML), spécifiquement conçu pour être utilisé sur le web. SVG s’intègre bien aux autres formats W3C.

Les graphiques SVG permettent une plus grande souplesse de manipulation que les graphiques bitmaps (dont la qualité d'affichage dépend de la résolution grahique) car ils sont mathématiquement codés et peuvent être agrandis ou déformés sans aucune perte de qualité.

Voir aussi:

• Tutoriel SVG statique
• Tutoriel SVG interactif et animé avec SMIL
• Tutoriel SVG interactif et animé avec DOM

Spécification: http://www.w3.org/TR/SVG/

De la spécification: "SVG est un langage de description de graphiques bi-dimensionnels en XML. SVG admet trois types d’objets graphiques : des contours graphiques vectoriels (par exemple, des tracés consistant en lignes droites et courbes), des images et du texte. Les objets graphiques peuvent être regroupés, stylés, transformés et composés dans des objets précédemment rendus. L’ensemble de fonctions comprend des transformations imbriquées, des tracés de rognage, des masques basés sur la couche alpha et des objets de gabarit.

Les dessins SVG peuvent être interactifs et dynamiques. On peut définir et déclencher des animations, soit déclarativement (i.e., en incorporant les éléments d’animation SVG dans un contenu SVG), soit via un script.

Utilisations les plus intéressantes (actuellement):

• visualisation de contenus (économiques, processus, cartes, etc.)
• interface utilisateurs pour certains types d’applications Internet
• dessins statiques, animés ou même interactifs dans le monde de l’éducation
• animations multimédia de contenus formalisables (chimie, maths, etc.)

Pourquoi SVG ?

Avantages des images vectorielles

• rendering correct dans multiples média et à différentes tailles (adaptation)
• possibilité d’appliquer des styles (adaptation 2)
• possibilité d’indexer le texte qui fait partie du graphisme
• taille de l’image (après compression en tout cas)
• facilités d’édition: les éléments sont des objets, hiérarchies, etc.

Avantages particuliers de SVG (par rapport à Flash et similaires)

• insertion dans le monde XML/XHTML
  • génération de SVG avec XSLT/PHP etc. à partir de données XML
  • Intégration dans XHTML, viewers SMIL etc.
  • Intégration dans HTML5
  • utilisation de CSS
  • scriptable avec JavaScript via DOM (standard)
• possibilité de partager du code, de travailler directement avec le format
• modèle de couleurs sophistiqué, filtres comme dans photoshop
• une spécification assez claire
• meilleurs capacités graphiques dans l’ensemble, voir:
• http://www.carto.net/papers/svg/comparison_flash_svg.html

Outils

Validation en ligne

• http://validator.w3.org

Viewers

• Navigateurs Firefox 1.5+, Opéra 9+ ou Safari 3+
• Le meilleur navigateur actuel pour SVG est Opera 10 (oct. 2009)
• Adobe avait produit un bon plugin pour Mozilla/IE capable d'afficher du SVG dynamique. Toutefois, ce plugin ne marche plus avec les navigateurs modernes
• http://www.adobe.com/svg/viewer/install/beta.html (V. 6a difficile à trouver

Editeurs

• Prenez Inkscape (gratuit) pour faire des dessins statiques
• OpenOffice "Draw", Illustrator etc. permettent de sauver du SVG
• Site Spinner Pro ? pour des dessins dynamiques
• Delineatepour convertir des images bitmap en vectoriel au format SVG.On obtient le code source avec un clic droit sur l'image au format SVG obtenue.

SVG avec un éditeur XML

Si vous désirez éditer SVG à la main, on conseille d’installer la DTD dans votre éditeur XML si c’est pas fait.

• SVG 1.0 et 1.1. sont inclu dans Exchanger lite

Pour certains éditeurs, il faut d'abord trouver la DTD et qui est à la fin de la spécification officielle et ensuite installer:

• SVG 1.0
• SVG 1.1 (conseillé)

Exemple: Installation d’une DTD dans Xemacs:

• Il faut copier le fichier avec la DTD qq part sur votre système (de préférence au même endroit que le CATALOG.
• Ensuite éditer le fichier ...XEmacs/xemacs-packages/etc/psgml-dts/CATALOG qui se trouve dans l’installation Xemacs.
• Ajouter une ligne qui associe un identificateur public avec un fichier

Exemple Unix: PUBLIC "-//W3C//DTD SVG 1.0//EN" /web/lib/xml/dtd/svg10.dtd
Exemple Dos:  PUBLIC "-//W3C//DTD SVG 1.0//EN" svg10.dtd

• N’oubliez pas de dire à Emacs que *.svg est associé à XML, éditez le fichier ~/.xemacs/init.el et ajoutez:

(setq auto-mode-alist
   (append ’(("\.svg"  . xml-mode)) auto-mode-alist))

Note: Votre home (~) sous windows est qq. part dans c:\Documents and Settings\xxxx\. Alternativement on peut aussi insérer cette instruction dans XEmacs\site-packages\lisp\site-start.el

Mime-types que votre serveur doit définir (!)

• Lorsque votre navigateur n’affiche pas un fichier svg provenant d’un serveur, il faut configurer les serveur web avec les mime-types suivants.

*.svg image/svg+xml

*.svgz image/svg+xml

Structure d’une page SVG

Un page SVG valide doit contenir des entêtes XML ainsi qu'un namespace declaration pour la balise racine "svg".

Voici un exemple SVG 1.0

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
         "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">

 <!-- un petit rectangle avec des coins arroundis  -->
 <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
       style="fill:#CCCCFF;stroke:#000099"/>

 <!-- un texte au meme endroit -->
 <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
  HELLO cher visiteur 
 </text>
</svg>

Voir: hello-svg.svg

Voici un exemple SVG 1.1

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Four separate rectangles
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

Voir: View this example as SVG

Les groupes

il est possible de grouper des entités SVG en les encadrant par des balises

<g></g>

Les filtres

il est possible d'ajouter différents filtres aux objets SVG, comme un flou gaussien (feGaussianBlur), un éclairage diffus(feDiffuseLighting), un effet tuile(feTile), etc.

Il faut d'abord définir l'effet. Par exemple pour le flou gaussien:

            <desc>définition du flou du point</desc>
            <defs>
                <filter id="MyFilter">
                    <feGaussianBlur stdDeviation="4" result="blur"/>
                </filter>
            </defs>

puis utiliser cette cette référence lors de la définition de l'objet:

<g id="cercle" height="67" width="67" filter="url(#MyFilter)" repeatCount="indefinite">

"#myFilter" étant la référence à la définition du flou.

Une suite d'événements complexes

A la place de définir l'animation selon des temps en secondes:

                <rect id="carre" height="67" width="67" stroke-width="5" stroke="#000000" fill="#ffffff">
                    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/> 
                    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>
                    <animateColor attributeName="fill" attributeType="CSS" from="#ffffff" to="red" begin="2s" dur="4s" fill="freeze" />
                </rect>

il est possible de définir des séquences d'événements, en faisant démarrer un événement à la fin de l'événement précédent avec

begin="événementprécédent.end"

Exemple:

                <rect id="carre" height="67" width="67" stroke-width="5" stroke="#000000" fill="#ffffff">
                     <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/> 
                 </rect>

                <rect id="carre2" height="80" width="23" stroke-width="5" stroke="#000000" fill="#ffffff">
                     <animate attributeName="x" attributeType="XML" begin="carre.end" dur="6s" fill="freeze" from="300" to="0"/> 
                 </rect>

De cette manière, il est possible de faire des boucles d'événements complexes.

Liens

Spécification:

• http://www.w3.org/TR/SVG/
• http://www.yoyodesign.org/doc/w3c/svg1/index.html (SVG 1.0 en français)

Ressources:

• SVG links (EduTechWiki Anglais)