Les formats vectoriels

(1)

Les formats vectoriels

Exemple : le format SVG

(2)

Introduction



SVG : c’est quoi

 Language de description d’image 2D

= format vectoriel

 Mais pas seulement :

 Contenu dynamique / Animation

 Contenu interactif

 Traitement d’image

 Basé sur du XML

 Fait pour le Web (Construit par W3C)

 Equivalent public du format flash

 Référence: http://www.w3.org/TR/2001/REC-SVG-20010904/

(3)

Introduction



SVG=Scalable Vector Graphics



La visualisation des fichiers au format SVG nécessite une afficheur (viewer)



MS Internet explorer



Adobe svg viewer



Corel SVG viewer



…

(4)

Exemple

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

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

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<text x="0.5cm" y="0.5cm" width="2cm" height="1cm">Le texte est ici</text>

<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm" fill="blue" stroke="green"

stroke-width="5"/>

</svg>

(5)

Rappel : Principe des formats XML



XML = Extensible Markup Language



Balise



Ex: <html> </html> ou <br/>



Attribut:



Ex : <p align="center">ce texte est centr&eagut;</p>



DTD =Document Type Definition

(6)

Types de 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

(7)

Structure d'un document SVG

 Un document SVG se compose d'un ou plusieurs fragments délimités par la balise <svg>

 La balise <svg> dé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 )

 Le repère initiale liè au canevas est en (0,0) Les x de gauche à droite

Les y de haut en bas

(8)

Les formes de bases



Le rectangle

<rect x="100" y="100" width="400"

height="200" rx="50" fill="green" />



Le cercle

< circle cx="600" cy="200" r="100"

fill="red" stroke="blue" stroke-width="10"

/>



ellipses

<ellipse rx="250" ry="100" fill="red" />

(9)

Les formes de base



La line



<line x1="100" y1="300" x2="300" y2="100"

stroke-width="5" />



La polyligne



<polyline fill="none" stroke="blue" stroke-

width="10" points="50,375 150,375 150,325 250,325 " />



Le polygone



<polygon fill="lime" stroke="blue" stroke-

width="10" points="850,75 958,137.5 958,262.5

850,325 742,262.6 742,137.5" />

(10)

Le text



<text> et ses principaux attributs

Bonjour

</text>

(11)

Les tracés



Définit par la balise <path>



Attribut d



Définit le contour d’une forme (chemin du tracé)



Il est définit par une succession de lettre et des valeurs x et y de déplacement (suivant principe de la tortue)

 M => Moveto

 L => lineto

 Z => ClosePath

(12)

Les tracés



Exemple :



<path d="M 100 100 L 300 100 L 200

300 z" fill="red" stroke="blue" stroke-

width="3" />

(13)

Les tracés



Moveto



M => en coordonnées absolues



m => en coordonnées relatives (sauf si au début)



Lineto



L => absolues



l => relatives



H,h => déplacement horizontaux



V,v => déplacement verticaux

(14)

Les tracés



Il est possible de créer



des courbes de bézier



des enchaînements

d’arcs elliptiques

(15)

Regroupement

 <g> permet de regrouper des éléments

 En affectant un attribut à <g> il sera appliqué à tous les éléments contenus.

 Exemple:

</g>

</g>

(16)

Attributs communs aux formes



Les principaux



Fill= peinture de remplissage (couleur, texture,dégradé…)



Stroke=couleur de bordure



Stroke-width= épaisseur de la bordure



Opacity = valeur du canal alpha

(17)

Le référencement



Il est posible de définir un élément et de lui attribuer un identifiant <defs> et <use>

<defs>

<circle id="anneau" fill="none" stroke-width="2" r="8.5"

opacity=".5"/>

</defs>

(18)

Système de coordonnées, transformations et unités



Les objets graphiques sont construits dans une espace appelé canevas.



Le canevas est infini mais seulement

une région rectangulaire de celui-ci sera affichée = viewport



La viewport est définie avec des attributs de l’élément svg

 <svg x="10" y= "10" whidth= "100" height="100">

(19)

Système de coordonnées, transformations et unités



Il est possible de préciser l’unité de longueur utilisée.



Systèmes relatifs

 em resp. ex = font-size respec x-height,

 px = 1 unité utilisateur (sans redéfinition du système de coordonnées 1 px = 1 pixel)

 % = % de la taille de la « viewport »



Systèmes absolus (sauf si redéfinition du sys. de coord.)

 "1pt" = "1.25px" (1.25 user units)

 "1pc" = "15px" (15 user units)

 "1mm" = "3.543307px" (3.543307 user units)

 "1cm" = "35.43307px" (35.43307 user units)

 "1in" = "90px" (90 user units )

(20)

Système de coordonnées, transformations et unités

 L’attribut « transform »



Il redéfinit le système de

coordonnées en transformant le repère initial



Exemple =>

(21)

<!-- Établit un nouveau système de coordonnées, dont l'origine est (50,30)

dans le syst. coord. initial et qui est tourné de 30 degrés. -->

</g>

ABC (rotate) </text>

</g>

<!-- Établit un nouveau système de coordonnées, dont l'origine est (200,40)

dans le syst. coord. initial et qui reçoit un facteur d'échelle de 1.5. -->

</g>

ABC (scale) </text>

</g>

(22)

Système de coordonnées, transformations et unités



Transform = « liste de transformations »



Les transformations =

 translate(<tx> [<ty>]) => translation de tx et ty

 scale(<sx> [<sy>]) changement d’échelle de sx et sy

 rotate(<rotate-angle> [<cx> <cy>]) => rotation de <rotate- angle> (en degrés) autour du point [<cx> <cy>]

= translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).

 skewX(<skew-angle>) = cisaillement selon les x

 skewY(<skew-angle>) = cisaillement selon les y



La première appliquée est la plus à droite

(23)

Remplissage, bordure et marqueur



Avec SVG, on peut peindre (i.e., remplir ou donner un liseré) avec :



une seule couleur ;



un dégradé (linéaire ou radial) ;



un motif (vecteur ou image, éventuellement en mosaïque) ;



On utilise les attributs: 'fill' et 'stroke‘ qui admettent des paramètres de « peinture

»(=couleurs)

(24)

Couleurs



Toutes les couleurs SVG sont spécifiées dans l'espace de couleur sRGB



= Standard RGB



#f00 /* #rgb */



#ff0000 /* #rrggbb */



rgb(255,0,0)

/* integer range 0 - 255 */



rgb(100%, 0%, 0%)

/* float range 0.0% - 100.0% */

 On peut utiliser des mots clés

 Exemple : red , blue,…

(25)

La composition alpha simple gérée par SVG



Er, Eg, Eb - Valeur de couleur de l'élément



Ea - Valeur alpha de l'élément



Cr, Cg, Cb - Valeur de couleur du canevas (avant mélange)



Ca - Valeur alpha du canevas (avant mélange)



Cr', Cg', Cb' - Valeur de couleur du canevas (après mélange)



Ca' - Valeur alpha du canevas (après mélange)

 Ca' = 1 - (1 - Ea) * (1 - Ca)

 Cr' = (1 - Ea) * Cr + Er

 Cg' = (1 - Ea) * Cg + Eg

 Cb' = (1 - Ea) * Cb + Eb

(26)

Rognage, Masquage et Compostion



Le rognage limite la région sur laquelle on peut dessinée.

<g clip-rule="nonzero">

<clipPath id="MonRognage">

<path d="..." clip-rule="evenodd" />

</clipPath>

<rect clip-path="url(#MonRognage)" ... />

</g>

(27)

L’animation



A été développé en collaboration avec le format SMIL (voir dernier cours)



SVG utilise les éléments d’animation de SMIL:



'animate' permet aux attributs et aux propriétés scalaires de recevoir différentes valeurs au cours du temps



'animateMotion' déplace un élément le long d'un tracé de mouvement



'animateColor‘ modifie la valeur de couleur des

attributs au cours du temps

(28)

Attributs communs aux animations



Begin = temps de début de l’animation



End = temps de fin de l’animation



From xx to yy = le paramètre animé varie de xx à yy



Dur = durée de l’animation



Repeatcount = nombre de répétitions



Fill = définit l’état à la fin de l’animation

(freeze|remove)

(29)

L’animation



Exemple : animate

<rect x="300" y="100" width="300" height="100"

fill="rgb(255,255,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>

(30)

L’animation



Exemple : AnimateMotion

<circle cx="100" cy="100" r="40" stroke="blue"

stroke-width="4" fill="red">

<animateMotion dur="2s" repeatCount="indefinite"

path="M50,50 v200 h200 v-200 h-200" />

</circle >

(31)

L’animation



Exemple : animateTransform

< rect x="50" cy="100" width="50" height="50"

stroke="blue" stroke-width="4" fill="red">

<animateTransform attributeName="transform"

attributeType="XML" type="translate"

from="0,0" to="300,300" dur="2s" additive="sum"

fill="freeze"/>

<animateTransform attributeName="transform"

attributeType="XML" type="rotate"

from="0" to="90" dur="2s" additive="sum" fill="freeze"/>

<

/rect>

(32)

Les filtres



= opération graphique appliquée à une source graphique



Source graphique = éléments graphiques pixélisés en RGBA



Source alpha= composante A d’une

source graphique

(33)

Les filtres



Définition d’un filtre

<defs>

<filter id="MonFiltre" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">/*région d’appli filtre*/

</filter>

</defs>

(34)

L’application du filtre



<g filter="url(#MonFiltre)" >

 <g>

 <path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z"

/>

 <path fill="#D90000" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />

 <g fill="#FFFFFF" stroke="black" font-size="45" font- family="Verdana" >

 <text x="52" y="76">SVG</text>

 </g>



</g>

(35)

Les filtres



Autre exemple:

<feSpecularLighting in="flou" surfaceScale="5"

specularConstant=".75" specularExponent="20" lighting- color="#bbbbbb" result="speculaireSortie">

</feSpecularLighting>

utilise le tampon « flou » comme modèle pour une élévation de surface et génère un effet de lumière provenant d'une seule source.

(36)

Exemple de filtre complet

(37)

La définition du filtre

</defs>

<filter id="MonFiltre" filterUnits="userSpaceOnUse" x="0" y="0"

width="200" height="120">

<desc>Produces a 3D lighting effect.</desc>

<feSpecularLighting in="flou" surfaceScale="5"

specularConstant=".75" specularExponent="20" lighting- color="#bbbbbb" result="speculaireSortie">

</feSpecularLighting>

<feComposite in="speculaireSortie" in2="SourceAlpha"

operator="in" result="speculaireSortie2"/>

<feComposite in="SourceGraphic" in2=" speculaireSortie2 "

operator="arithmetic" k1="0" k2="1" k3="1" k4="0"

result="peintureEclairee"/>

</feMerge>

</filter>

</defs>

feGaussianBlur

feOffset

feSpecularLighting

feComposite

feMerge

source

(38)

D’autres possibilités



Dégradés et motifs de remplissage



Interactivité



Les Scripts

