27ve
be2008 É ieS Bi Uiveiédei eShia Ai

Programmation Web

Liene 3informatique

Sébastien Verel

vereli3s.unie.fr

www.i3s.unie.fr/

∼

ÉquipeSoBi-UniversitédeNieSophia-Antipolis

1

Connaitreles prinipesde SVG

2

Connaitrelastruture d'un hiersvg

3

Connaitreles gures debase

4

Savoirregrouperunensemble de gures

5

Connaitreles propriétés prinipales:ll, stroke,et.

Question prinipaledujour :

Comment produireune imageen XML?

Cours de XML-Un format de dessinvetoriel en XML:SVG

G. Chagnon

http://www.ghagnon.fr/ours/xml/svg.html

Attentiontoutefoisquelquestrus datent.

Et biensur,les reommandationsdu W3C

SVG:SalableVetor Graphis

Crée en 1998 par lesprinipauxateurs duweb

langage de desriptionde graphique 2Dvetoriel

langage "léger" basésurXML

Avantagesdudessin vetoriel

AvantagesduXML

<?xml version="1.0" enoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphis/SVG/1.1/DTD/svg11.dtd">

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

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

</svg>

Entete XML,

Type de doument,

Espae de nomdansl'élément raine.

Façon W3Canal historique:

<objet type="image/svg+xml" data="file.svg"></objet>

Façon dissidente:

<embed sr="file.svg"></embed>

Etle plusbeau...

<p>Voii un retangle :

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

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

<svg:ret style="fill:#0000ff"

x="0" y="0" width="100" height="200"/>

</svg:svg>

Joli non ?

</p>

Texte:text

Retangles :ret

Cerleirleet ellipseellipse

Lignesline etpoly-lignespolyline

Polygones polygon

Formes arbitraires avepath

Synthaxe omme XHMTL (enfaitXML) aveattributs,y ompris

id etlass, etpropriétés de style!

<ret x="200" y="100" width="60" height="30"

fill="red" stroke="blue" stroke-width="3" />

<ret x="100" y="150" rx="10" ry="75"

width="30" height="200" />

<irle r="50" x="100" y="100" fill="yan" fill-opaity="1"/>

<ellipse rx="150" ry="100" x="250" y="150"

fill="yellow" fill-opaity="0.5"/>

<line x1="50" y1="50" x2="150" y2="400"

stroke="blue" stroke-lineap="round"/>

<line x1="75" y1="200" x2="350" y2="10"

stroke="green" stroke-lineap="round"/>

<polyline points="20,250, 100,100, 400,100, 300,450"

fill="none" stroke="red" stroke-lineap="round"/>

<polygon points="99,50,143,125,56,124,99,50"/>

<text x="100" y="200">Faile d'érire un texte</text>

<ret id="MonRet" width="6m" height="1m" x="1m" y="0.2m"/>

<use x="2m" y="2m" fill="yellow" xlink:href="#MonRet"/>

<use x="2m" y="3.5m" fill="red" xlink:href="#MonRet" />

<g id="bleublanrouge">

<ret x="0" fill="blue" width="40" height="40"/>

<ret x="40" fill="white" width="40" height="40"/>

<ret x="80" fill="red" width="40" height="40"/>

<ret x="0" fill="none" width="120" height="40"

stroke="blak" stroke-width="2"/>

</g>

<use x="60" y="40" xlink:href="#bleublanrouge" opaity="0.3" />

<symbol id="bleublanrouge">

<ret x="0" fill="blue" width="40" height="40"/>

<ret x="40" fill="white" width="40" height="40"/>

<ret x="80" fill="red" width="40" height="40"/>

<ret x="0" fill="none" width="120" height="40"

stroke="blak" stroke-width="2"/>

</symbol>

<use x="60" y="40" xlink:href="#bleublanrouge" opaity="0.3" />

<use x="40" y="20" xlink:href="#bleublanrouge" />

<defs>

<ret id="arrerouge" fill="red" width="40" height="40"/>

<ret id="arrejaune" fill="yellow" width="40" height="40"/>

</defs>

<use x="80" y="0" xlink:href="#arrejaune" />

<use x="120" y="0" xlink:href="#arrerouge" />

possibilitéd'appliquer unetransformationausens géométrique:

<ret width="100" height="50" x="10" y="50"

transform="translate(10,-20)" />

<ret width="100" height="50" x="10" y="50"

transform="rotate(45, 20, 20)" />

<ret width="100" height="50" x="10" y="50"

transform="sale(3)" />

<?xml-stylesheet type="text/ss" href="styleDessin.ss"?>

hier styleDessin.ss

ret.adre {

fill: none;

stroke: blak;

stroke-width: 1;

}

irle:hover {

fill: none;

stroke: blue;

stroke-width: 1;

}

#parours {

fill: none;

stroke: red;

stroke-width: 1;

}

Juste unourt exemple :

<use xlink:href="#ube" x="150" y="150">

<animate attributeName="y" dur="2s"

values="150; 140; 130; 120; 110; 100;

110; 120; 130; 140; 150" />

</use>

Voirlawebographie pour plusd'informationsformidables.

Manipulation en javasriptduDOM SVG:

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

xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300">

<sript><![CDATA[

var n=0;

funtion lone_objet(evt) {

if (evt.detail == 2) {

svgdo=evt.target.ownerDoument;

n += 1;

var objet=svgdo.getElementById("retangle");

var newnode = objet.loneNode(false);

newnode.setAttributeNS(null , "x" , 100 + 10 * n);

newnode.setAttributeNS(null , "y" , 100 + 10 * n);

newnode.setAttributeNS(null ,"fill","blue")

var ontents = svgdo.getElementById ('affihe');

ontents.appendChild (newnode)

}

}

℄℄></sript>

SébastienVerel ProgrammationWeb

(...)

℄℄></sript>

<g id="affihe">

<text id="texte" x="150" y="40" text-anhor="middle"

font-size="20" font-family="Arial" fill="red">

Double lik sur le retangle

</text>

<ret id="retangle" onlik="lone_objet(evt)"

x="50" y="50" width="100" height="50" fill="green"/>

</g>

</svg>

1

Connaitreles prinipesde SVG

2

Connaitrelastruture d'un hiersvg

3

Connaitreles gures debase

4

Savoirregrouperunensemble de gures

5

Connaitreles propriétés prinipales:ll, stroke,et.

Question prinipaledujour :

Comment produireune imageen XML?