Scalable vector graphics SVG

Faculté I&C, Claude Petitpierre, André Maurer

Scalable vector graphics

SVG

http://www.yoyodesign.org/doc/w3c/svg1/

(documentation en français – voir menu Aides)


Page SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org /1999/xlink“>

<script type="text/javascript"> <![CDATA[ function execute (x) { . . . Javascript } ]]> </script> <circle id="circ" cx="25" cy="75" r="20" fill="red"/></svg> Eléments SVG


Insertion d’un fichier SVGdans un fichier HTML

<embed src="xxx.svg" name="svg0" type="image/svg+xml" width="200px" height="200px"/>


Composants SVG

<line id="ln" x1="5" y1="5" x2="45" y2="45" stroke="red"/>

<circle id="circ" cx="25" cy="75" r="20" fill="red"/>

<ellipse id="ell" cx="75" cy="75" rx="20" ry="10" fill="red"/>

<path id="path" d="M105,105 C105,145 145,145 145,105" stroke="red" fill="none"/>

<polyline id="pLine" points="105,5 145,45 105,45 145,5" stroke="red" fill="none"/>

<polygon id="poly" points="155,5 195,45 155,45 195,5" stroke="red" fill="none"/>

<rect id="rect" x="105" y="55" width="40" height="40" fill="red“ stroke-width=“4“/>

<rect id="rectr" x="155" y="55" rx="5" ry="5" width="40" height="40" fill="red"/>


Placement du texte

<text x="200" y="50" text-anchor="end">Un texte</text>

end

middle

start

fill="red"


Formatage du texte

<g font-family="Verdana" font-size="45" id='grp'> <text x="200" y="150" fill="blue"> Ce <tspan font-weight="bold" fill="red">n'est pas</tspan> une banane. </text> </g>


Transformations<line id="ln1" x1="5" y1="5" x2="45" y2="5" stroke="blue"/>

<line id="ln2" x1="5" y1="5" x2="45" y2="5" stroke="green" transform="rotate(30, 8, 20)"/>

<line id="ln3" x1="5" y1="5" x2="45" y2="5" stroke="red" transform="translate(20, 20) rotate(30, 8, 20)"/>

<line id="ln3" x1="5" y1="5" x2="45" y2="5" stroke="black" transform="rotate(30, 8, 20) translate(20, 20)"/>

centre de rotation


Transformation de groupe

<g transform="rotate(45, 8, 50)"> <line id="ln" x1="5" y1="5" x2="45" y2="5" stroke="red"/> <line id="ln" x1="5" y1="15" x2="45" y2="15" stroke="red"/> <line id="ln" x1="5" y1="25" x2="45" y2="25" stroke="red"/></g>


Liste des transformations

transform="rotate(30, 80, 100)"

transform="translate(100, 110)"

transform="scale(2, 3)"

transform="skewX(45)"

transform="skewY(30)"

Les angles sont en degrés


Matrice de translation

x' 1 0 tx x

y' = 0 1 ty * y

1 0 0 1 1

x' = x + tx

y' = y + ty

1 = 1


Matrice d’échelle

x' sx 0 0 x

y' = 0 sy 0 • y

1 0 0 1 1

x' = sx · x

y' = sy · y

1 = 1


x' cos(a) -sin(a) 0 x

y' = sin(a) cos(a) 0 • y

1 0 0 1 1

Matrice de rotation

x' = x cos(a) – y cos(a)

y' = x sin(a) + y cos(a)

1 = 1


Rotation en 2 dimensions

vy

vx

vx'vy'v

v'

vx‘ = = *

vy‘ = = *

vx cos cos vx

vx sin sin cos -sin vx

sin cos vy

- vy sin ? - sin vy cos ? cos vy


x' 1 tan(a) 0 x

y' = 0 1 0 • y

1 0 0 1 1

Matrice d’inclinaison selon xskewX

x' = x + y tan(a)

y' = y

1 = 1


x' 1 0 0 x

y' = tan(a) 1 0 • y

1 0 0 1 1

Matrice d’inclinaison selon y

x' = x

y' = x tan(a) + y

1 = 1


Matrices de transformation

x’ a c e

y’ = b d f

1 0 0 1

•

a’ c’ e’ x

b’ d’ f’ • y

0 0 1 1

Ce qui explique pourquoi les transformations sont appliquéesen partant de la dernière dans les transformations définies dansles éléments SVG.


Matrices de transformation

a c e

b d f

0 0 1

La dernière ligne est toujours la même. Il suffit donc de connaître 6 composantes de la matrice pour la déterminer. On peut parfois la passer à une fonction sous la forme d’un tableau à une dimension:

[a b c d e f]

par exemple pour une inclinaison:

[1 tan(a) 0 0 1 0]


Exemple de transformation définie par une matrice

transform="rotate(30)"

correspond à

transform=“matrix(0.866, 0.5, -0.5, 0.866, 0, 0)"

avec 0.866 = cos(Math.PI/180.0 * 30.0)

0.5 = sin(Math.PI/180.0 * 30.0)

(Dans les transformations des éléments, les angles sont en degrés)


Clic sur un élément et affichage des coodonnées

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<script type="text/javascript">

<![CDATA[

function execute (event, n) {

alert(event.clientX+" "+ event.clientY+" "+n)

} // lieu du pointage de la souris

]]>

</script>

<circle id="circ" cx="25" cy="75" r="20" fill="red"

onclick="execute(evt,5)"/>

</svg>


Lieu du pointage de la souris


xmlns:xlink="http://www.w3.org/1999/xlink"

onclick='execute(evt)'>


<![CDATA[

function execute (event) {

alert(event.clientX+” “+event.clientY)

}

]]>

</script>


</svg>



xmlns:xlink="http://www.w3.org/1999/xlink"

onmousemove="execute(evt,6)">


<![CDATA[

function execute (e, n) {

document.getElementById("circ").setAttribute("cx", e.clientX)

document.getElementById("circ").setAttribute("cy", e.clientY)

} // le cercle suit la souris !

]]>

</script>


</svg>

Placement d’objets sous la souris


Création d’éléments sous la souris<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onmousemove="execute(evt)"> <script type="text/javascript"> <![CDATA[ function execute (e) { var shape = document.createElementNS( "http://www.w3.org/2000/svg", "circle"); shape.setAttribute("cx", e.clientX); shape.setAttribute("cy", e.clientY); shape.setAttribute("r", 2); shape.setAttribute("fill", "green"); document.documentElement.appendChild(shape); } ]]> </script></svg>


Dessin SVG dans une page HTML

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>test</title> <script type="text/javascript"> function tst() { execute(100,100) // défini dans le fichier SVG } </script> </head> <body> <button onclick='tst()'>Test</button> <embed src="temp.svg" name="svg0" type="image/svg+xml" width="200px" height="200px"/> </body></html>


Communication HTMLSVG

Top

top.battre() // appel top.bouger = function() { . . . } // définition

Graphique SVG

Page HTML

function battre() { . . . } // définition bouger() // appel


Appels HTML SVG

Page HTML

svgDocument.getElementById(‘cercle’).setAttribute(“x”, 12)

Zone SVG

// dans onload ou autre top.svgDocument = document


Définition de groupes et de chablons

<defs> groupes . . . (dans n'importe quel ordre) éléments . . .<g id='group1' fill='green' transform='scale(0.5) rotate(30)'> éléments . . .</g></defs>

<use x='240' y='5' xlink:href='#group1' />


Dégradés de couleur

<defs><linearGradient id='unGradient' x1=“20%" y1="0%" x2="100%" y2=“50%"><stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/><stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/></linearGradient></defs>

<ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>


Dégradé radial

<defs><radialGradient id="unGradient" cx="40%" cy="20%" r="30%" fx="40%" fy="20%"><stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/><stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/></radialGradient></defs>

<ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>


Textes incurvés

<defs><path id="textPath" d="M10 50 C10 0 90 0 90 50"/></defs>

<text fill="red"> <textPath xlink:href="#textPath">Aaaa Bbbb Cbbb</textPath></text>

Scalable vector graphics SVG

Documents

Transcript of Scalable vector graphics SVG