Vous êtes sur la page 1sur 72

Sca|ab|e Vector

Graph|cs
Une future p|erre angu|a|re
de |'|nfrastructure WWW
Abde!Ju!I! HASSINI
CuesLce que SvC?
1 Scalable vecLor Craphlcs esL le nouveau sLandard de
graphlques vecLorlels offlclels du W3C (World Wlde Web
ConsorLlum) Comme LouLes les nouvelles normes du W3C
2 ll esL base sur xML eL Lravallle en collaboraLlon avec
dauLres normes basees sur xML Lels que u1u Schema
xSL xCL
SMlL xP1ML xlorms xCL 8ul namespaces eLc
3 Ln ouLre ll permeL luLlllsaLlon de la norme LCMA
!avascrlpL ce qul slgnlfle que Lous les elemenL slmples SvC
eL Lous les aLLrlbuLs peuvenL Lre modlfles avec des scrlpLs
4 SvC permeL pour la premlere fols duLlllser un sLandard
ouverL pour lafflchage de graphlques vecLorlels de hauLe
quallLe dans les appllcaLlons web
DLlllsaLlons les plus lnLeressanLes de SvC
W vlsuallsaLlon de conLenus (economlques
processus carLes eLc)
W lnLerface uLlllsaLeurs pour cerLalns Lypes
d'appllcaLlons lnLerneL
W uesslns sLaLlques anlmes ou mme lnLeracLlfs
dans le monde de l'educaLlon
W AnlmaLlons mulLlmedla de conLenus
formallsables (chlmle maLhs eLc)
AvanLages parLlcullers de SvC
1 lnserLlon dans le monde xML/xP1ML
W CeneraLlon de SvC avec xSL1/P eLc parLlr de
donnees xML
W lnLegraLlon dans xP1ML vlewers SMlL eLc
W DLlllsaLlon de ccs
W ScrlpLable avec [avascrlpL vla dom (sLandard)
2 osslblllLe de parLager du code de Lravalller
dlrecLemenL avec le formaL
3 Modele de couleurs sophlsLlque fllLres comme dans
hoLoshop
4 Dne speclflcaLlon assez clalre
3 Mellleurs capaclLes graphlques dans l'ensemble
SvC archlLecLure eL sLrucLure des documenLs
1 Comme Lous les flchlers xML SvC se compose dun
enLLe un elemenL raclne (SvCelemenL) eL
plusleurs elemenLs enfanLs avec des aLLrlbuLs
2 SvC falL un usage lnLenslf des aLLrlbuLs
3 Les enLlLes peuvenL Lre deflnles eL uLlllsees
ulLerleuremenL dans le flchler (par exemple pour les
deflnlLlons CSS) eL pour les graphlques reuLlllsables
4 Dne auLre faon de reuLlllser les elemenLs SvC esL
de deflnlr des references lob[eL avec luLlllsaLlon
xllnk href -elemenL
SvC archlLecLure eL sLrucLure des documenLs
Les developpeurs SvC peuvenL egalemenL uLlllser
les foncLlons de regroupemenL eL de commuLaLlon
declaraLlons (ayanL des lnsLrucLlons de LralLemenL
dlfferenLs en foncLlon des capaclLes du cllenL eL du
langue)
Au seln de la defs secLlon on peuL cenLrallser la
deflnlLlon des ob[eLs reuLlllsables
Les elemenLs dun documenL SvC onL un ordre de
dessln lmpllclLe avec les premlers elemenLs dans le
documenL SvC pelnLs premler Les elemenLs
sulvanLs sonL pelnLs sur dessus des elemenLs de[
pelnLs en LenanL compLe des reglages dopaclLe
SvC archlLecLure eL sLrucLure des documenLs
?xml verslon10 sLandaloneno?
!uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
svg
! un peLlL recLangle avec des colns arroundls
recL x30 y30 rx3 ry3 wldLh200 helghL100
sLyleflll#ll00llsLroke#000099/
! un LexLe au meme endrolL
LexL x33 y90 sLylesLroke#000099flll#000099fonL
slze24 W /LexL
/svg
SvC archlLecLure eL sLrucLure des documenLs
?xml verslon10 sLandaloneno?
!uCC1?L svg DLlC //W3C//u1u SvC 11//Ln
hLLp//wwww3org/Craphlcs/SvC/11/u1u/svg11flaLdLd
svg wldLh3cm helghL4cm
xmlnshLLp//wwww3org/2000/svg
desclour separaLe recLangles/desc
recL x03cm y03cm wldLh2cm helghL1cm/
recL x03cm y2cm wldLh1cm helghL13cm/
recL x3cm y03cm wldLh13cm helghL2cm/
recL x33cm y3cm wldLh1cm helghL03cm/
/svg
SvC archlLecLure eL sLrucLure des documenLs
SvC archlLecLure eL sLrucLure des documenLs
?xml verslon10 encodlnguLf8?
svg xmlnshLLp//wwww3org/2000/svg verslon11 wldLh700 helghL400
LlLleLxemple slmple de flgure SvC/LlLle
desc Dn premler exemple /desc
recL wldLh700 helghL400 x0 y0 flllred /
polygon flllred sLrokegreen sLrokewldLh13 polnLs33073 379161 469161
397213 423301 330230 277301 303213 231161 321161 /
polygon flllred sLrokegreen sLrokewldLh13 polnLs379161 397213/
polygon flllred sLrokegreen sLrokewldLh13 polnLs397213 330230 /
polygon flllred sLrokegreen sLrokewldLh13 polnLs330230 303213 /
polygon flllred sLrokegreen sLrokewldLh13 polnLs303213 321161 /
polygon flllred sLrokegreen sLrokewldLh13 polnLs321161 379161 /
LexL x300 y40 urapeau uu Maroc /LexL
/svg
SvC archlLecLure eL sLrucLure des documenLs
loncLlonnallLes graphlques SvC
W SvC permeL de deflnlr un ensemble
dob[eLs graphlques en 2u base de
vecLeurs de geomeLrles d'lmages eL du
LexLe SvC vlewer consLrulL en lnLerne
une hlerarchle uCM arborescenLe afln
dacceder rapldemenL eL de manlpuler les
elemenLs eL leurs aLLrlbuLs
W Les elemenLs peuvenL Lre a[ouLes
supprlmes eL reordonner dans larbre
W SvC uLlllse les Lypes de forme sulvanLes
W 8ecLangles
W Clrcles
W Llllpses
W Llnes
W olyllnes
W olygons
W Symbols
W aLh-elemenLs
loncLlonnallLes graphlques SvC
1 Chaque elemenL graphlque esL represenLe par
un elemenL xML qul esL parameLrable avec
des aLLrlbuLs xML eL qul herlLe d'aLLrlbuLs de
ses parenLs
2 Comme dans d'auLres langages vecLorlels (par
ex v8ML) ll exlsLe des formes geomeLrlques
de base (recLangle elllpse cercle llgnes poly
llgnes eL polygone) LnsulLe ll exlsLe une
consLrucLlon pour produlre des formes
complexes
,xcan|smes pr|nc|paux
1 ALLrlbuLs
2 oslLlonnemenL
3 1ransformaLlons
4 SLyle
3 ALLrlbuLs xML vs aLLrlbuLs CSS
ttr|buts
W ll fauL se referer la speclflcaLlon pour connaiLre Lous
les deLalls lcl nous ne monLrons en regle generale
qu'un peLlL exLralL car leur nombre esL enorme !
W La pluparL des elemenLs se parLagenL un nombre
commun d'aLLrlbuLs comme par exemple l'aLLrlbuL ld
(ldenLlflcaLeur) ou encore sLyle (sLyles CSS2)
W La pluparL des valeurs d'aLLrlbuLs sonL assez lnLulLlfs
(pour ceux qul connalssenL un peu CSS) ar conLre
pour cerLalns ll exlsLe des verlLables sousgrammalres
(volr lormes arblLralres avec paLh par exemple)
9os|t|onnement
W Les ob[eLs SvC se poslLlonnenL dans un
sysLeme de coordonnees qul commence en
hauL eL gauche (praLlque sLandard en
graphlsme lnformaLlque)
W ll esL posslble de Lravalller avec des
coordonnees locales
@ransformat|ons
W Chaque ob[eL peuL Lre LranslaLe orlenLe eL
change de Lallle
W ll herlLe des LransformaLlons de l'ob[eL parenL
volr SysLeme de coordonnees LransformaLlons
eL unlLes
Sty|e
W SvC deflnlL quelques dlzalnes d'aLLrlbuLsproprleLes
appllcables cerLalns elemenLs Ln ce qul concerne les
elemenLs graphlques voll les 2 plus lmporLanLs
1 sLroke deflnlL commenL le bord d'un ob[eL esL palnL
2 flll deflnlL commenL le conLenu d'un ob[eL esL palnL
W SvC possede 2 synLaxes dlfferenLes pour deflnlr la mlse en
forme d'un elemenL
1 L'aLLrlbuL sLyle reprend la synLaxe eL les sLyles de
CSS2(on peuL meLLre des sLyles dans un flchler exLerne comme
auLres flchlers xml)
2 our chaque sLyle ll exlsLe aussl un aLLrlbuL de
presenLaLlon SvC cela slmpllfle la generaLlon de
conLenus SvC avec xSL1
ttr|buts k, vs attr|buts CSS
W vous avez souvenL le cholx d'uLlllser solL
l'aLLrlbuL sLyle solL un aLLrlbuL SvC pour la
mlse en forme d'un ob[eL
W AvanLage de CSS vous pouvez Lransferer vos
connalssances CSS/P1ML
W AvanLage des aLLrlbuL xml plus faclles
generer avec xSL1 h eLc
eux faons pour fa|re |a m|se en
forme
,xthode CSS
recL x30 y30 rx3
ry3 wldLh200
helghL100
sLyleflll#CCCCllsLroke#000
099/
LexL x33 y90
sLylesLroke#000099flll#000
099fonLslze24 PLLLC
WC8Lu /LexL
,xthode attr|buts
recL x30 y30 rx3
ry3 wldLh300
helghL100 flll#CCCCll
sLroke#000099/
LexL x33 y90
sLroke#000099
flll#000099 fonLslze24
PLLLC WC8Lu/LexL
ectang|es rect
W permeL de deflnlr des recLangles y comprls des colns arrondls
W ttr|buts de base de rect
W x coordonnx et y coordonnx
W lndlquenL la poslLlon du coln superleur gauche
W dlrecLlon vers la drolLe eL le bas du canveas
W x13
W y13mm
W ar defauL x eL y sonL 0 les unlLes par defauL sonL herlLes ou sonL des plxels
W |dth |ongeur et he|ght |ongeur
W deflnlssenL la Lallle du recLangle
W wldLh 100
W helghL 100
W rx |ength et ry |ength
W Axe x eL y de l'elllpse uLlllsee pour arrondlr pas de nombre negaLlf
W ne dolL pas depasser la molLe des longeurs respecLlfs
W rx 3
W ry 3
ectang|es rect
W ?xml verslon10 sLandaloneno?
W svg wldLh270 helghL170 xmlnshLLp//wwww3org/2000/svg
W recL x3 y3 wldLh263 helghL163
sLyleflllnonesLrokebluesLrokewldLh2 /
W recL x13 y13 wldLh100 helghL30 flllblue sLrokeblack
sLrokewldLh3 sLrokedasharray9 3/
W recL x13 y100 wldLh100 helghL30 flllgreen
sLrokeblack sLrokewldLh3 rx3 ry10/
W recL x130 y13 wldLh100 helghL30 flllred sLrokeblue
sLrokeopaclLy03 flllopaclLy03 sLrokewldLh3/
W recL x130 y100 wldLh100 helghL30
sLyleflllredsLrokebluesLrokewldLh1/
W /svg
e cerc|e c|rc|e et |'e|||pse e|||pse
W ttr|buts de base pour |e cerc|e et |'e|||pse
W cx coordonnx et cy coordonnx
W cy10 cy20
W deflnlssenL la poslLlon du cenLre (c clrcle)
W r |ongeur
W r10
W deflnlL le radlus du cercle
W rx |ongeur et ry |ongeur
W rx10 ry20
W deflnlL les radlus des axes x eL y de l'elllpse (rradlus)
e cerc|e c|rc|e et |'e|||pse e|||pse
?xml verslon10 sLandaloneno?
svg wldLh470 helghL470
xmlnshLLp//wwww3org/2000/svg
clrcle cx90 cy110 r30 flllred
sLrokeblue sLrokewldLh10 / elllpse
cx230 cy100 rx30 ry10 flllred /
elllpse cx160 cy230 LransformroLaLe(
30) rx130 ry100 flllnone sLrokeblue
sLrokewldLh20 /
/svg
|gnes ||ne et po||||gnes po|y||ne
W ttr|buts de base pour ||ne
W x1 coord|nate et y1 coord|nate
W olnL de deparL
W x1100 y1300
W x2 coord|nate et y2 coord|nate
W olnL de d'arrlve
W x2300 y2300
W ttr|buts de base pour po|y||ne
W po|nts chem|n de po|nts
W polnLs 10100101202020
W Serles de polnLs xy qul seronL lles
|gnes ||ne et po||||gnes po|y||ne
?xml verslon10 sLandaloneno?
svg wldLh470 helghL470
xmlnshLLp//wwww3org/2000/svg
polyllne flllnone sLrokeblue sLrokewldLh10
polnLs30200100200100120130120130200200200 /
llne x1300 y1200 x2400 y2100 sLroke red
sLrokewldLh3 /
llne x1300 y1100 x2400 y2200 sLroke red
sLrokewldLh3 /
/svg
9o|ygones
W Dn polygone esL une forme fermee la bordure
une polyllne fermee
W ttr|buts de base pour po|ygone
W po|nts chem|n de po|nts
W polnLs 10100101202020
W Serles de polnLs xy qul seronL relles
(egalemenL le dernler au premler polnL)
9o|ygones
?xml verslon10 sLandaloneno?
svg wldLh470 helghL470
xmlnshLLp//wwww3org/2000/svg
polygon flllyellow sLrokeblue sLrokewldLh10
polnLs302301002001001201301201302002002
30 /
polygon flllred sLrokeblue sLrokewldLh10
polnLs33073 379161 469161 397213 423301
330230 277 301 303213 231161 321161 /
/svg
ormes arb|tra|res avec path
W 'x|xment path permet de dxf|n|r des formes arb|tra|res
(shapes) ||es peuvent avo|r un contour (stroke) et tre
ut|||sx comme c||pp|ng path
W ttr|buts de base
W d path data
W dM 100 100 L 300 100 L 200 300 z
W dM100100 L300100 200300 z (commande ldenLlque)
W paLh daLa esL un consLrucLlon assez complexe donL on
presenLera seulemenL un exLralL cldessous
W noLe pour la synLaxe des paLh daLa Cn peuL lnserer des
vlrgules eL des flns de llgnes quand on veuL on peuL
ellmlner l'espace blanc enLre une commande (leLLre) eL les
chlffrenL qul sulvenL
Commandes path data de base
W , et m
W M eL m sonL des commandes moveLo ll fauL s'lmaglner le deplacemenL sans
desslner du crayon qul desslne M lndlque des coordonnees absolues m des
coordonnees relaLlves par rapporL au polnL de deparL Dn M ouvre Lou[ours un
souschemln (volr aussl la commande Z)
W M|m (x y)+
W M100 100 200 200
W et |
W L eL l desslnenL des llgnes du polnL couranL vers le(s) polnL(s) lndlque(s) Cela
ressemble donc l'lnsLrucLlon polyllne
W L | l
W L 200300 100200
W et z
W Z eL z fermenL le souschemln couranL AuLremenL dlL on desslne une llgne depuls
le polnL couranL vers le debuL du chemln (deflnl avec un M ou m)
W Z|z
W et h V et v
W desslnenL des llgnes verLlcales eL horlzonLales
W h100
9ath
?xml verslon10 sLandaloneno?
svg wldLh 470 helghL 470
xmlnshLLp//wwww3org/2000/svg
paLh dM 30 30 L 100 130 130 30 z
flllred sLrokeblue sLrokewldLh2 /
polygon polnLs130 30 200 130 230 30
flllyellow sLrokeblue sLroke
wldLh2 /
/svg
1 Cn pose le crayon
(M30 100) ensulLe
on Llre un LralL vers le
coln du bas (L 100
100) eL vers le coln en
hauL drolLe (130
100) flnalemenL on
ferme (z)
2 noLez que le Lrlangle
[aune (parell) a eLe
falL avec polyqoo
Commandes path data
supp|xmenta|res
W C et c S et s
W ermeL de desslner avec des courbes ezler
W ; et q @ et t
W Courbes ezler quadraLlques
W et a
W Arc elllpLlques (bouLs d'elllpse ou de cercle
lorsque rxry)
W A|A (rx ry xaxlsroLaLlon largearcflag sweep
flag x y)+
9ath
?xml verslon10 sLandaloneno?
svg wldLh600 helghL600
xmlnshLLp//wwww3org/2000/svg
paLh dM180180 v73 a7373 0 00 7373 z
flllyellow sLrokeblue sLrokewldLh3 /
paLh dM200200 h30 a3030 0 10 3030 z
flllred sLrokeblue sLrokewldLh3 /
!flgure
paLh dM400180 L330130 a10060 0 10
10030 z flllgreen sLrokeblue sLroke
wldLh3 /
/svg
1 our falre la parL [aune on se
poslLlonne 180 180 (M
180180)
2 on desslne une llgne verLlcale
vers y73 (v73) Cela devlenL
le polnL de deparL pour l'arc
3 on desslne un arc (a) avec
radlus x73 eL radlus y73
(7373) sans roLaLlon (0) Le
2eme 0 lndlque l'arc se Lrouve
du cLe peLlL le 3eme 0
lndlque une dlrecLlon de
dessln negaLlve Les 7373
lndlquenL l'arrlve de l'arc
4 on ferme le LouL (z)
3 La parL rouge se falL
slmllalremenL on desslne l'arc
dans le mme sens (negaLlf)
mals du cLe large (1) de
l'angle lmpllclLemenL deflnlL
par le deparL les radlus eL
l'arrlve
e texte
W Chaque elemenL LexL enLraine le rendu d'une seule
chaine de LexLe
W Dn LexLe esL un ob[eL graphlque comme un auLre Cn
peuL appllquer les foncLlons de LransformaLlon de
sysLeme de coordonnees de pelnLure de rognage eL
de masquage alnsl qu'un sLyle CSS
W ar defauL un LexL esL afflche sur une llgne mals on
peuL aussl le rendre au long du conLour d'un elemenL
'paLh'
W @span our afflcher un LexLe sur plusleurs llgnes on
dolL precalculer les reLours la llgne eL employer un
seul elemenL LexL avec un ou plusleurs elemenLs
enfanLs 'Lspan' eL les valeurs adequaLes pour les
aLLrlbuLs x y dx eL dy
e texte
1 ?xml verslon10 sLandaloneno?
2 svg wldLh1000 helghL600 xmlnshLLp//wwww3org/2000/svg
3 defs
4 paLh ldMon1race dM 100 200 C 200 100 300 0 400 100 C 300 200 600
300 700 200 C 800 100 900 100 900 100 /
3 /defs
6 descLxemple Loap02/desc
7 use xllnkhref#Mon1race flllnone sLrokered /
8 LexL fonLfamllyverdana fonLslze423 flllblue
9 LexLaLh xllnkhref#Mon1race Ln
10 Lspan dy30 flllred
11 hauL
12 /Lspan
13 Lspan dy30
14 /Lspan puls en bas eL encore en hauL /LexLaLh
13 /LexL
16 ! MonLre le conLour du canvevas avec un elemenL 'recL'
17 recL x1 y1 wldLh998 helghL298 flllnone sLrokeblue sLroke
wldLh2 /
18 /svg
e texte
es ||ens
W SvC permeL de falre des llens vers d'auLres
ressources (D8Ls)
W La ballse a /a dellmlLe la zone senslble
dans l'exemple sulvanL le recLangle verL eL le LexLe
le llen esL lndlque avec un aLLrlbuL xLlnk
(xllnkhref)
W ALLenLlon ll fauL declarer le name space pour
xLlnk
es ||ens
?xml verslon10 encodlnglSC88391
sLandaloneno?!uCC1?L svg DLlC //W3C//u1u SvC
20010904//Ln hLLp//wwww3org/18/2001/8LCSvC
20010904/u1u/svg10dLd
svg helghL900 wldLh900
xmlnsxllnkhLLp//wwww3org/1999/xllnk
xmlnshLLp//wwww3org/2000/svg
descDn llen se cree slmplemenL avec la ballse a/desc
a xllnkhrefhLLp//wwwgooglecoma recL
sLyleflll#00ll00sLroke#llll00 wldLh300 helghL40 ry3
rx3 y80 x30/
LexL x100 y110
sLylesLroke#000099flll#000099fonLslze24formaLlon efflcace
/LexL
/a
/svg
e fragment d'un document SVG
W svg esL la raclne d'un graphlsme SvC
W on peuL lmbrlquer des elemenLs svg parml
d'auLres eL les poslLlonner
W Chaque svg cree un nouveau sysLeme de
coordonnees Alnsl on peuL facllemenL
reuLlllser des fragmenLs graphlques sans
devolr modlfler des coordonnees
e fragment d'un document SVG
?xml verslon10 sLandaloneno? !uCC1?L svg DLlC //W3C//u1u SvC
10//Ln hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
svg
recL x30 y30 rx3 ry3 wldLh200 helghL100
sLyleflll#CCCCllsLroke#000099/
LexL x33 y90 sLylesLroke#000099flll#000099fonL slze14
PLLLC WC8Lu /LexL
svg |th200 he|ght200 x200 y100
rect xS0 yS0 rxS ryS |dth200
he|ght100 sty|ef|||#CCCCstroke#000099]
text xSS y90 sty|estroke#000099f|||#000099font
s|ze14 W ]text
]svg
/svg
Groupage d'x|xments avec g
W L'elemenL g serL regrouper des elemenLs qul vonL
ensemble
Les enfanLs de g herlLenL les proprleLes le groupe esL
documenLe avec LlLle eL desc
W g sLrokegreen sLrokedasharray9 1
W LlLle conLenLsLrucLured LexLMon plus beau dessln /LlLle
W llne x13 y180 x2133 y280 sLrokewldLh30 sLrokeblack
sLrokedasharraynone /
W llne x110 y130 x230 y2100 sLrokewldLh3 /
W llne x140 y130 x260 y2100 sLrokewldLh10 /
W llne x170 y130 x290 y2100 sLrokewldLh13 /
W llne x1100 y130 x2120 y2100 sLrokewldLh20 /
W llne x1130 y130 x2140 y2100 sLrokewldLh23 /
W /g
Groupage d'x|xments avec g
W ?xml verslon10 sLandaloneno?
W !uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
W svg helghL900 wldLh900 xmlnsxllnkhLLp//wwww3org/1999/xllnk
xmlnshLLp//wwww3org/2000/svg
W g sLrokegreen sLrokedasharray9 1
W LlLle conLenLsLrucLured LexLMon plus beau dessln /LlLle
W llne x13 y180 x2133 y280 sLrokewldLh30 sLrokeblack sLroke
dasharraynone /
W llne x110 y130 x230 y2100 sLrokewldLh3 /
W llne x140 y130 x260 y2100 sLrokewldLh10 /
W llne x170 y130 x290 y2100 sLrokewldLh13 /
W llne x1100 y130 x2120 y2100 sLrokewldLh20 /
W llne x1130 y130 x2140 y2100 sLrokewldLh23 /
W /g
W /svg
b[ets abstra|ts (chab|ons) symbo|
W symbol permeL de deflnlr un ob[eL
graphlque reuLlllsable avec use
W symbol ressemble g sauf que l'ob[eL lul
mme n'esL pas desslne
W symbol possede les aLLrlbuLs vlewox eL
preserveAspecL8aLlo en plus
b[ets abstra|ts (chab|ons) symbo|
1 ?xml verslon10 sLandaloneno?
2 !uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
3 svg helghL900 wldLh900
xmlnsxllnkhLLp//wwww3org/1999/xllnk
xmlnshLLp//wwww3org/2000/svg
4 symbol ldbleublancrouge
3 recL x0 flllblue wldLh10 helghL10/
6 recL x10 flllwhlLe wldLh10 helghL10/
7 recL x20 flllred wldLh10 helghL10/
8 recL x0 flllnone wldLh30 helghL10 sLrokeblack/
9 /symbol
10 use x10 y3 xllnkhref#bleublancrouge /
11 use x20 y20 xllnkhref#bleublancrouge opaclLy03 /
12 /svg
Sect|on de dxf|n|t|on def
W defs ressemble un peu symbol mals esL
plus slmple
W 1ouL elemenL l'lnLerleur de defs esL deflnl
mals pas desslne
W Cn peuL uLlllser arblLralremenL chaque elemenL
qul possede une ldenLlLe
defs
recL ldredsquare flllred wldLh10 helghL10/
recL ldyellowsquare flllyellow wldLh10 helghL10/
/defs
Ut|||sat|on d'x|xments use
W use permeL de reuLlllser les ob[eLs sulvanLs svg symbol g elemenLs
graphlcs eL use
W use se comporLe legeremenL dlfferemmenL selon le Lype d'ob[eL deflnlL
W ll s'aglL donc d'un lnsLrumenL de base pour evlLer de repeLer du code
W b[ets rxut|||sab|es
W Les ob[eLs dolvenL avolr un ldenLlflcaLeur xML
W recL ldredsquare flllred wldLh10 helghL10/xllnk esL le slmple
xLlnk sLandard ll fauL donc ne oubller de deflnlr son namespace
(normalemenL vous le falLes dans la raclne)
W svg wldLh10cm helghL33cm vlewox0 0 100 30
xmlnshLLp//wwww3org/2000/svg
xmlnsxllnkhLLp//wwww3org/1999/xllnk
W ttr|buts |mportants
W x y wlLh helghL permeLLenL de reposlLlonner eL de redlmenslonner l'ob[eL
W xllnkhref permeL de referencer eL lnsLanLler l'ob[eL (avec son aLLrlbuL ld )
Ut|||sat|on d'x|xments use
?xml verslon10 sLandaloneno?
!uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC
20010904/u1u/svg10dLd
svg wldLh10cm helghL33cm vlewox0 0 100 30
xmlnshLLp//wwww3org/2000/svg
xmlnsxllnkhLLp//wwww3org/1999/xllnk
recL ldMy8ecL wldLh60 helghL10/
use x20 y10 flllyellow xllnkhref#My8ecL /
use x20 y20 flllred xllnkhref#My8ecL /
/svg
Ut|||sat|on de 2 defs carrxs
?xml verslon10 sLandaloneno?
!uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
svg wldLh10cm helghL33cm vlewox0 0 100 30
xmlnshLLp//wwww3org/2000/svg
xmlnsxllnkhLLp//wwww3org/1999/xllnk
defs recL ldredsquare flllred wldLh10 helghL10/ recL
ldyellowsquare flllyellow wldLh10 helghL10/ /defs
use x20 y0 xllnkhref#yellowsquare /
use x30 y0 xllnkhref#redsquare /
use x40 y0 xllnkhref#yellowsquare /
use x20 y10 xllnkhref#redsquare /
use x30 y10 xllnkhref#yellowsquare /
use x40 y10 xllnkhref#redsquare /
use x20 y20 xllnkhref#yellowsquare /
use x30 y20 xllnkhref#redsquare /
use x40 y20 xllnkhref#yellowsquare /
/svg
@|tre t|t|e et descr|pt|on desc
W LlLle eL desc permeLLenL de documenLer le code Ces
elemenLs ne sonL pas afflches Lel quels par conLre un
cllenL peuL declder de les afflcher comme LoolLlps par
exemple
W 2 ra|sons pour b|en documenter
W Comprendre mleux le code !
W Alder l'uLlllsaLeur ( explorer )
W Alder les englns de recherche lndexer voLre SvC (SvC
c'esL du LexLe !)
W |xments qu| peuvent avo|r t|t|e et desc
W Les conLeneurs ( 'svg' 'g' 'defs' 'symbol' 'cllpaLh' 'mask'
'paLLern' 'marker' 'a' eL 'swlLch')
W les elemenLs graphlques ('paLh' 'LexL' 'recL' 'clrcle'
'elllpse' 'llne' 'polyllne' 'polygon' 'lmage' eL 'use')
mages |mage
W ormats b|tmap supportxs png et [peg
W lmage permeL egalemenL d'lnserer un flchler svg (avec un
nouveau vlewporL)
W ttr|buts |mportants
W x coord|nate et y coord|nate
W deflnlL l'emplacemenL (comme pour recL svg g eLc)
W |dth |ongeur et he|ght |ongeur
W deflnlL hauLeur eL largeur de l'lmage (comme pour recL svg
g eLc)
W ues valeurs poslLlves lndlquenL la Lallle afflcher
W (noLe une valeur de 0 empche l'afflchage les valeurs negaLlfs sonL
lnLerdlLes)
W x||nkhref ur| deflnlL l'D8l ou se Lrouve l'lmage
mages |mage
?xml verslon10 sLandaloneno?
!uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
svg wldLh1300 helghL1300
xmlnshLLp//wwww3org/2000/svg
xmlnsxllnkhLLp//wwww3org/1999/xllnk
lmage x10 y30 wldLh200 helghL100
xllnkhrefhoLo_00009[pg
LlLleLa phoLo large/LlLle
/lmage
lmage x230 y30 wldLh30 helghL100
xllnkhrefhoLo_00009[pg
LlLleLa phoLo longue/LlLle
/lmage
/svg
e canevas |es v|eports et |es un|txs
e canevas SVG
Le canevas SvC esL un espace lnflnl ou s'afflche le conLenu SvC
e v|eport SVG
W Le vlewporL SvC esL le recLangle vlslble pour l'uLlllsaLeur
W Le vlewporL possede un sysLeme de coordonnes qul commence en hauL
gauche du recLangle
W Cn peuL deflnlr un vlewporL dans un vlewporL (par exemple avec l'elemenL
svg)
W Le desslns se referenL par rapporL un sysLeme de coordonnees
d'uLlllsaLeur ( coooot yt ou poc) qul au deparL esL
ldenLlque au vlewpolnL coordlnaLe sysLem
W CerLalns cllenLs permeLLenL l'uLlllsaLeur de bouger eL zoom le user
space (AlLdrag pour bouger dans le plugln Adobe)
W 1ouL dessln qul depasse esL Lronque (cllpped)
e canevas |es v|eports et |es un|txs
W ongueurs
W Les longueurs sonL lndlques solL par un nombre solL par les unlLes
absolues ou relaLlves hablLuelles
em ex (largeur d'un m eL hauLeur d'un x de la fonLe couranLe)
px (plxels unlLes deflnles par le devlce)
pL pc (polnLs eL ??) normalemenL le cllenL lndlque comblen de
plxels correspond pL ou pc parells pour les cm mm eL ln
cm mm ln
pourcenLages (par rapporL au vlewporL)
W La slgnlflcaLlon de nombres sans unlLes s'eLabllL par rapporL au
unlLes uLlllses pour deflnlr le vlewporL (plxels par defauL)
W noLe Cn le cholx d'lgnorer les subLlllLes du sysLeme des longueurs
mals sulvanL la Lche ll fauL les maiLrlser eL rellre la speclflcaLlon
Crxat|on de v|eports
W |xments qu| crxent un nouveau v|eport
W svg symbol (lnsLanLle par use) lmage
W eL forelgnCb[ecL (par ex une lmage x3u dans l'avenlr)
W 'attr|but v|eox
W (expllcaLlons revolr un [our c'esL pas clalr du LouL
desole)
W 1ous les elemenLs qul creenL un nouveau vlewporL +
marker paLLern eL vlew permeLLenL d'adapLer les
dlmenslons d'un graphlsme celles d'un conLeneur
W vlewox mlnx mlny wldLh helghL
W ALLenLlon ne pas uLlllser auLre chose que des slmples
nombres ! donc 1300 eL pas 13mm ou 130px !!
Crxat|on de v|eports
W Lxemples
W svg wldLh300px helghL200px vlewox0 0 1300 1000
W svg wldLh300px helghL200px vlewox0013001000
W vlewox permeL de greffer un sysLeme de coordonnes sur
les dlmenslons reelles d'un vlewporL
W C'esL Lres uLlle lorsqu'on a par exemple des desslns en
meLres eL qul dolvenL quandmme s'afflcher l'ecran
W Cn peuL aussl creer des dlsLorslons (lorsque largeur eL
hauLeur du vlewox n'onL pas les mmes proporLlons que
ceux du vleworL)
Crxat|on de v|eports
1 ?xml verslon10 sLandaloneno?
2 !uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
3 svg wldLh6cm helghL43cm vlewox0 0 400 300
4 recL x0 y0 wldLh400 helghL300 flllyellow sLrokeblue
sLrokewldLh4 /
3 g
6 LlLlele gros bureau qul pose probleme/LlLle
7 recL x182 y30 wldLh80 helghL180 flllblue /
8 LexL x183 y200 fonLslze20180x80 cm /LexL
9 /g
10 recL x264 y0 wldLh120 helghL80 flllblue /
11 /svg
'attr|but preservespectat|o
W CeL aLLrlbuL esL dlsponlble lorsque lorsqu'un nouveau vleworL esL cree eL permeL d'lndlquer
commenL ll fauL preserver les raLlos (xy) dans le dessln
W preserveAspecL8aLloallgn meeLCrSllce
W e paramtre a||gn
W ll exlsLe plelns de dlfferenLes sorLes de allgn Ce parameLre lndlque ce qul dolL se passer
lorsque les rapporLs enLre longueur eL hauLeur du vlewox ne correspondenL pas au
vlewox auLremenL dlL comme Llrer le graphlsme
none 1lre le graphlsme aux 2 bords
xMln?Mln allgnemenL sur xmln eL ymln (coln du hauL gauche)
xMln?Mld allgnemenL sur xmln eL cenLragey
xMln?Max allgnemenL sur xmln eL ymax (coln en bas gauche)
alnsl que les auLres 6 comblnalsons enLre x* eL ?*
W e paramtre meetrS||ce
meeL (defauL) garder la aspecL raLlo LouLe la vlewox esL vlslble eL elle esL
adapLee au dessln le graphlse sera Lou[ours vlslble mals n'uLlllse peuLLre pas
LouL le vleworL
sllce garder la aspecL raLlo la vlewox uLlllse LouL le vleworL eL rlsque de
depasser dans un sens (selon allgn) auLremenL dlL ll y aura des graphlsmes
coupes
W ALLenLlon respecLez mlnuscules ou ma[uscules !!
'attr|but preservespectat|o
W ?xml verslon10 sLandaloneno?
W !uCC1?L svg DLlC //W3C//u1u SvC 10//Ln
hLLp//wwww3org/18/2001/8LCSvC20010904/u1u/svg10dLd
W symbol ldbureau /symbol
W svg x03cm y03cm wldLh4cm helghL3cm vlewox0 0 400 300
W use xllnkhref#bureau / /svg svg x6cm y03cm wldLh3cm
helghL3cm vlewox0 0 400 300
W preserveAspecL8aLlonone
W use xllnkhref#bureau / /svg svg x03cm y4cm wldLh3cm
helghL3cm vlewox0 0 400 300 preserveAspecL8aLloxMln?Mln meeL
W /svg svg x6cm y4cm wldLh3cm helghL3cm vlewox0 0
400 300 preserveAspecL8aLloxMln?Max sllce
W
W /svg
@ransformat|ons avec |'attr|but transform
W Lransform permeL de deflnlr des LranslaLlons scallngs
roLaLlons LransformaLlons selon une maLrlce skewx eL
skew?
W @rans|at|ons avec |e paramtre trans|ate
W Cn a de[ vu qu'll esL posslble de deflnlr un nouveau
sysLeme de coordonnees avec des nouveaux vleworLs eL
vlewox
W L'aLLrlbuL Lransform dlsponlble pour Lous les elemenLs
conLeneurs ou graphlques (volr LlemenLs graphlques de
base eL SLrucLuraLlon elemenLs de groupage eL references)
le permeL aussl
W LranslaLe(Lx Ly)
W Lxemple
W g LransformLranslaLe(3030)
@ransformat|ons avec |'attr|but transform
W ed|mens|onnement (sca||ng) avec |e paramtre sca|e
W scale (sx sy)
W lorsque sy n'esL pas lndlque on assume que sysx
W Lxemples
W g Lransformscale(2) recL / g
W g Lransformscale(23) recL / g
W C otat|ons avec |e paramtre rotate
W roLaLe(roLaLeangle cx cy)
W L'angle de roLaLlon en degrees
W cx eL cy deflnlssenL le polnL de roLaLlon (par defauL ll s'aglL de l'orglne du
sysLeme de coordonnees locale AS le cenLre de l'ob[eL !)
W rdre des opxrat|ons
W l'ordre des operaLlons esL sequenLlelle ! A chaque LransformaLlon on
obLlenL un nouveau sysLeme de coordonnees !
W Les 2 fragmenLs sulvanLs fonL la mme chose
@ransformat|ons avec |'attr|but transform
1 g LransformLranslaLe(1020) scale(2) roLaLe(43
LranslaLe(310) ! elemenLs graphlcs lcl
2 /g
3 g LransformLranslaLe(1020)
4 g Lransformscale(2)
3 g LransformroLaLe(43)
6 g LransformLranslaLe(310)
7 ! elemenLs graphlcs lcl /g
8 /g
9 /g
10 /g
@ransformat|ons avec |'attr|but transform
g LransformLranslaLe(1040) g lddessln flllnone
sLrokered sLrokewldLh3 llne x10 y10 x230
y20 / llne x10 y10 x20 y230 / /g LexL
x0 y0 fonLslze20 fonLfamllyverdana flllblue
AC (orlglnal) /LexL/gg LransformLranslaLe(20040) g
Lransformscale(13) use xllnkhref#dessln / LexL
x0 y0 fonLslze20 fonLfamllyverdana flllblue
AC (Lrscale)/LexL/g /gg LransformroLaLe(30)
/gg LransformLranslaLe(200160)scale(13)roLaLe(30)
/gg
LransformLranslaLe(37080)scale(03)roLaLe(30)skew?(30)
g
LransformLranslaLe(43020)scale(031)roLaLe(30)skew?(30)

ntroduct|on SVG dynam|que


hLLp//codegooglecom/p/svgedlL/
hLLp//codegooglecom/p/svgedlL/downloads/deLall?namesvgedlL231zlpcan2q
hLLp//Lecfaunlgech/guldes/Lle/hLml/svgdyn/svgdynhLml
LdlLeurs SvC
Lorsque vous envlsagez de concevolr un
graphlque SvC anlmaLlon ou slLe web vous
pourrlez prendre un edlLeur de LexLe eL
commencez Laper Cecl esL accepLable lorsque
le graphlque desLlne compose de seulemenL une
polgnee delemenLs Mals peu de gens peuvenL
ecrlre une courbe de ezler de ceLLe faon dans
un laps de Lemps ralsonnable
ueflnlLlon
Dn edlLeur naLlf de SvC esL un edlLeur qul a pour buL prlnclpal
de produlre des SvC ll esL opLlmlse pour foncLlonnallLe SvC
eL devralL meLLre en ouvre la pluparL des elemenLs SvC CeLLe
deflnlLlon esL le polnL de deparL A la sulLe de nos recherches
nous avons reunl dans la llsLe sulvanLe des programmes que
nous pourrlons appeler un edlLeur SvC naLlf
- Amaya
- LvolCraflx xSLudlo 6
- LdlLeur lnkscape Cpen Source
- !asc Weburaw
- SoluLlons de ressources en llgneedlLeur
- SkeLsa
- Sodlpodl
uans ce cours nous regarderons de plus pres Amaya
xSLudlo Weburaw eL Sodlpodl
,ob||e SVG d|tor de |tf|ash
Amaya
Amaya esL ledlLeur web / navlgaLeur base sur le W3C eL lon pourralL appeler
un vehlcule dessal pour de nouvelles normes ll propose un calendrler pour
lanlmaLlon eL de cerLalnes formes vecLorlelles de base Mals la convlvlallLe
dAmaya nesL pas assez bon pour un usage producLlf
kStud|o 6
Avec xSLudlo le marche edlLeur SvC a un nouveau concurrenL pour Web uraw
xSLudlo 6 offre une anlmaLlon de scenarlo une Lres bonne ergonomle un edlLeur de
scrlpL pour les scrlpLs LCMAScrlpL cLe cllenL eL la foncLlon dexporLaLlon pour SvC
moblle
Webra
!asc socleLe esL blen connue pour ses loglclels de manlpulaLlon dlmages alnL
Shop ro CeLLe socleLe a commence avec lun des premlers edlLeurs SvC
naLlf Weburaw Au debuL Weburaw navalL pas de concurrenL Au[ourdhul
xSLudlo esL le deuxleme edlLeur commerclal qul peuL Lre concurrencer
Weburaw
Sod|pod|
Sodlpodl offre beaucoup douLlls graphlques parLlr de formes de base pour
hulL ouLlls ezler A lheure acLuelle cerLalnes speclflcaLlons SvC onL
dlsparues Le plus lmporLanL esL lanlmaLlon avec un echeancler CesL une
foncLlonnallLe complexe eL pas faclle reallser acLuellemenL
Concluslon
W Avec LvolCraflx xSLudlo eL !asc Weburaw ll y a
deux edlLeurs sur le marche qul repondenL aux
besolns de la pluparL des concepLeurs Weburaw
esL un peu molns cher LvolCraflx offre plus de
foncLlons eL une mellleure ergonomle
W Aussl la communauLe open source esL un ou
deux pas derrlere des pro[eLs comme Sodlpodl
donner de lespolr pour lavenlr La quesLlon
flnale esL deux edlLeurs assez bon sonL sufflsanLs
pour falre un succes du SvC? euLLre pas mals
cesL un polnL de deparL
erspecLlves d'avenlr
W SvC esL au[ourd'hul un su[eL brlanL pour les developpeurs
W Le conLenu graphlque dynamlque de SvC consLlLue
acLuellemenL lapproche la plus pulssanLe eL la plus eleganLe
pour reallser des graphlques lnLeracLlfs eL anlmes sur le web
W Le large souLlen du W3C des lnsLlLuLlons eL des enLreprlses
devralL garanLlr son developpemenL raplde
W ll y a un grand nombre darLlcles eL de LuLorlels dlsponlbles
pour les webdeveloppeurs faclllLanL l'lnlLlaLlon ceLLe
nouvelle Lechnologle graphlque
W La peneLraLlon des pluglns SvC esL encore falble eL aucun
afflcheur SvC n'esL compleLemenL conforme au cahler des
charges Le plus populalre eL le plus avance esL Adobes SvC
vlewer (non dlsponlble pour Llnux / Dnlx)
W Dn nouveau groupe de Lravall esL consLlLue pour dlscuLer des
besolns speclflques de SvC pour apparells moblles Lels que les
uA eL les Lelephones cellulalres

Vous aimerez peut-être aussi