GENIE MULTIMEDIA Eléments graphiques Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE christine.vanoirbeek@epfl.ch

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Introduction Approches « XML » pour le traitement des éléments graphiques Graphiques structurés Tableaux Formules mathématiques (MATHML) Formules chimiques (CML) Schémas Diagrammes … Graphique vectoriel (SVG) GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 SVG SVG (Scalable Vector Graphics) est une application XML qui permet de décrire du graphique vectoriel incluant texte et images avec des couleurs dégradées, des filtres, une grande richesse de styles,etc. des animations et des objets d'interaction GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 SVG: Historique Groupe de travail constitué par le W3C en 1998 (avec des représentants de Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, …) Recommandation SVG 1.0 publiée en septembre 2001 Recommandation SVG 1.1 publiée en janvier 2003 comprend aussi une version SVG Mobile pour téléphones portables et PDAs SVG 1.2 draft GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Structure globale d'un document SVG Un fichier SVG a la forme suivante <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" ... > <desc> ... une description libre (optionnel) </desc> <defs> ... des définitions </defs> <g> ... le contenu graphique (<g> est optionnel) </g> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Système de coordonnées Le système de coordonnée utilisateur est fixé par des attributs de l'élément racine <svg …> width, height fixent la dimension de la fenêtre en pixels px (par défaut) en millimètres (mm), centimètres (cm), en pouces (in) en grandeurs typographiques (em, ex, pt, pc) viewport="x y w h" fixent la portion visible GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Objets graphiques élémentaires SVG est basé sur les objets graphiques suivants un ensemble de formes élémentaires lignes rectangles cercles ellipses polygones lignes polygonales des formes quelconques définis par un contour du texte Positionnement des objets Les objets SVG se positionnent dans un système de coordonnées qui commence en haut et à gauche Il est possible de travailler avec des coordonnées locales GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Lignes Une ligne est représentée par un élément <line x1=… y1=… x2=… y2=…/> Sa présentation est caractérisée par les attributs stroke="color" où color a la forme d'un nom: black, red, blue, ... d'une valeur #rrggbb ou rgb(r%,g%,b%) stroke-width="val" pour l'épaisseur du trait stroke-dasharray="lst" pour le motif des pointillés où lst a la forme "s1 b1 s2 b2 … "   stroke-opacity="val" avec "val" entre 0 et 1 GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Rectangles Un rectangle (parallèle aux axes) est représenté par <rect x=… y=… width=… height=…/> Sa présentation est caractérisée par les attributs fill="color" avec une spécification de couleur fill-opacity="val" avec "val" entre 0 et 1 rx="val" et ry="val" pour définir des angles arrondis stroke… pour la présentation des contours GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Exemple <svg ...> <rect x="10" y="10" width="140" height="40"/> <rect x="10" y="60" ... fill="red"/> <rect x="10" y="110" ... fill="none" stroke="blue" stroke-width="2"/> <rect x="10" y="160" ... fill="#9999FF" stroke="black" stroke-width="2" stroke-dasharray="10 10"/> <rect x="10" y="210" ... fill="yellow" stroke="red" stroke-width="2" stroke-dasharray="9 3 3 3" rx="10" ry="10"/> <rect x="10" y="260" ... stroke="red" stroke-opacity="0.8" stroke-width="10"/> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Cercles et ellipses Un cercle est représenté par <circle cx=… cy=… r=…/> Une ellipse est représenté par <ellipse cx=… cy=… rx=… ry=…/> Leur présentation est régi par les mêmes attributs que les rectangles GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Polygones et lignes polygonales Un polygone (courbe fermé) est représenté par <polygon points="x1,y1 x2,y2 …"/> Une ligne polygonale (ouverte) est représentée par <polyline points="x1,y1 x2,y2 …"/> normalement, on utilise polyline avec l'attribut fill="none«  Les attributs suivants contrôlent la présentation stroke-linecap avec les valeurs butt, round, square définit la forme des extrémités stroke-linejoin avec les valeurs miter, round, bevel définit la forme des angles GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Formes quelconques SVG permet de définir des formes quelconques <path d="data"/> où data contient les codes M x y : aller à (x,y) L x y : dessiner ligne vers (x,y) H x : dessiner une ligne horizontale jusqu'à x V y : dessiner une ligne verticale de longueur y Z : fermer le chemin A … : dessiner un arc d'ellipse Q … , T … . dessiner une courbe de Bézier quadratique C … , S … : dessiner une courbe de Bézier cubique les codes minuscules (m,l,h,v,…) sont utilisés avec des coordonnées relatives GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Arcs elliptiques Dans un chemin un arc elliptique est représenté par A rx ry x-rot large-arc sweep x y où rx ry représentent les rayons en x et y x-rot représente l'angle de rotation par rapport à l'axe des x large-arc et sweep définissent le segment x y représentent le point final de l'arc GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Exemples: courbes de Bézier Exemple de courbes de Bézier quadratiques ... et cubiques GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Texte Une chaîne de caractères (texte) est représentée par <text x=… y=… >content</text> Sa présentation est caractérisée par les attributs font-family, font-size, font-weight et font-style, text-decoration, letter-spacing, ... (comme dans CSS) text-anchor avec les valeurs start, middle et end pour l'alignement fill="color" pour la couleur L'élément <tspan …> permet de redéfinir les attributs d'une sous-chaîne SVG supporte les caractère Unicode et il est possible d'écrire verticalement (caractères droits ou inclinés) selon une orientation quelconque en suivant une courbe GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Images Avec l'élément <image xlink:href="url" …>, il est possible d'importer des images en format JPEG, PNG ou un autre fichier SVG x=…, y=…, permettent de positionner l'image width=… et height=… permettent de dimensionner l'image Il est également possible d'appliquer des filtres <image x="10" y="50" width="200" height="100" xlink:href="cathedrale_ge.jpg"> <title>Eglise large</title> </image>   <image x="250" y="50" width="50" height="100" xlink:href="cathedrale_ge.jpg"> <title>Eglise longue</title> </image> <image x="310" y="50" width="100" height="100" xlink:href="cathedrale_ge.jpg preserveAspectRatio="xMinYMin meet"> <title>Eglise juste</title> </image> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Déformations et coupures preserveAspectRatio="alignment mode" permet de conserver l'isométrie mode vaut meet ou slice alignment est de la forme xM……yM…… GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Transformations Avant d'être affiché, un objet graphique peut subir une transformation définie par transform="…" translate(tx,ty) rotate(a) ou rotate(a,cx,cy) scale(f) ou scale(fx,fy) skewX(a), skewY(a) où les angle sont exprimés en degrés Les transformations peuvent être combinées GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Transformations Toutes ces transformations peuvent être représentées mathématiquement par une matrice carrée 3 x 3 du type: où  seules 6 valeurs a,b,c,d,e,f sont différentes de 0 ou 1. On peut ainsi employer une notation vectorielle du type [ a b c d e f ] . Les transformations transposent les coordonnées et les longueurs d'un système à l'autre par  une relation: GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Inclinaison des coordonnées x Inclinaison des coordonnées y Transformations Transformation Paramètres Matrice Translation tx et ty sont les distances de translation des coordonnées x et y Scaling sx et sy sont les facteurs d'échelle en x et y Rotation a est l'angle de rotation Inclinaison des coordonnées x a est l'angle d'inclinaison en x Inclinaison des coordonnées y a est l'angle d'inclinaison en y GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Regroupement d’éléments SVG possède plusieurs constructions pour regrouper des objets dans des blocs. Les objets SVG (comme les objets HTML) héritent le style de leurs parents GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Dégradés Les dégradés de couleurs sont réalisés par <linearGradient …> et <radialGradient …> <svg ... viewBox="0 0 300 600"> <defs> <linearGradient id="lgrad" x1="0%" y1="100%" x2="0%" y2="0%"> <stop offset="0%" stop-color="#333" /> <stop offset="30%" stop-color="#FFC" /> <stop offset="100%" stop-color="#99F" /> </linearGradient> <radialGradient id="rgrad" fx="0.3" fy="0.3" r="0.5"> <stop offset="0%" stop-color="#FFF" /> <stop offset="20%" stop-color="#FF0" /> <stop offset="100%" stop-color="#F90" /> </radialGradient > </defs> <rect fill="url(#lgrad)" x="50" y="50" width="200" height="500"/> <circle fill="url(#rgrad)" cx="150" cy="200" r="60"/> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Découpe (clipping) L'élément <clipPath> avec des objets 2D permet de restreindre le champ d'affichage selon une découpe <svg width="300" height="600"> <defs>... <clipPath id="triangleClip"> <path d="M 150 450 L 50 50 L 250 50 Z"/> </clipPath> <clipPath id="textClip"> <text x="150" y="220" font-size="80" text-anchor="middle">SUN</text> </defs> <g clip-path="url(#triangleClip)"> <rect fill="url(#lingrad)" .../> <circle fill="url(#radgrad)" ... clip-path="url(#textClip)"/> </g> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Styles SVG peut être utilisé par les feuilles de styles CSS <svg ...> <defs><style type="text/css"><![CDATA[ polygon { fill:white; stroke:black; stroke-width:2 } .green { fill:#66FF66 } .yellow { fill:yellow } ]]></style></defs> <polygon class="yellow" points="60 90 40 10 80 30"/> <polygon points="10 10 30 90 90 50"/> <polygon class="green" points="30 40 40 70 60 60"/> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006 Animation SVG offre un mécanisme pour créer des animations Le principe consiste à inclure des éléments d'animation à l'intérieur des éléments graphiques Les animations permettent de déplacer ou déformer (pivoter, étirer, rétrécir, ...) changer sa couleur déplacer sur une trajectoire Les fonctions d'animation sont reprises de SMIL2 (Synchronized Multimedia Integration Language, level 2) GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Animation d'un attribut L'élément <animate …> spécifie un attribut et comment sa valeur évolue au cours du temps attributeName="…" spécifie le nom de l'attribut from="…" et to="…" fixent les bornes des valeurs begin="…" et end="…" (ou dur="…") déterminent le début et la fin (resp. la durée) de l'animation fill="freeze" permet à la fin de geler l'animation <animateColor …> permet de d'animer les couleurs <animateTranform …> et <animateMotion …> permettent des mouvements complexes GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Animation avec les transformations L'élément <animateTranform …> avec attributeName="transform" type="…" permet l'application d'une transformation géométrique <svg width="600" height="400"> <text x="300" y="240" text-anchor="middle" font-size="20" fill="blue"> HELLO <animate attributeName="font-size" from="5" to="100" dur="2s" fill="freeze"/> <animateTransform attributeName="transform" type="rotate" from="0 300 200" to="360 300 100" dur="2s"/> </text> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Mouvement le long d'un chemin L'élément <animateMotion …> permettent un déplacement le long d'un chemin défini par path="…" Par contre, il est pratiquement impossible d'animer une courbe définie par un élément <path> ! <svg width="600" height="400"> <text text-anchor="middle" font-size="60" ...> HELLO <animateMotion path="M 50 50 Q 150 300 250 200 Q 350 100 450 300" dur="4s" fill="freeze"/> </text> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Avantages du graphisme vectoriel: Compressibilité élevée Taille et style adaptable Capacité d’indexation Les éléments graphiques sont des objets hiérarchiques GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Graphiques structurés: formules mathématiques MathML: structure typoraphique et mathématique Formule ‘ A =’ Intégrale ‘ f(x) dx’ Borne sup Borne inf ‘ 1’ ‘ 0’ GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Graphiques structurés: formules mathématiques MathML: structure typographique et mathématique Formule Egalité Intégrale Variable Var intég. Intégrande Borne sup Borne inf ‘  A’ ‘ dx ’ ‘ f(x) ’ ‘ 1 ’ ‘ 0 ’ GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Graphiques structurés: formules mathématiques MathML, exemple de structure de présentation <msup> <mfenced> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> </mfenced> <mn>2</mn> </msup> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

Graphiques structurés: formules mathématiques MathML, exemple de structure de contenu <apply> <power/> <plus/> <ci>a</ci> <ci>b</ci> </apply> <cn>2</cn> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006