Le langage SVG

1
Le langage SVG

• Noms des étudiants travaillant sur ce projet
• Deheul Julien
• Kasmi Sahli Mouad

M1 Informatique et document
2
SOMMAIRE

• Introduction
• Outils de visualisation de SVG
• Macromedia Flash vs. SVG
• La structure de base
• Les outils graphiques de bases
• Les textes et chemins
• Les images
• Animation et écriture de scripts
• Un éditeur SVG webdraw1 (JascSoftware)
• Conclusion

3
Introduction

• Définition
• Systèmes de représentation graphique
• Graphiques bitmap
• Graphiques vectoriels
• Historique de la technologie (SVG)
• Les avantages de SVG

4
Définition
SVG, qui signifie Scalable Vector Graphics (soit
Graphiques Vectoriels Adaptables) est une
application de XML qui permet de représenter
l'information graphique sous une forme compacte
et portable. L'intérêt dans SVG croît
rapidement et de nombreux outils de création et
de visualisation de fichiers SVG sont déjà
disponibles auprès de grand éditeurs.
5
Graphiques bitmap

• Une image est consituée par un tableau
  rectangulaire d'éléments appelés pixels.
• Chaque pixel représente une couleur par ses
  composantes Rouge-Verte-Bleue.
• Cette série de pixels, aussi appelée bitmap est
  souvent stockée sous une forme compressée.
• Leurs usage est plus approprié dans le cas de
  photographies, qui sont rarement composées de
  lignes droites ou de courbes.
• Les principaux formats d'images bitmaps sont
  JPEG, GIF, PNG et TIFF

6
Graphiques vectoriels

• Une image est décrite par un ensemble de formes
  géometriques.
• Au lieu de recevoir l'image dejà construite sous
  forme de pixels, le programme de visualisation
  reçoit des commandes qui vont lui permettre de
  tracer des formes avec des coordonnées précises.
• Ils sont très répandus dans les applications
  suivantes
• - les programmes de Conception Assistée par
  Ordinateur (CAO)
• - les programmes de dessin comme Adobe
  Illustrator
• - le langage de description de page Adobe
  PostScript dans lequel chaque caractère est
  représenté sous forme de lignes et de courbes.
• - le système d'animation de présentation et de
  création de sites Web Flash de la société
  Macromedia, qui s'appuie sur une technologie
  vectorielle.

7
Historique de SVG

• Groupe de travail constitué par le W3C en 1998
  (comprenant des représentants de Microsoft,
  Autodesk, Adobe, IBM,Sun,Netscape, Xerox, Apple,
  Corel, HP,ILOG, )
• Premier draft 5 Février 1999
• Spécification stable en 2000, avec quelques
  implémentations
• Recommandation W3C en septembre 2001 SVG 1.0
• Profils mobiles en janvier 2003 SVG 1.1,
  http//www.w3.org/TR/SVG11
• SVG 1.2 à létat de working draft (29.04.2003)
  http//www.w3.org/TR/SVG12

8
Les avantages de SVG

• Langage libre de droit
• Langage de description de graphiques 2D
• Compatible XML
• Prise en compte de CSS2, XSL et XLINK
• Langage supporté par HTML, GIF, JPEG, PNG,
  SMIL, ASP, JSP, PHP, Javascript
• Nombreux effets graphiques
• Possibilité de zoomer et de retailler une zone de
  vision
• Logiciels exportant le SVG (CorelDraw, ILOG
  Views, Narcisse, ...)
• Des convertisseurs vers SVG (Postscript, Flash,
  ...)
• Permet les graphiques suivants formes
  vectorielles (traits, courbes, ...),
• images, textes
• Le SVG peut être intégré dans une page HTML en
  utilisant EMBED ou OBJECT

9
Visualiseur SVG
10
Macromedia Flash vs. SVG
11
La structure de base
lt?xml version"1.0"?gt déclaration XML
standard lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.0//EN" "http//www.w3.org/TR/2001/PR-S
VG-20010719/DTD/svg10.dtd"gt indication du
DTD ltsvg width"400" height"250"gt  déclaration
des dimensions du document SVG. On est ici à la
racine du contenu SVG. lt/svggt
12
Les outils graphiques de base

• le systeme de coordonnees
• les lignes
• les rectangles
• les cercles
• les ellipses
• les polygones

Et leurs transformations

• les translations
• les rotations et inclinaisons

13
Le système de coordonnées
Ce sont comme les coordonnées (x,y) dans un
repere orthonormé, sauf que le point (0,0) est le
coin en haut a gauche. la syntaxe x"coord"
y"coord" .
14
Les lignes segments
Permet de faire une ligne à l'aide des
coordonnées des deux points qui forment le
segment. Syntaxe ltline x1"coord1"
y1"coord1" x2"coord2" y2"coord2" /gt Un
exemple simple un segment horizontal

ltline x1"10" y1"10" x2"300" y2"10"style"fill
whitestrokeblackstroke-width1"/gt
15
Les rectangles
Permet de faire des rectangles grace aux
coordonnées du repere dans lequel nous
travaillons. Syntaxe ltrect x"coord"
y"coord" width"largeur" height"hauteur"
rx"raccordx" ry"raccordy" /gt Avec xabscisse
la plus petite correspondante a un coté du carré,
yordonnée la plus petite correspondante a un
coté du carré, rx et rypermet de faire des carré
avec des coins arrondis (pas obligatoire), ca
correspond au rayon de l'ellipse qui assure le
raccord. Un exemple simple un rectangle aux
coins arrondis

ltrect x"100" y"100" width"200" height"100"
rx"25"style"fillwhitestrokeblackstroke-widt
h1"/gt
16
Les cercles
Permet de faire des cercles grace aux coordonnées
du repere dans lequel nous travaillons. Syntaxe
ltcircle cx"coordnoyau" cy"coordnoyau"
r"rayon" /gt avec cx et cycoordonnées du centre
du cercle , rrayon du cercle. Un exemple
simple un cercle tres classique.

ltcircle cx"200" cy"200" r"100"
style"fillwhitestrokeblackstroke-width1"/gt
17
Les ellipses
Permet de faire des ellipses grace aux
coordonnées du repere dans lequel nous
travaillons. Syntaxe ltellipse cx"coordnoyau"
cy"coordnoyau" rx"rayon" ry"rayon" /gt avec cx
et cycoordonnées du centre du cercle, rxrayon
de l'ellipse sur l'axe des x, ryrayon de
l'ellipse sur l'axe des y. Un exemple simple
une ellipse etirée sur la largeur.

ltellipse cx"150" cy"100" rx"100"
ry"50"style"fillwhitestrokeblackstroke-widt
h1"/gt
18
les polygones
Permet de faire des polygones avec autant de
cotés que voulu (du triangle a l'octogone etc).
Syntaxe ltpolyline points"tout les points du
polygone"/gt Les points du polygonela liste des
coordonnées x, y des points du polygone séparés
par des virgules.
Un exemple simple un triangle

ltpolyline points"218,135 372,324 122,322
218,135"style"fillwhitestrokeblackstroke-wid
th1"/gt
19
les polygones
Permet de faire des polygones avec autant de
cotés que voulu (du triangle a l'octogone etc).
Syntaxe ltpolyline points"tout les points du
polygone"/gt Les points du polygonela liste des
coordonnées x, y des points du polygone séparés
par des virgules.
Un exemple simple un octogone

ltpolyline points"232,53 364,102 399,214 340,285
244,322 133,277 76,204 116,94 232,53"style"fill
whitestrokeblackstroke-width1"/gt
20
les translations
Permet de faire une translation du repere dans
lequel on selectionne les coordonnées. La
syntaxe lttransform"translate(coordX,coordY)"gt
Un exemple simple faire une translation de deux
lignes formant un angle droit.
ltg style"fillnone strokeblue
stroke-width5"gt ltline x1"50" y1"50" x2"150"
y2"50" /gt ltline x1"50" y1"50" x2"50"
y2"150" /gt lt/ggt ltg transform"translate(60,40)"
gt ltg style"fillnone strokegreen
stroke-width3"gt ltline x1"50" y1"50" x2"150"
y2"50" /gt ltline x1"50" y1"50" x2"50"
y2"150" /gt lt/ggt lt/ggt

21
les rotations
La rotation permet d'effectuer une rotation au
repere dans lequel on selectionne les
coordonnées. La syntaxe ltg transform"rotate(a
ngle)"gt avec l'angle qui peut etre en degrés
(deg) ou radiant (rad). Un exemple simple faire
une rotation de deux lignes formant un angle
droit.
ltg style"fillnone strokeblue
stroke-width5"gtltline x1"50" y1"50" x2"150"
y2"50" /gtltline x1"50" y1"50" x2"50" y2"150"
/gtlt/ggt ltg transform"translate(60,20)"gtltg
transform"rotate(20deg)"gtltg style"fillnone
strokegreen stroke-width3"gtltline x1"50"
y1"50" x2"150" y2"50" /gtltline x1"50" y1"50"
x2"50" y2"150" /gtlt/ggtlt/ggtlt/ggt

22
Les inclinaisons
L'inclinaison permet d'effectuer une inclinaison
en x ou y au repere dans lequel on travaille. La
syntaxe ltg transform"skewXouY(angle)"gt Avec
l'angle qui peut etre en degrés (deg) ou radiant
(rad) . Un exemple simple faire une inclinaison
de deux lignes formant un angle droit.
ltg style"fillnone strokeblack
stroke-width3"gtltline x1"50" y1"50" x2"150"
y2"50" /gtltline x1"50" y1"50" x2"50" y2"150"
/gtlt/ggtltg transform"translate(50,50)"gtltg
transform"skewX(20deg)"gtltg style"fillnone
strokered stroke-width3"gtltline x1"50"
y1"50" x2"150" y2"50"/gtltline x1"50" y1"50"
x2"50" y2"150" /gtlt/ggtlt/ggtlt/ggt

23
Les textes et chemins

• Les textes
• Tspan
• tref
• Les chemins
• Un texte suivant un chemin

24
Les textes
Le texte en SVG est traité comme un objet
graphique a travers la balise lttextgt. Donc on
peut lui affecter des changements de coordonnées,
le mode de rendu et le clipping. La syntaxe
lttexte x"coord" y"coord" /gt Avec x et y les
coordonnées de depart du texte.
25
tspan
Il existe aussi une balise lttspangt qui permet de
changer la position ou encore le style dans un
texte. La syntaxe lttextgt ... lttspan
x"coorden" y"coorden" dx"coorden"
dy"coorden" rotate"angle" style"font,color,etc
" gt le texte lt/tspangtlt/textgt Un exemple simple
texte avec modification de style et de position
grace a tspan.

lttext x"1cm" y"1cm" style" fillblack
font-size10pt font-familysans-serif
font-styleitalic"gt le texte de departlttspan
dx"1cm" dy"2cm" style"fillgreen
font-size15pt"gtet celui modifie !
lt/tspangtc'est bien non ?lt/textgt
26
tref
La balise lttrefgt permet de réferencer le texte
d'un autre element. Cela peut être utile lorsque
qu'une phrase est redondante dans votre fichier
svg. La syntaxe lttref xlinkhref"larefdutxtv
oulu"/gt Un exemple simple une partie de
phrase referencée et utilisée deux fois.

ltdefsgtlttext id"nosprenoms"gtjulien et
mouadlt/textgtlt/defsgtlttext x"1cm" y"1cm"
style"font-size10ptfillblack"gtbienvenue sur
le site de svg delttref xlinkhref"nosprenoms"
style"font-size12pt fillgreen"/gtlt/textgtlttext
x"1cm" y"3cm"gt page de lttref
xlinkhref"nosprenoms" style"font-size12pt
fillgreen"/gtlt/textgt
27
les chemins

• Permet de créer un chemin, c'est à dire une
  liaison de courbes, de droites,
• La syntaxe ltpath id"identifduchemin" d"le
  coordonnes faisant le chemin" /gt
• Les coordonnées faisant le chemin se font de
  cette maniere
• M(ou m)x,ymoveto (demarre un nouveau
  sous-chemin)
• Z(ou z)closepath (ferme un sous chemin en
  tracant une ligne droite entre le point courant
  et le dernier moveto)
• L(ou l)x,ylineto (trace une ligne droite entre
  le point courant et le point saisi)
• H(ou h)xhorizontal lineto (trace une ligne
  horizontale entre le point courant et le point
  saisie avec le x)
• V(ou v)yvertical lineto (trace une ligne
  verticale entre le point courant et le point
  saisie avec le y)
• 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 (u 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)
• Un exemple simple un chemin constitué d'un
  lineto et d'une courbe de bezier cubique.

28
les chemins
Un exemple simple un chemin constitué d'un
lineto et d'une courbe de bezier cubique.
ltpath d"M77 56 L223 195 C223 195 54 32 275
48"style"fillnonestrokeblackstroke-width1"/gt
29
Un texte suivant un chemin
Vous pouvez grâce aux deux éléments vu avant
(c'est à dire les textes et les chemins) faire un
texte qui se positionne le long d'un chemin. La
syntaxe lttextPath starOffset"longueurpourcenta
ge" xlinkhref"idduchemin" /gt Avec
starOffsetc'est le décalage par rapport au début
du texte. Un exemple simple un texte qui suit
un chemin constitué d'une courbe de bezier cubique

ltdefsgtltpath id"lechemin"d"M62 236 C149 17 259
578 366 3262"style"fillnonestrokeblackstroke
-width0"/gtlt/defsgt ltuse xlinkhref"lechemin"/gt
lttext style"font-familysans-serif
font-size30pt fillgreen"gtlttextPath
xlinkhref"lechemin"gtce texte suit un chemin
-)lt/textPathgtlt/textgt
30
Les images en svg
Insertion d'images dans un document svg
Il est possible d'insérer des images dans un
document svg, les formats bitmap supportés (jpeg,
png). Pour cela on utilise ltimagegt qui contient
les éléments x, y, width, height et xlinkhref.
La syntaxe ltimage x"coord" y"coord"
width"largeur" height"hauteur"
xlinkhref"image.jpg"gt Avec x et yles
coordonnées de l'image (la plus petite ordonnée
et la plus petite absisce) width,
heightrespectivement la largeur et la hauteur de
l'image xlinkhreflien de l'image souhaitée.
Un exemple simple l'insertion d'une image
dans un document svg.
31
Les images en svg
Insertion d'images dans un document svg
ltimage x"108" y"125" width"280" height"187"
xlinkhref"C\images/image.jpg" / gt
32
Les images en svg
Les chemins de découpe
Il est possible de faire un chemin de découpe sur
une image. C'est à dire créer un chemin qui
coupera l'image et lui fera donc prendre un bord
de la forme voulu. La syntaxe ltimage
x"coord" y"coord" width"largeur"
height"hauteur" xlinkhref"limage.jpg"
style"clip-pathURL(lechemindedecoupe)"/gt Un
exemple simple une image avec un chemin de
decoupe qui est un cercle.
ltdefsgt ltclipPathgt ltcircle id"chemindecoupe"
cx"248" cy"220" r"136"  /gt lt/clipPathgt lt/defsgt
ltcircle id"chemindecoupe" cx"248" cy"220"
r"136"style"fillblackstrokeblackstroke-widt
h1"/gtltimage x"108" y"125" width"280"
height"187"xlinkhref"C\images/image.jpg"/
style"clip-pathurl(chemindecoupe)" /gt
33
Lanimation
Concept de base

• Les capacités d'animation de SVG sont basées sur
  une spécification du World Wide Web Consortium,
  Synchronized Multimedia Integration Language
  Level 2 (SMIL 2).
• Avec ce système on spécifie les valeurs de
• début
• fin
• Couleur
• mouvement
• transformation
• moment où l'animation doit commencer
• la durée de cette animation

34
Lanimation
ltrect x"10" y"10" width"150" height"20"
stroke"black" fill"red"gt ltanimate attribute
Name"width" attributeType"XML" from"150"
to"20" begin"0s" dur"5s" repeatCount"3" ltrect
/gt

• Un élément ltrectgt sans le /gt. Lanimation y est
  décrite.
• Début de la spécification de lanimation.
• Spécification de lattribut dont on veut faire
  changer la valeur.
• La largeur est un attribut XML.
• La valeur de debut et de fin de. lattribut.
• La date de debut, la durée et la répétition de
  lanimation.
• Balise fermante de lélément ltrectgt qui est
  maintenant un conteneur.

1
2
3
4
5
6
7
35
Un éditeur svg webdraw1 (jascsoftware)

• Présentation
• Exemples

36
Présentation

• Il existe 3 modes dutilisation
• canvas (on y crée sans codage des outils
  graphiques, images, etc..)
• source (on y retrouve la source du document svg)
• preview (on y voit ce que donne le fichier svg)

37
Mode canvas


On y trouve une barre des taches pour tous les
outils graphiques et une partie où on peut
sélectionner un élément et voir larborescence du
document svg.
38
Mode source


On y trouve le code source de votre document svg
(avec les outils graphiques realisés dans la
partie canvas).
39
Mode preview



Cest là que lon peut voir une représentation du
document svg (outils graphiques et textes).
40
Exemples

Exemple de l'image de la page d'accueil du site
Web.

• 1ère étape On va créer le cercle autour duquel
  le texte va être "mis".

41
Exemples


Exemple de l'image de la page d'accueil du site
Web.

• 2ème étape On va maintenant transformer ce
  cercle en un chemin et lui donner un ID pour
  pouvoir lui faire "suivre" un texte par la suite.

42
Exemples



Exemple de l'image de la page d'accueil du site
Web.
3ème étape on va changer le style de ce chemin
de tel sorte que lon ne puisse plus le voir.
43
Exemples




Exemple de l'image de la page d'accueil du site
Web.

• 4ème étape il ne reste plus quà écrire le code
  permettant au texte de suivre ce chemin.

lttext style"font-familyVerdanafont-size42.3333
fillblack"gtlttextPath xlinkhref"chemincercle"
gtScalable Vector Graphics lt/textPathgtlt/textgt
44
Exemples




Exemple de l'image de la page d'accueil du site
Web.
5ème étape on va juste vérifier ce que donne ce
fichier SVG pour éventuellement modifier quelques
choses pour un meilleur rendu.
45
Conclusion