SVG: Scalable Vector Graphics

Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…) Affichage élaboré de texte Affichage dimages bitmap Animation du type SMILAnimation Interfaçage avec ECMAScript Interaction avec les bases de données (php) Affichage dans un navigateur Plugin SVG (Adobe). En projet dans Mozilla Fonctions prédéfinies: zoom, déplacement Concurrent:Flash Extension : SVG Mobile en cours de normalisation

Code Règles de XML : …. Toute balise ouverte doit être fermée –balises « autofermantes » On peut mettre des attributs dans la balise – couleur, type de tracé, position,... sensible à la casse, balises obligatoirement en minuscule utilisation des styles –soit dans une feuille de style CSS –soit dans le fichier svg imbriqués définition dobjets référencés réutilisables et use

Structure dun fichier SVG 1. version de xml 2. Référence à la DTD, informations sur la structure du document 3. <svg xmlns=" pour définir lespace de nommage <svg xmlns:xlink=" nécessaire pour lutilisation de références dimension de la fenêtre svg 300x200 pixels unités,... 4.

Système de coordonnées En pixels, en pouces (in), en cm, en points (pt), en %... width="200" ou width="10in" ou width="12cm" pt : 72 points par pouce % : un pourcentage de la fenêtre Taille et position de la fenêtre (viewport) "300" height="200"> Attribut : viewBox permet de définir les coordonnées utilisateur 0 x utilisateur 3000, y utilisateur -1000

Le point (0,0) sera en dehors de la fenêtre donc pas affiché Redéfinition du viewport: svg imbriquéssvg imbriqués P 2 =(3050,400) 300 pixels x y 200 pixels P 1 =(50,100)

Objets graphiques line : polyline et polygone : rectangle: coins arrondis rx="5" ry="3" cercle : ellipse : chemin coordoonées absolues (L) ou relatives (l)

Objets graphiques (suite) Affichage de texte : <text... noeud vide position, fonte, taille, couleur,... orientation,orientation SVG textPath Attributs de laffichage : couleur de remplissage, couleur du trait, opacité, épaisseur du trait,... style="stroke:#000000; stroke-width:2; fill:none; " couleur : rgb(r,v,b) 0 r,v,b 255 couleurs en Hexadécimal ou prédéfinies, dégradés,...

Path chemin : ligne brisée coordoonées absolues (L) ou relatives ( l ) (point précédent) Bézier quadratiquequadratique M x 0 y 0 Q x 1 y 1 x 2 y 2 ou q en relatif par rapport à P 0 Bézier cubiquecubique M x 0 y 0 C x 1 y 1 x 2 y 2 x 3 y 3 ou c en relatif Courbe compositecomposite M x 0 y 0 C... C... Q... L... ou M x 0 y 0 c... c... q... l...

Transformations géométriques attribut transform Translation: translate(a,b) Rotation autour de lorigine rotate( ), en degré ou rotation autour dun point rotate(, x, y) homotéthie scale(a) ou scale(a,b) déformation skewX( ) et skewY( ): utilisation skewX( ) utilisation On empile les transformations –transform="translate(0,10)scale(3)translate(20,5)" 1. translate(20,5) 2. scale(3) 3. translate(0,10)

Balise définition dobjet identifié par son nom <path id="courbe" d="M Q200, ,200 T500,200" style="stroke:blue;fill-opacity:0.3;stroke-width:3;fill:none"> pas directement utilisé, mais pouvant être référencé on peut définir un ensemble dobjets: <symbol id=.. Utilisation: pour tracer comme chemin pour écrire un texte texte à afficher exemple

divers Définition dun noeud XML on regroupe un ensemble dobjets SVG –au niveau des noeuds, on peut appliquer : suppression, changement de style, transformation géométrique,.. priorité aux redéfinitions dans les sous-noeuds Clipping –clipPath défini à partir de path, text, line, rect, circle, ellipse, polyline, polygon et use <image x="0px" y="0px" width="400px" height="500px" xlink :href="FillGradients.svg" clip-path="url(#myClip)" />

Animation balise animate