Le langage SVG
Didier Courtaud
25 Janvier 2000

Plan

Le langage SVG

DESS Ingénierie Documentaire et Multimédia

Module M4A

Préambule

Ce cours s'appuie sur le 7 ème Working Draft publié par le WWW Consortium le 3 Décembre 1999
( http://www.w3.org/TR/1999/12/WD-SVG-19991203/index.html )

Bien que celui-ci soit le Last Call Working Draft, il est possible que des modifications soient apportées à cette spécification avant
la Recommandation finale

Les exemples utilisés dans ce cours sont ceux fournis pour une part par IBM

dans le répertoire samples de la version 0.3c du produit SVGView d'IBM et ceux
figurant dans la spécification du 3 décembre 1999 du W3C

Les graphiques utilisés dans ce cours sont ceux produits par la version 0.3c

de SVGView lors du chargement des exemples d'IBM pré-cités ou ceux
présentés dans la spécification du 3 décembre 1999 du W3C

Introduction

La nécessité d'avoir des graphiques

vectoriels ( pour économiser de la bande passante )
retaillables ( pour pouvoir facilement les placer dans une mise en page

et pour pouvoir les zoomer )

a conduit le W3 Consortium a créer un Groupe de travail en 1998

Ce groupe rassemble des représentants de Microsoft, Autodesk, Adobe, IBM, Sun,

Netscape, Xerox, Apple, Corel, HP,ILOG entre autres

En Octobre 1998, il publie une liste de SVG requirements pour commentaire public
Après amendement, cette liste a servi à l'élaboration de la spécification
Premier draft : 5 Février 1999
Septième draft : 3 Décembre 1999

Introduction : présentation générale

SVG est un langage de description de graphiques 2D en XML
Il permet trois types d'objets graphiques

des formes vectorielles ( traits, courbes, .. )
des images
du texte

Les objets graphiques peuvent etre groupés, transformés, composés dans d'autres objets et recevoir des attributs de style
Les graphiques SVG sont interactifs et dynamiques. Leur animation peut etre définie soit à l'intérieur des fichiers SVG soit dans un langage de script externe
SVG posséde une interface avec DOM pour que l'animation puisse accéder à tous les éléments et les attributs

SVG est relié aux standards suivants du W3C :

XML
XML-NS
XLINK
Xpointer
XSL-T
CSS
DOM
SMIL
HTML
XHTML
...

Introduction : Définitions et concepts

Type MIME : image/svg
Déclaration XML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">

Scalable

= zoomable
= permettant un grand nombre d'utilisateurs et un grand nombre d'utilisations

( par ré-utilisation de fragments )

Possibilité d'utiliser tous les outils XML : parser, outil de transformation, base de données
La conformité aux espaces de nommage permet de mélanger des grammaires XML entre elles ; par exemple, un document HTML peut contenir des graphiques SVG, des expressions mathématiques en MathML, des présentations en SMIL, ...

Introduction : Définitions et concepts ( II )

Types des données de base

Angle : un entier suivi de deg ( degrés ), grad ( grades ), rad ( radians )
Couleur : spécifié dans le modéle sRGB ; spécification d'une couleur RGB

comme en HTML : #rrggbb ou un mot-clé dans la liste : aqua,black,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow

Entier : entre - 2147483648 et 2147483647
Réel : soit en notation décimale soit en notation scientifique

( x.yyye(ou E)±nn )

entre - 3.4e+38 et 3.4e+38

Longueur : nombre suivi d'un identifiant CSS ( mm,cm,m )
Temps : nombre suivi de ms (millisecondes ) ou de s ( secondes )
URI : Uniform Ressource Identifier

Introduction : Définitions et concepts ( III )

Style

Peut s'appliquer :

soit par CSS2 ( Cascadind Style Sheet Level 2 )
soit par XSL ( XML Style Language )
soit par l'attribut style commun à beaucoup de balises SVG

Exemple d'emploi avec une balise text

<text style="font-size: 12pt> Texte en 12 pt</text>

Il est recommandé de ne pas mélanger les styles CSS et XSL dans le

même document SVG

Structure d'un document SVG

Un document SVG se compose d'un ou plusieurs fragments délimités par la balise <svg>
Il peut y avoir plusieurs structures <svg> emboitées dans le même document ou dans des documents composites résultants de plusieurs espaces de noms
La balise <svg> redéfinit l'espace utilisateur
Attributs de la balise <svg>

x = "x0" ; position en x du coin supérieur gauche ( pour les structures internes )
y = "y0" ; position en y du coin supérieur gauche ( pour les structures internes )
width = "w0" ; largeur en pixels de l'espace ( pour les structures externes )
height = "h0" ; hauteur en pixels de l'espace ( pour les structures externes )
...

Structure d'un document SVG : Regroupement d'éléments

La balise <g> regroupe et nomme des éléments qui se partagent des attributs

communs : couleur, style, ...

Exemple :

<g style="fill:red" id="Grands rectangles rouges">

<rect x="100" y="100" width="200" height="200 />
<rect x="300" y="400" width="100" height="100 />
</g>
<g style="fill:blue" id="Petits rectangles bleus">
<rect x="10" y="10" width="20" height="20 />
<rect x="30" y="40" width="10" height="10 />
</g>

On peut imbriquer autant de structures <g> que l'on veut :
Les objets isolés ( ne figurant pas dans une structure <g> ) sont considérés

comme figurant dans leur propre groupe ( leurs attributs ne sont pas propagés )

Structure d'un document SVG : Référencement

On peut utiliser plusieurs types de référencement

Référencement relatif

La référence est locale
Exemple

<linearGradient id="myGradient"> .... </linearGradient>

...
<rect style="fill:url(#myGradient) />

Référencement absolu

La référence est une URI générale
La référence ne se trouve pas dans le fichier courant

Les deux référencements peuvent utiliser les syntaxes définies par XPointer

Structure d'un document SVG : Référencement ( II )

La balise <defs> autorise la définition d'objets référencés plus tard dans le même fichier
Exemple :

<defs>
<linearGradient id="Gradient01"> .... </linearGradient >
</defs>
...
<rect style="fill:url(#Gradient01) ..../>

Il est requis que toutes les définitions d'objets devant être référencés plus tard

soient faites dans la même structure <defs>

Il n'y a donc qu'une structure <defs> par fichier SVG

Structure d'un document SVG : Référencement ( III )

La balise <symbol> permet de définir des objets graphiques réutilisables dans les cas suivants

Objet à instancier de multiples fois
Objet classique référencé par de nombreux éléments
Définition d'un élément de police textuel
...

La balise <use> permet le référencement d'éléments définis dans une structure <defs > ( forme d'inclusion )

Exemple :

<defs>
<symbol id="s1" >
......
</symbol>
</defs>
<g >
<use xlink:href="#s1" />
</g>

L'élément use peut référencer :

soit un élément du même fichier dont l'ancêtre est un élément <defs>
soit un élément d'un autre fichier dont l'ancêtre est un élément <defs>

Structure d'un document SVG : Référencement ( IV )

La balise <image> autorise le référencement d'images entières dans une zone rectangulaire définie dans les coordonnées utilisateur
Les formats d'images acceptés doivent être :

PNG
JPEG
SVG

Exemple :

<image x="200" y="300" width="100px" height="100px" xlink:href="monimage.png" />

Structure d'un document SVG : Les métadonnées

Deux structures de métadonnées sont définies

La structure <desc> autorise l'insertion de commentaires non rendus
La structure <title> autorise un titre pouvant être rendu par les viewers

dans le bandeau par exemple

Exemple :

<g>
<title> Mon image
</title>
<desc> Cette image ne contient qu'un rectangle </desc>
<rect ..... />
</g>

Structure d'un document SVG : Le traitement conditionnel

Il est assuré comme dans SMIL par la balise switch ( même principe que dans SMIL )
Attributs :

xml:lang
system-required = liste de fonctions

Définit les fonctionnalités minimales devant être implémentées
Par exemple

SVGLang : toutes les fonctionnalités de la spécification
SVGStatic : un sous-ensemble
SVGDOMStatic : + les interfaces DOM de SVGStatic
SVGDOMDynamic , ....

system-language = liste de langues

idem SMIL

Systèmes de coordonnées

A l'origine l'élément <svg> le plus externe établit un espace utilisateur et un point de vue confondus comme suit :

<g style="fill:none; stroke:black; stroke-width:3">
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
</g>
<g style="fill:red; stroke:none">
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
</g>
<g style="font-size:14 font-family:Verdana">
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
</g>
</svg>

Chaque élément <svg> interne redéfinit un nouvel espace utilisateur et un nouveau point de vue associé

Systèmes de coordonnées : les transformations

On peut spécifier un nouvel espace utilisateur par transformation de l'espace original
Par exemple, à partir de l'espace

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="400px" height="150px">
<desc>Example xform1Orig - Simple transformations: original picture</desc>
<g style="fill:none; stroke:black; stroke-width:3">
    
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
    <text x="30" y="30" style="font-size:20 font-family:Verdana">
      ABC (orig coord system)
    </text>
</g>
</svg>

on pourra créer par translation :

?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="400px" height="150px">
<desc>Example xform1NewCoordSys - New user coordinate system</desc>
<g style="fill:none; stroke:black; stroke-width:3">
    
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
    <text x="30" y="30" style="font-size:20 font-family:Verdana">
      ABC (orig coord system)
    </text>
</g>

<g transform="translate(50,50)">
    <g style="fill:none; stroke:red; stroke-width:3">
      
      <line x1="0" y1="0" x2="50" y2="0" style="stroke:red"/>
      <line x1="0" y1="0" x2="0" y2="50" />
    </g>
    <text x="30" y="30" style="font-size:20 font-family:Verdana">
      ABC (translated coord system)
    </text>
</g>
</svg>

Systèmes de coordonnées : les transformations ( II )

par rotation et mise a l'échelle

?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="400px" height="120px">
<desc>Example RotateScale - Rotate and scale transforms</desc>
<g style="fill:none; stroke:black; stroke-width:3">
    
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>

<g transform="translate(50,30)">
    <g transform="rotate(30)">
      <g style="fill:none; stroke:red; stroke-width:3">
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">
        ABC (rotate)
      </text>
    </g>
</g>

<g transform="translate(200,40)">
    <g transform="scale(1.5)">
      <g style="fill:none; stroke:red; stroke-width:3">
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">
        ABC (scale)
      </text>
    </g>
</g>
</svg>

par inclinaison

?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="400px" height="120px">
<desc>Example Skew - Show effects of skewX and skewY</desc>
<g style="fill:none; stroke:black; stroke-width:3">
    
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>

<g transform="translate(30,30)">
    <g transform="skewX(30)">
      <g style="fill:none; stroke:red; stroke-width:3">
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">
        ABC (skewX)
      </text>
    </g>
</g>

<g transform="translate(200,30)">
    <g transform="skewY(30)">
      <g style="fill:none; stroke:red; stroke-width:3">
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">
        ABC (skewY)
      </text>
    </g>
</g>
</svg>

Systèmes de coordonnées : les transformations ( III )

Toutes ces transformations peuvent être représentées mathématiquement

par une matrice carrée 3 x 3 de ce type

où seules 6 valeurs a,b,c,d,e,f sont différentes de 0 ou 1. De ce fait, on peut aussi
employer une notation vectorielle du type [ a b c d e f ] .

Les transformations transposent les coordonnées et les longueurs d'un système à l'autre par une relation

Systèmes de coordonnées : les transformations ( IV)

De cette façon, on peut calculer les transformations comme suit :

Translation

où tx et ty sont les distances de translation des coordonnées x et y

Mise à l'échelle

où sx et sy sont les facteurs d'échelle en x et y

Rotation

où a est l'angle de rotation

Inclinaison des coordonnées x

Inclinaison des coordonnées y

où a est l'angle d'inclinaison en y

Systèmes de coordonnées : les transformations ( V )

Les transformations peuvent être imbriquées un nombre quelconque de fois

par simple multiplication matricielle de type :

Pour chaque élément, l'accumulation des transformations appliquées à cet élément

ainsi qu'à l'ensemble de ces ancêtres ( en général le précédent élément <svg> ) est
appelée la matrice de tranformation courante ( en anglais CTM Current Transform Matrix )

La CTM représente ainsi la transformation globale entre les coordonnées utilisateur

courantes et les coordonnées de fenêtrage ( viewport coordinates )

Systèmes de coordonnées : les attributs de transformation

L'attribut transform a comme valeur possible une liste de transformations séparées par des blancs et/ou une virgule. Ces transformations individuelles sont appliquées l'une après l'autre dans l'ordre où elles apparaissent. Ce peut être :

matrix ( a,b,c,d,e,f) ; les valeurs e et f peuvent recevoir des unités CSS
translate ( tx, [ ty] ) ; tx et ty peuvent recevoir des unités CSS
scale ( sx, [ sy ] ) ; si sy n'est pas fourni, on suppose sy = sx
rotate ( alpha ) spécifie une rotation d'angle alpha autour de l'origine de l'espace

de coordonnées utilisateur courantes

skewX ( beta ) spécifie une inclinaison d'angle beta le long de l'axe des x
skewY ( beta ) spécifie une inclinaison d'angle beta le long de l'axe des y

Toutes les valeurs numériques sont réelles ; les valeurs d'angle sont exprimées

dans les unités précisées pour les angles

L'attribut transform est appliqué à l'élément AVANT tout calcul de coordonnées ou de longueurs pour cet élément

Systèmes de coordonnées : les attributs de point de vue

Pour contraindre un ensemble d'objets graphiques à rester confiné dans

un espace donné, on peut établir un nouveau point de vue

Tous les éléments qui peuvent établir un nouveau point de vue ont l'attribut

viewBox

viewBox ( minx , miny, largeur, hauteur )

Exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd" [
<!ENTITY Smile "
<rect x='.5' y='.5' width='29' height='39' style='fill:yellow; stroke:red'/>
<g transform='rotate(90)'>
    <text x='10' y='10' style='font-family:Verdana;
          font-weight:bold; font-size:14'>:)</text>
</g>">
<!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'
                          style='fill:none; stroke:blue'/>">
<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'
                          style='fill:none; stroke:blue'/>">
]>
<svg width="480px" height="270px" style="font-family:Verdana; font-size:8">
<desc>Example PreserveAspectRatio - demonstrate available options</desc>
<text x="10" y="30">SVG to fit</text>
<g transform="translate(20,40)">&Smile;</g>
<text x="10" y="110">Viewport 1</text>
<g transform="translate(10,120)">&Viewport1;</g>
<text x="10" y="180">Viewport 2</text>
<g transform="translate(20,190)">&Viewport2;</g>
<text x="100" y="30">--------------- meet ---------------</text>
<g transform="translate(100,60)"><text y="-10">xMin*</text>&Viewport1;
    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
         width="50" height="30">&Smile;</svg></g>
<g transform="translate(170,60)"><text y="-10">xMid*</text>&Viewport1;
    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
         width="50" height="30">&Smile;</svg></g>
<g transform="translate(240,60)"><text y="-10">xMax*</text>&Viewport1;
    <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
         width="50" height="30">&Smile;</svg></g>
<text x="330" y="30">---------- meet ----------</text>
<g transform="translate(330,60)"><text y="-10">*YMin</text>&Viewport2;
    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
         width="30" height="60">&Smile;</svg></g>
<g transform="translate(380,60)"><text y="-10">*YMid</text>&Viewport2;
    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
         width="30" height="60">&Smile;</svg></g>
<g transform="translate(430,60)"><text y="-10">*YMax</text>&Viewport2;
    <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
         width="30" height="60">&Smile;</svg></g>
<text x="100" y="160">---------- slice ----------</text>
<g transform="translate(100,190)"><text y="-10">xMin*</text>&Viewport2;
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
         width="30" height="60">&Smile;</svg></g>
<g transform="translate(150,190)"><text y="-10">xMid*</text>&Viewport2;
    <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
         width="30" height="60">&Smile;</svg></g>
<g transform="translate(200,190)"><text y="-10">xMax*</text>&Viewport2;
    <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
         width="30" height="60">&Smile;</svg></g>
<text x="270" y="160">--------------- slice ---------------</text>
<g transform="translate(270,190)"><text y="-10">*YMin</text>&Viewport1;
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
         width="50" height="30">&Smile;</svg></g>
<g transform="translate(340,190)"><text y="-10">*YMid</text>&Viewport1;
    <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
         width="50" height="30">&Smile;</svg></g>
<g transform="translate(410,190)"><text y="-10">*YMax</text>&Viewport1;
    <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
         width="50" height="30">&Smile;</svg></g>
</svg>

Systèmes de coordonnées : les attributs de point de mise à l'échelle

On peut controler la mise à l'échelle lors du changement de point de vue par l'attribut

preserveAspectRatio = align [ meet ou slice ]

align peut prendre les valeurs suivantes :

rien ( défaut ) ; la mise à l'échelle s'arrange pour que les valeurs extrêmes en

x et en y touchent les bords du rectangle de point de vue

xMinYmin ; Mise à l'échelle uniforme ; min des x = x _min du point de vue

min des y = y _min du point de vue

XMidYMin ; Mise à l'échelle uniforme ; val moyenne des x = x _moyen du point de vue

min des y = y _min du point de vue

XMaxYMin ; idem
XMinYMid ; idem
et toutes les variantes Min,Mid,Max pour X et Y

Le paramètre meet ou slice est optionnel; il a la signification suivante :

meet ( défaut ) met à l'échelle le graphique de sorte que

le rapport d'aspect est préservé
tout le rectangle de point de vue est visible
la boite de point de vue est calculée la plus large possible

slice met à l'échelle le graphique de sorte que

le rapport d'aspect est préservé
tout l'espace de point de vue est occuppé par la boite
la boite de point de vue est calculée la plus petite possible

Exemple

Systèmes de coordonnées : nouveaux point de vue

Les éléments qui définissent un nouveau point de vue sont :

<svg>
<use> ou <image> établissent un point de vue temporaire pour tracer les

instances des éléments ou des images référencés

< marker> établit un point de vue temporaire pour tracer des flèches ou des marqueurs
Quand un texte trace un symbole le long d'un chemin, il utilise un point de vue

temporaire pour tracer le symbole

Même chose pour un pattern
<mask>

Fonctionnalités de bas niveau

L'objet graphique de base est un chemin ( path )
Ce chemin représente le contour d'une forme dont on peut spécifier

l'épaisseur
la couleur
le remplissage

Syntaxe :

<path d="path data" nominalLenght="number" />

path dataest un ensemble de commandes élémentaires ( détaillées plus loin )
nominalLenghtest la longueur totale du chemin en coordonnées utilisateur

Fonctionnalités de bas niveau : les fonctions élémentaires

Les path data suivent les régles :

Toutes les instructions peuvent être abrégées sur un seul caractère
Les espaces peuvent être éliminés
On peut omettre de répéter une commande
Il existe toujours 2 versions des commandes :

en majuscules : coordonnées absolues
en miniscules : coordonnées relatives

Ces régles visent à diminuer au maximum la taille requise par la description

des chemins

Fonctionnalités de bas niveau : les fonctions élémentaires ( II )

Commandes de base

M ou m : moveto : x,y

démarre un nouveau sous-chemin

Z ou z : closepath :

ferme un sous-chemin en traçant une ligne droite entre le point courant

et le dernier moveto

lineto

L ou l : lineto : x , y

trace une ligne droite entre le point courant et le point ( x,y )

H ou h : horizontal lineto : x

trace une ligne horizontale entre le point courant et le point ( x,y0 )

V ou v : vertical lineto : y

trace une ligne verticale entre le point courant et le point ( x0,y )

Fonctionnalités de bas niveau : les fonctions élémentaires ( III )

Il existe de plus trois groupes de commandes qui dessinent des courbes :

C ou c, S ou s : Courbes de Bézier cubiques

On spécifie un point de départ, un point d'arrivée et 2 points de contrôle

Q ou q, T ou t : Courbes de Bézier quadratiques

On spécifie un point de départ, un point d'arrivée et 1 point de contrôle

A ou a : Arc elliptique

On spécifie un morceau d'ellipse par 2 rayons et un sens de parcours

Fonctionnalités de bas niveau : exemples

?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="600px" height="200px">
<text x="5" y="20" style="font-size:24">SVG Test: Path using horizontal & vertical lines</text>
<g style="fill:none; stroke:blue">
    <path d="M 50,50 h 50 v 50 h -50 z"/>
    <path d="M 110,50 h 50 v 50 h -50 v -50"/>
    <path d="m 50,110 h 50 v 50 h -50 z" />
</g>
</svg>

Fonctionnalités de bas niveau : exemples (II)

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >
<svg width="500" height="700" >
<g style="text-rendering:optimizeLegibility;shape-rendering:default">
<text x="5" y="20" style="font-size:24">SVG Demo: More elliptical arcs</text>

    <g style="stroke-width:4 ; fill:none; stroke:blue" >
      <path d="M 60,50   A 50 50 0 0 0 110 100" />
      <path d="M 160,50 A 50 50 0 0 1 210 100" />
      <path d="M 60,150 A 50 50 0 1 0 110 200" />
      <path d="M 160,200 A 50 50 0 1 1 210 250" />
    </g>

    <g style="font-size:8" >
      <text x="10" y="120">M 60,50 A 50 50 0 0 0 110 100</text>
      <text x="150" y="120">M 160,50 A 50 50 0 0 1 210 100</text>
      <text x="10" y="280">M 60,150 A 50 50 0 1 0 110 200</text>
      <text x="150" y="280">M 160,200 A 50 50 0 1 1 210 250</text>
    </g>
</g>
</svg>

Fonctionnalités de bas niveau : formes élémentaires

Il existe un certain nombre de formes prédéfinies ( chemins particuliers )

qui permettent de s'affranchir de la description complète d'un chemin

les rectangles
les cercles
les ellipses
les lignes
les polylignes

Fonctionnalités de bas niveau : les rectangles

<rect x="coord" y="coord" width="longueur" height="longueur" rx="longueur" ry="longueur" />

x : coordonnée x du coté du rectangle de plus bas x
y : coordonnée y du coté du rectangle de plus bas y
width : largeur du rectangle
height : hauteur du rectangle
rx : pour des rectangles à coins arrondis

rayon en x de l'ellipse assurant le raccord

rx : pour des rectangles à coins arrondis

rayon en y de l'ellipse assurant le raccord

Fonctionnalités de bas niveau : les cercles

<circle cx="coord" cy="coord" r="longueur" />

cx : coordonnée x du centre du cercle

0 par défaut

cy : coordonnée y du centre du cercle

0 par défaut

r : rayon du cercle

Fonctionnalités de bas niveau : les ellipses

<ellipse cx="coord" cy="coord" rx="longueur" ry="longueur" />

cx : coordonnée x du centre de l'ellipse

0 par défaut

cy : coordonnée y du centre de l'elipse

0 par défaut

rx : rayon de l'ellipse suivant l'axe des x
ry : rayon de l'ellipse suivant l'axe des y

Fonctionnalités de bas niveau : les lignes

<line x1="coord" x2="coord" y1="coord" y2="coord" />

x1 : coordonnée x du point de départ
y1 : coordonnée y du point de départ
x2 : coordonnée x du point d'arrivée
y2 : coordonnée y du point d'arrivée

Fonctionnalités de bas niveau : les polylignes

Une polyligne est un ensemble de lignes droites connectées entre elles
Une polyligne définit une forme ouverte
<polyline points="liste de points" />
liste de points est une liste de coordonnées x , y séparées par des virgules
Ces coordonnées sont exprimées dans l'espace utilisateur

Fonctionnalités de bas niveau : les polygones

Un polygone est un ensemble de lignes droites connectées entre elles

définissant une forme fermée

<polygon points="liste de points" />
liste de points est une liste de coordonnées x , y séparées par des virgules
Ces coordonnées sont exprimées dans l'espace utilisateur

Fonctionnalités de bas niveau : Exemples de formes de base

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >
<svg width="500" height="500" >
<g style="text-rendering:optimizeLegibility;shape-rendering:default">
<text x="5" y="20" style="font-size:22">SVG Demo: Basic SVG shapes</text>

    <g style="stroke:black; fill:none; shape-rendering:default" >
      <circle cx="70" cy="100" r="50" />
      <rect x="150" y="50" width="135" height="100" />
      <line x1="325" y1="150" x2="375" y2="50" />
      <line x1="375" y1="50" x2="425" y2="150" />
      <polyline points="50,250,75,350,100,250,125,350,150,250,175,350" />
      <polygon points="250,250,297,284,279,340,220,340,202,284,250,250" />
      <ellipse cx="400" cy="300" rx="72" ry="50" />
    </g>

    <g style="text-rendering:optimizeSpeed">
      <text x="50" y="175">Circle</text>
      <text x="175" y="175">Rectangle</text>
      <text x="355" y="175">Lines</text>
      <text x="50" y="375">Polyline</text>
      <text x="225" y="375">Polygon</text>
      <text x="375" y="375">Ellipse</text>
    </g>
</g>
</svg>

Fonctionnalités de bas niveau : Exemples de formes de base ( II )

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="680" height="500" >
<g style="text-rendering:optimizeLegibility">
<text x="5" y="20" style="font-size:22">SVG Demo: Some basic SVG filled and stroked regular polygons</text>

<g style="stroke:blue; fill:red; shape-rendering:default; stroke-width:10" >
      <polygon points="99,50,143,125,56,124,99,50" />
      <polygon points="225,50,275,99,225,150,175,100,224,50" />
      <polygon points="350,50,397,84,379,140,320,140,302,84,350,50" />
      <polygon points="475,50,518,74,518,125,475,150,431,124,431,75,475,50" />
      <polygon points="99,175,138,193,148,235,122,269,79,270,51,237,59,195,97,175" />
      <polygon points="225,175,260,189,275,225,260,260,225,275,189,260,175,225,189,189,224,175" />
      <polygon points="350,175,382,186,399,216,393,250,367,271,332,271,306,250,300,216,317,186,350,175" />
      <polygon points="475,175,504,184,522,209,522,240,504,265,475,275,445,265,427,240,427,209,445,184,475,175" />
    </g>
</g>
</svg>

Le texte

Le texte suit les recommandations générales des caractères XML
Il n'effectue ni retour à la ligne ni césure automatique
La balise <text> est traitée comme un objet graphique

En tant que telle, elle subit l'influence :

des changements de coordonnées
du mode de rendu
du clipping

Le texte : syntaxe

<text x="coord" y="coord" />
x représente l'abscisse de départ du texte

s'il n'est pas suivi d'unité, la valeur est calculée dans l'espace utilisateur
s'il est suivi d'une unité CSS ou de %, la valeur est calculée par rapport au point de vue

y représente l'ordonnée de départ du texte

si elle n'est pas suivie d'unité, la valeur est calculée dans l'espace utilisateur
si elle est suivie d'une unité CSS ou de %, la valeur est calculée par rapport au point de vue

Le texte : éléments d'ajustement

A l'intérieur d'un élément <text>, on peut ajuster la position du texte, la valeur du

texte ou la police du texte grace à l'élément <tspan>

<tspan x="coord+" y="coord+" dx="coord+" dy="coord+" rotate="auto|nombre" />

<g style="font-family:Verdana; font-size:12pt">
    <text x="2cm" y="1.5cm" style="fill:blue">
      You are
        <tspan style="font-weight:bold; fill:red">not</tspan>
      a banana.
    </text>
</g>
</svg>

<g style="font-family:Verdana; font-size:12pt">
    <text x="2cm" y="1.5cm" style="fill:blue">
      But you
        <tspan dx="2em" dy="-.5cm" style="font-weight:bold; fill:red">
          are
        </tspan>
        <tspan dy="1cm">
           a peach!
        </tspan>
    </text>
</g>
</svg>

Le texte : éléments d'ajustement ( II )

A l'intérieur de la balise <text>, on peut :

soit spécifier le texte directement
soit référencer le texte d'un autre élément par la balise <tref>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="10cm" height="3cm">
<defs>
    <text id="ReferencedText">
      Referenced character data
    </text>
</defs>
<desc>Example tspan04 - inline vs reference text content</desc>

<text x="1cm" y="1cm" style="font-size:12pt; fill:blue">
Inline character data
</text>
<text x="1cm" y="2cm" style="font-size:12pt; fill:red">
<tref xlink:href="#ReferencedText"/>
</text>
</svg>

Le texte : spécifications

Par l'intermédiaire d'attributs de type CSS, on peut spécifier :

la mise en page du texte : largeur des caractères, taille des caractères
le sens d'écriture : de gauche à droite, de haut en bas, ...
l'alignement du texte
l'espacement, le retour à la ligne
la décoration
......

Le texte : lien avec les chemins

On peut imposer au texte de suivre un chemin prédéfini par la balise <path>
<textPath starOffset="longueur|pourcentage" xlink:href="uri" />
starOffsetest le décalage par rapport au début du texte

une longueur représente une distance le long du chemin mesurée

selon la métrique de l'espace utilisateur

un pourcentage représente un pourcentage par rapport au chemin entier

selon la métrique de l'espace utilisateur

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300">
<defs>
    <path id="MyPath"
          d="M 100 200
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
</defs>
<desc>Example toap01 - simple text on a path</desc>

<use xlink:href="#MyPath" style="stroke:red" />
<text style="font-family:Verdana; font-size:42.3333; fill:blue">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
</text>
</svg>

Le rendu

Les éléments <path>,<text> et les formes de base peuvent être remplis et coloriés

( c'est à dire peints sur les bords ). On appelera cette opération le rendu

En SVG, on peut rendre avec :

une couleur simple
un gradient ( linéaire ou radial )
un motif ( vecteur ou image )
des motifs personnalisés disponibles par extension

Le rendu : spécifications

Deux propriétés fill et stroke se partagent les attributs suivants :

couleur
uri de la couleur ou du gradient

Propriétés de fill ( remplissage )

opacité

Propriétés de stroke ( dessin )

épaisseur
jonction de lignes
arrondi des angles
pointillés

Le rendu : spécifications ( exemples )

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="500" height="500" >
<g style="stroke:black; stroke-width:6; text-rendering:optimizeLegibility; shape-rendering:default" >

<text x="5" y="20" style="font-size:22">SVG Demo: Stroke and fill opacity.</text>

<rect x="10" y="100" width="400" height="100" style="fill:yellow" />
<rect x="10" y="225" width="400" height="100" style="fill:green" />

    <g style="stroke:blue;fill:cyan">
      <rect x="25" y="50" width="50" height="320" style="stroke-opacity:0.2;fill-opacity:0.2" />
      <rect x="100" y="50" width="50" height="320" style="stroke-opacity:0.4;fill-opacity:0.4" />
      <rect x="175" y="50" width="50" height="320" style="stroke-opacity:0.6;fill-opacity:0.6" />
      <rect x="250" y="50" width="50" height="320" style="stroke-opacity:0.8;fill-opacity:0.8" />
      <rect x="325" y="50" width="50" height="320"   />
    </g>

    <text x="40" y="385">0.2</text>
    <text x="115" y="385">0.4</text>
    <text x="190" y="385">0.6</text>
    <text x="265" y="385">0.8</text>
    <text x="340" y="385">1.0</text>

</g>
</svg>

Le rendu : spécifications ( exemples ) ( II )

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="525" height="500" >
<g style="shape-rendering:default; stroke-width:14; stroke:#0000FF; fill:none" >
    <path d="M50,50C50,200,200,50,200,200" style="stroke-linecap:butt; stroke-dasharray:10 5" />
    <path d="M50,150C50,300,200,150,200,300" style="stroke-linecap:round; stroke-dasharray:10 20" />
    <path d="M50,250C50,400,200,250,200,400" style="stroke-linecap:square; stroke-dasharray:10 20" />
    <path d="M300,50Q400,400,500,50" style="stroke-linecap:butt; stroke-dasharray:20 10" />
    <path d="M300,150Q400,500,500,150" style="stroke-linecap:round; stroke-dasharray:10 20" />
    <path d="M300,250Q400,600,500,250" style="stroke-linecap:square; stroke-dasharray:10 20" />
</g>
</svg>

Le rendu : les marqueurs

On peut définir des marqueurs qui pourront être référencés plus tard

par un chemin ou une forme de base

Syntaxe : <marker markerUnits="" markerWidth="longueur" markerHeight="longueur" orient="auto|angle" />
Propriétés :

marker-start : le marqueur au premier noeud de l'objet graphique
marker-mid : le marqueur des noeuds intermédiaires
marker-end : le marqueur de l'extrémité

Exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="4in"
     viewBox="0 0 4000 4000" >
<defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5"
      markerWidth="1.25" markerHeight="1.75"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
</defs>
<desc>Placing an arrowhead at the end of a path.
</desc>
<path d="M 1000 1000 L 2000 1000 L 3000 2000"
        style="fill:none; stroke:black; stroke-width:100;
        marker-end:url(#Triangle)" />
</svg>

La couleur

Les couleurs sont spécifiées dans l'espace sRGB
On peut utiliser les couleurs telles que spécifiées dans CSS

y compris les seize couleurs de base de CSS

De façon alternative, on peut spécifier un profil de couleur

conforme aux profils ICC

La propriété de couleur s'applique aux propriétés fill et stroke vues précédemment

Gradients et motifs

En SVG, on peut remplir un objet ou en souligner le contour par :

une couleur
un gradient ( de couleurs )
un motif

Un gradient de couleurs consiste en une transition douce entre deux couleurs selon

un vecteur

Les gradients de couleur peuvent être :

linéaires
radiaux

Gradients et motifs : gradient linéaire

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="500px" height="600px" >
<g style="text-rendering:optimizeLegibility;shape-rendering:default">

    <defs>
      <linearGradient id="grad1" x1="0" y1="0" x2="400" y2="400">
        <stop offset="0%"   style="stop-color:#FF0000"/>
        <stop offset="25%" style="stop-color:#0000FF"/>
        <stop offset="50%" style="stop-color:#00FF00"/>
        <stop offset="75%" style="stop-color:#0000FF"/>
        <stop offset="100%" style="stop-color:#FF0000"/>
      </linearGradient>
    </defs>

<text x="5" y="20" style="font-size:22">SVG Demo: Linear gradients</text>

<path style="fill:url(#grad1)" d="M0 50 h200 v200 h-200 z"/>

<circle style="fill:url(#grad1)" cx="320" cy="150" r="100" />

<polygon style="fill:url(#grad1)" points="0,400,200,400,100,280" />

<ellipse style="fill:url(#grad1)" cx="300" cy="350" rx="100" ry="75"/>

<rect style="fill:url(#grad1)" x="0" y="450" width="400" height="100" />

</g>
</svg>

Gradients et motifs : gradient radial

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >
<
<svg width="500px" height="500px" >
<g style="text-rendering:optimizeLegibility;shape-rendering:default">

    <defs>
      <radialGradient id="grad1" cx="250" cy="250" r="300" fx="250" fy="250">
        <stop offset="0%"   style="stop-color:#FF0000"/>
        <stop offset="25%" style="stop-color:#0000FF"/>
        <stop offset="50%" style="stop-color:#00FF00"/>
        <stop offset="75%" style="stop-color:#0000FF"/>
        <stop offset="100%" style="stop-color:#FF0000"/>
      </radialGradient>
    </defs>

<text x="5" y="20" style="font-size:22">SVG Demo: Radial gradient</text>

<rect style="fill:url(#grad1)" x="50" y="50" width="400" height="400" />

</g>
</svg>

Gradients et motifs : les motifs

Un motif est utilisé pour remplir ou dessiner le contour d'un objet en utilisant

un objet graphique pré-défini qui peut être dupliqué à intervalles fixes en x et en y pour couvrir l'aire à peindre

<?xml version="1.0"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="600px" height="500px" >

<defs>
     <pattern id="mypattern" x="0" y="0" width="30" height="30">
       <rect width="30" height="30" style="fill:yellow" />
       <path style="fill:none;stroke:blue" d="M0,0 L 30,30 M0,30 L 30,0" />
     </pattern>
</defs>

<g style="text-rendering:optimizeLegibility" >
<text x="5" y="20" style="font-size:22">SVG Demo: Filling and stroking with a custom pattern</text>
</g>

<g style="stroke:none; shape-rendering:default" >
    <ellipse cx="150" cy="150" rx="100" ry="100" style="fill:url(#mypattern)" />
    <rect x="300" y="50" width="150" height="150" style="fill:url(#mypattern)" />
    <ellipse cx="250" cy="350" rx="200" ry="75" style="stroke:url(#mypattern);fill:none;stroke-width:20" />
</g>

</svg>

Découpe et masquage

SVG supporte les possibiltés suivantes en matière de découpe et de masquage

Les chemins de découpe ( clipping path ) utilisent n'importe quelle combinaison

de chemin, de texte ou de formes de base pour servir de frontière à un masque à 1 bit où tout ce qui est à l'intérieur de la frontière est visible et ce qui est à l'extérieur est masqué

Les masques qui sont des conteneurs qui peuvent contenir des éléments graphiques ou d'autres éléments de conteneurs qui définissent un ensemble de

graphiques pour former un masque semi-transparent pour inclure des objets étrangers dans le fond d'écran

Découpe et masquage : exemple de découpe

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="500" height="500" >

<defs>
    <clipPath>
      <ellipse cx="200" cy="220" rx="80" ry="120" id="myClip" />
    </clipPath>
</defs>

<g style="text-rendering:optimizeLegibility;shape-rendering:default" >
<text x="5" y="25" style="font-size:24">SVG Demo: An image clipped by an ellipse.</text>

<ellipse cx="200" cy="220" rx="90" ry="130" style="fill:#CE8A77" />
<image x="40" y="100" width="320" height="240" xlink:href="krl1.jpg" style="clip-path:URL(#myClip)"/>
</g>
</svg>

Découpe et masquage : exemple de masquage

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<desc>Example of using a mask
</desc>
<g>
    <defs>
      <mask id="MyMask">
        <image width="10" height="25" xlink:href="transp.png" />
      </mask>
    </defs>
    <rect style="mask: url(#MyMask)" width="12.5" height="30" />
</g>
</svg>

Effets de filtre

Un filtre prend une image en entrée, lui fait subir une transformation et restitue une

image en sortie

En pratique cela revient à modifier le pipeline graphique traditionnel

en lui rajoutant une étape intermédiaire de composition de page
soit

soit

Effets de filtre : exemple

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="278px" height="118px">
<defs>
<filter id="Shadow">
<feGaussianBlur in="SourceAlpha"
stdDeviation="3"
result="blurredAlpha" />
<feOffset in="blurredAlpha"
   dx="2" dy="1"
   result="offsetBlurredAlpha" />
<feDiffuseLighting in="blurredAlpha"
   diffuseConstant=".5"
    surfaceScale="5"
    resultScale="5"
    LightColor="white"
    result="bumpMapDiffuse" >
<feDistantLight azimuth="135" elevation="60"/>
</feDiffuseLighting>
<feComposite in="bumpMapDiffuse" in2="SourceGraphic"
operator="arithmetic" k1="1"
result="litPaint" />
<feSpecularLighting in="blurredAlpha"
   surfaceScale="5"
   specularConstant=".5"
   specularExponent="10"
   lightColor="white"
   result="bumpMapSpecular" >
<feDistantLight azimuth="135" elevation="60"/>
</feSpecularLighting>
<feComposite in="litPaint" in2="bumpMapSpecular"
   operator="arithmetic" k2="1" k3="1"
   result="litPaint" />
<feComposite in="litPaint"
    in2="SourceAlpha"
    operator="in"
    result="litPaint" />
<feMerge>
    <feMergeNode in="offsetBlurredAlpha" />
     <feMergeNode in="litPaint" />
</feMerge>
</filter>
</defs>
<desc>Example filters02 - text with shadowing effect</desc>

<text style="font-size:36px; fill:red; filter:url(#Shadow)"
x="10px" y="70px">Shadowed Text</text>
</svg>

Les Liens

On distingue les liens extra et intra document SVG
Liens extra document :

Les liens en dehors du document courant sont pris en charge par l'élément <a>

analogue à l'élément correspondant de HTML ou SMIL

A noter que l'élément <a> utilise la syntaxe de XLink ( en cours de spécification )
Exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<desc>This valid svg document draws a triangle which is a hyperlink
</desc>
<a xlink:href="http://www.w3.org">
<path d="M 0 0 L 200 0 L 100 200 z"/>
</a>
</svg>

Les Liens : liens internes

Nécessite de spécifier un fragment SVG

Analogue à HTML :

MyDrawing.svg#MyView

Référence compatible avec XPointer :

MyDrawing.svg#xptr(id('MyView'))

Spécification d'une vue SVG :

MyDrawing.svg#svgView(viewBox(0,200,1000,1000))

Les scripts

L'attribut contentScriptType de l'élément <svg> spécifie le langage de script par défaut pour tous les scripts du document
En absence de cet attribut, le défaut peut être donné par l'entête HTTP

Content-Script-Type

En absence des deux, le langage de script par défaut est ECMAScript
Exemple :

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<defs>
    <script><![CDATA[
      /* Beep on mouseclick */
      MouseClickHandler() { beep(); }
     ]]>
    </script>
</defs>
<circle onclick="MouseClickHandler()" r="85"/>
</svg>

Les animations

Les graphiques SVG peuvent être animés par :

les élements d'animation SVG
l'interface DOM de SVG

Les éléments d'animation SVG ont été développés en collaboration avec

le groupe de travail SYMM qui élabore SMIL

SVG supporte quatre éléments d'animation communs avec SMIL ( version Boston )

animate

permet aux attributs scalaires et aux propriétés de changer avec le temps

set

raccourci pour assigner des valeurs d'animation et des attributs et propriétés
non numériques

animateMotion

déplace un élément le long d'un chemin

animateColor

modifie la couleur d'attributs ou de propriétés au cours du temps

Les animations : éléments

SVG inclut quatre éléments supplémentaires compatibles avec l'animation SMIL

animateTransform

modifie les attributs des transformations au cours du temps

attribut path
attribut keyPoints
attribut rotate

Attributs de animateMotion : précisent comment doit se faire le déplacement

Les animations : exemple


<rect id="RectElement" x="300" y="100" width="300" height="100"
   style="fill:rgb(255,255,0)" >
<animate attributeName="x" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML"
   begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>

<g transform="translate(100,100)" >
    
<text id="TextElement" x="0" y="0"
style="font-family:Verdana; font-size:35.27; visibility:hidden" >
It's alive!
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" />

<animateMotion path="M 0 0 L 100 100"
begin="3s" dur="6s" fill="freeze" />
<animateColor attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-30" to="0"

begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3"
begin="3s" dur="6s" fill="freeze" />
</text>
</g>
</svg>

Les animations : exemple ( suite )

Autres fonctionnalités

D'autres fonctionnalités sont disponibles dans la spécification SVG que nous ne détaillerons pas ici

car étant d'un emploi plus spécifique et encore peu implémentées

Interactivité

Tout comme dans ECMAScript, SVG peut prendre en compte les interactions utilisateur

telles que :

Changement d'aspect du curseur
Evénements de souris :

souris sur l'élément
clic de souris
...

Le créateur de la page SVG peut aussi décider de rendre visible ou pas certains éléments

via la propriété pointer-events

Autres fonctionnalités ( suite )

Les polices de caractères

On peut définir sa propre police de caractères en SVG pour pouvoir

La réutiliser
L'exporter

Une police peut être incluse dans le fichier SVG ou stockée a l'extérieur
Exemples

Police incluse

<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px"
xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'>
<defs>
    <font id="MyFont" font-face-name="Super Sans"
              units-per-em="1000" cap-height="600" x-height="400"
                  ascent="700" descent="300" horiz-adv-x="1000"
                  text-bottom="-300" baseline="0" centerline="350"
                  mathline="350" ideographic="400" hanging="500"
                  topline="700" text-top="700">
      <missing-glyph><path d="M0,0h200v200h-200z"/></glyph>
      <glyph unicode="33"><path d="M0,0L200,200L400,0z"/></glyph>
      <glyph unicode="34"><path d="M0,0L200,200L400,0z"/></glyph>
      
    </font>
    <style>
      <![CDATA[
        @font-face {
          font-family: "MyFont";
          src: url("#MyFont") format(svg)
        }
      ]]>
    </style>
</defs>
<text style="font-family: MyFont, Helvetica, sans-serif">Text
    using embedded font</text>
</svg>

Autres fonctionnalités ( suite )

Police externe

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%"
xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'>
<defs>
    <font id="MyFont" font-face-name="Super Sans"
              units-per-em="1000" cap-height="600" x-height="400"
                  ascent="700" descent="300" horiz-adv-x="1000"
                  text-bottom="-300" baseline="0" centerline="350"
                  mathline="350" ideographic="400" hanging="500"
                  topline="700" text-top="700">
      <missing-glyph><path d="M0,0h200v200h-200z"/></glyph>
      <glyph unicode="33"><path d="M0,0L200,200L400,0z"/></glyph>
      <glyph unicode="34"><path d="M0,0L200,200L400,0z"/></glyph>
      
    </font>
</defs>
</svg>

utilisée par

<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px"
xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'> <defs>
    <style>
      <![CDATA[
        @font-face {
          font-family: "MyFont";
          src: url("myfont.svg#MyFont") format(svg)
        }
      ]]>
   </style>
</defs>
<text style="font-family: MyFont">Text using embedded font</text>
</svg>

Etat de l'art du langage

Le langage est en phase finale de standardisation en version 1.0
Déjà beaucoup d'implémentations

de logiciels qui relisent du SVG ( SVGView d'IBM , CSIRO SVG Viewer , .. )
de logiciels qui exportent du SVG ( CorelDraw, ILOG Views, Narcisse , .. )
de convertisseurs

à partir de Postscript
à partir de Flash
à partir de Windows Metafile

Beaucoup de citations dans la presse avant même sa standardisation

Conclusion

SVG comble une lacune du Web

Graphique vectoriel
Retaillable à volonté
Indispensable aux scientifiques
Très précieux aux commerciaux et aux publicitaires

Avantages

Standard W3C
Conforme à XML

Inconvénient

Un peu trop verbeux pour des graphiques complexes

http://www.euroclid.fr/Cours_SVG/all.htm