SVG. Vincent JOSEPH Université Charles de Gaulle Lille 3 Master 1 Informatique et Document

Transcription

1 SVG Vincent JOSEPH Université Charles de Gaulle Lille 3 Master 1 Informatique et Document

2 PLAN INTRODUCTION LANGAGE SVG SVG ET LES AUTRES LANGAGES CONCLUSION

3 PLAN INTRODUCTION LANGAGE SVG SVG ET LES AUTRES LANGAGES CONCLUSION

4 Qu'est-ce que SVG? SVG signifie Scalable Vector Graphics ou Graphique Vectoriel Adaptable. C'est un langage XML conçu pour décrire des ensembles de graphiques vectoriels

5 Objectifs Répondre à un besoin de graphiques : Légers Dynamiques Interactifs

6 Historique 6 langages de description de graphique vectoriel soumis au W3C en 1998 : Web Schematics, de CCLRC PGML, de Adobe, IBM, Netscape, et Sun VML, par Autodesk, Hewlett-Packard, Macromedia, et Microsoft Hyper Graphics Markup Language, par Orange, PCSL, et PRP WebCGM, de Boeing, CCLRC, Inso, JISC, et Xerox DrawML, de Excosoft Le groupe de travail SVG a choisi de développer un nouveau langage s'inspirant principalement de VML, PGML et des possibilités du CSS

7 Avantages Format ouvert et standardisé par le W3C Adapté à des médias variés et à des tailles différentes Possibilité de référencement Compatibilités avec les autres langages du web sémantique (XML, XHTML, XSLT, CSS, JavaScript via DOM)

8 Inconvénients Problème de rendu dans les navigateurs : Support complet : Opera Support partiel : Firefox, Google Chrome, Safari, Konqueror Aucun support : Internet Explorer (nécessité d'un plug-in) Flash peut faire les mêmes choses et est déjà fortement répandu.

9 PLAN INTRODUCTION LANGAGE SVG SVG ET LES AUTRES LANGAGES CONCLUSION

10 LANGAGE SVG Le SVG permet l'utilisation 3 types d'objets graphiques : des formes graphiques vectorielles du texte des images Ils peuvent être regroupé stylés, transformés et composés dans des objets précédemment rendus. Ils peuvent être interactifs et dynamiques

11 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

12 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

13 Système de coordonnées

14 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

15 Éléments graphiques de base Le rectangle <rect x= 100 y= 100 width= 200 height= 100 /> <rect x= 100 y= 100 width= 200 height= 100 rx= 25 ry= 25 />

16 Les formes de base Le rectangle <rect x= 100 y= 100 width= 200 height= 100 fill="white" stroke="black" strokewidth="5"/> <rect x= 100 y= 100 width= 200 height= 100 rx= 25 ry= 25 style="fill:white;stroke:black;strok e-width:5"/>

17 Les formes de base Le cercle <circle cx="100" cy="100" r="50" /> L'ellipse <ellipse cx="200" cy="150" rx="100" ry="50" />

18 Les formes de base Les lignes <line x1="100" x2="20" y1="20" y2="200" style="stroke:black;strokewidth:5px;"/> Attribut (ou propiété CSS) pour spécifier les extrémités d'une ligne: Stroke-linecap (butt, round, square)

19 Les formes de base Les polylignes <polyline points="50, , , ,250 50,250" style="fill:none;stroke:black;stroke -width:5px;"/> Attribut (ou propiété CSS) pour arrondir les coins: Stroke-linejoin (miter, round, bevel)

20 Les formes de base Les polygones <polygon points="20,20 70,60 120,30 150,80 200,20 250,80 280,30 330,60 380,20 320, , , , , , , ,270 70,240 20,280 80,150" style="fill:none;stroke:black;stroke -width:10px;" />

21 Les formes de base Les chemins M (ou m) x,y démarre un nouveau sous-chemin. Z (ou z) ferme un sous-chemin. L (ou l) x, y trace une ligne droite entre le point courant et le point (x,y). H (ou h) x trace une ligne horizontale entre le point courant et le point (x,y0). V (ou v) y trace une ligne verticale entre le point courant et le point ( x0,y).

22 Les formes de base Les chemins Fermé manuellement <path d="m 180,150 L 20,20 L 20,280 L 180,150" style="fill:none;stroke:black;stroke -width:20px;"/> Bien fermé <path d="m 380,150 L 220,20 L 220,280 Z" style="fill:none;stroke:black;stroke -width:20px;"/>

23 Les formes de base Les chemins: arc elliptique A (ou a) pour tracer des arcs elliptiques à partir du point courant : A rx ry rotation-axe-x drapeau-arc-large drapeau-balayage x y rx ry sont les axes de l'ellipse rotation-axe-x est l'angle derotation de l'axe rx Drapeau-arc-large (0 ou 1) Drapeau-balayage (0 ou 1) x y est le point d'arrivée

24 Les formes de base Les chemins: arc elliptique <path d="m300,200 h-150 a150, ,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" /> <path d="m275,175 v-150 a150, ,0-150,150 z" fill="yellow" stroke="blue" stroke-width="5" />

25 Les formes de base Les chemins: arc elliptique <path d="m 125,75 a100,50 0?,? 100,50" style="fill:none; stroke:red; stroke-width:6"/>

26 Les formes de base Le Texte <text x="10" y="150" style="fontsize:80px;fill:white;stroke:black;stroke-width:5;">et du texte</text> On peut appliquer toutes les propriétés CSS pour le texte.

27 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

28 Les transformations La translation <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;">et du texte</text> <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;" transform="translate(50,50)">et du texte</text>

29 Les transformations La rotation <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;">et du texte</text> <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;" transform="rotate(25)">et du texte</text> Attention, la rotation ne concerne pas seulement l'objet, mais bien tout le dessin.

30 Les transformations La rotation Il est possible de choisir son centre de rotation : <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;">et du texte</text> <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;" transform="rotate(25,100,150)">et du texte</text>

31 Les transformations Le changement d'échelle <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;">et du texte</text> <text x="10" y="150" style="fontsize:50px;fill:white;stroke:black;stroke -width:3;" transform="scale(0.5)">et du texte</text>

32 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

33 Structure d'un document SVG <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="external-css.css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg width="400px" height="300px" xml:lang="fr" xmlns=" xmlns:xlink=" </svg>

34 Structure d'un document SVG Intégrer une zone de dessin dans un dessin SVG <svg width="400px" height="300px" xml:lang="fr" xmlns=" xmlns:xlink=" <svg x="50" y="80" width="300" height="200"> <!-- un dessin --> </svg> </svg>

35 Structure d'un document SVG Éléments de référencement <svg width="400px" height="300px" xml:lang="fr" xmlns=" xmlns:xlink=" <title>titre du dessin</title> <desc>présentation du dessin</desc> </svg>

36 Structure d'un document SVG Un groupe <g id="sapin"> <rect x="45" y="70" width="10" height="20" fill= peru /> <polygon points="20,70 80,70 60,55 70,55 55,40 65,40 50,20 35,40 45,40 30,55 40,55" fill= forestgreen /> </g>

37 Structure d'un document SVG Réutilisation d'un groupe <g id="sapin"> <rect x="45" y="70" width="10" height="20" fill= peru /> <polygon points="20,70 80,70 60,55 70,55 55,40 65,40 50,20 35,40 45,40 30,55 40,55" fill= forestgreen /> </g> <use xlink:href="#sapin" transform="translate(20,0) scale(3)" />

38 Structure d'un document SVG <defs> Définition d'un ou plusieurs groupes <g id="sapin"> <rect x="45" y="70" width="10" height="20" fill= peru /> <polygon points="20,70 80,70 60,55 70,55 55,40 65,40 50,20 35,40 45,40 30,55 40,55" fill= forestgreen /> </g> </defs> <use xlink:href="#sapin" transform="translate(20,0) scale(3)" />

39 Structure d'un document SVG Les liens <a xlink:href= > <use xlink:href="#sapin" transform="scale(3)" /></a> Les images externes <image xlink:href="sapin.jpg" x="10" width="180" y="15" height="271"/>

40 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

41 Motifs SVG <defs> <pattern id="motif"> <!-- ici viendront les formes --> </pattern> </defs> CSS rect { fill:url(document.svg#motif); } <rect x="10" width="100" y="10" height="100"/>

42 Dégradés <defs> SVG CSS rect { <lineargradient id="degrade" x1="0" y1="0" x2="100%" y2="100%"> fill:url(document.svg#degrade); } <stop offset="0%" id="stop1"/> <stop offset="40%" id="stop2"/> <stop offset="100%" id="stop3"/> </lineargradient> </defs> <rect x="50" y="50" width="200" height="120"/>

43 Motifs, Dégradés Éléments <pattern /> <RadialGradient /> <LinearGradient /> Attributs: width, height, x et y Attributs: width, height, cx, cy et r Attributs Attributs: width, height, x1, x2, y1 et y2 GradientUnits (userspaceonuse, objectboundingbox)

44 Découpes, Masques Éléments <clippath /> <mask /> Attributs: ClipPathUnits (userspaceonuse, objectboundingbox) Attributs: width, height CSS Element { clip-path:url(fichier.svg#id); } Element { mask:url(fichier.svg#id); }

45 Filtres Enfants de <filter> <feflood /> rempli uniformément une région d'une couleur <feimage /> importe une image dans un filtre <feoffset /> décale l'image en entrée selon ses attributs dx et dy <femerge /> pour combiner les filtres etc.

46 LANGAGE SVG Système de coordonnées Élements graphiques de base Transformations Structure d'un document SVG Motifs, dégradés, masques, découpes, filtres Animations

47 Animations <animate /> attributename (attribut ou propriété CSS) attributetype (CSS ou XML) from ancienne_valeur to nouvelle_valeur begin (en unité de temps) dur (en unité de temps) repetecount (indefinite) Cette élément se place comme enfant d'un objet graphique Ex: <rect><animate /></rect>

48 Animations <animate /> On peut commencer une animation en fonction du début ou de la fin d'une animation <animate id= animation /> où : begin= animation.begin begin= animation.end

49 Animations <animatecolor /> Fonctionne comme <animate /> sauf que from et to doivent être des couleurs <rect> <animatecolor attributename="fill" attributetype="css" from="lightblue" to="#ffd700" begin="3s" dur="5s"/> </rect>

50 Animations <set /> Cet élément permet de changer une valeur sans transition. attributename (attribut ou propriété CSS) attributetype (CSS ou XML) to nouvelle_valeur begin (en unité de temps) dur (en unité de temps) repetecount (indefinite)

51 Animations <animatetransform /> attributename (transform) attributetype (XML) type (rotate, translate, scale, etc) from ancienne_valeur to nouvelle_valeur begin (en unité de temps) dur (en unité de temps) repetecount (indefinite)

52 Animations <animatemotion /> Permet de faire évoluer un objet sur un chemin begin (en unité de temps) dur (en unité de temps) repetedur (indefinite) Rotate (auto) rotation de l'objet en fonction du chemin <animatemotion rotate= auto begin="10s" dur="10s" repeatdur="indefinite"> <mpath xlink:href="#chemin"/></animatemotion>

53 Animations <textpath /> Permet de faire évoluer un texte sur un chemin <text> <textpath xlink:href="#chemin" start-offset="100%">le SVG, c est trop fun! <animate attributename="startoffset" attributetype="xml" from="100%" to="-70%" begin="0s" dur="7s" repeatcount="indefinite"/> </textpath> </text>

54 PLAN INTRODUCTION LANGAGE SVG SVG ET LES AUTRES LANGAGES CONCLUSION

55 SVG ET LES AUTRES LANGAGES SVG dans du XHTML (interne) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <svg xmlns=" xmlns:xlink=" version="1.1" width="400px" height="300px"> </svg> </body></html>

56 SVG ET LES AUTRES LANGAGES SVG dans du XHTML (externe) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <object type="image/svg+xml" data="image.svg">mon dessin SVG</object> </body></html>

57 SVG ET LES AUTRES LANGAGES Autres langages dans du SVG On utilise l'élément <foreignobject width= height= x= y= /> <svg xmlns=" xmlns:xlink=" version="1.1" width="400px" height="300px"> <foreignobject width= height= x= y= > <!-- langage --> </foreignobject> </svg>

58 SVG ET LES AUTRES LANGAGES SVG interactif Des interactions avec les objets graphiques sont possibles par l'intermédiaire de script en JavaScript via le DOM. SVG étend le DOM de base avec le DOM SVG.

59 PLAN INTRODUCTION LANGAGE SVG SVG ET LES AUTRES LANGAGES CONCLUSION

60 CONCLUSION Il existe des éditeurs graphique SVG tel que Inkscape. La version de 1.2 de SVG est en élaboration: Meilleur gestion des textes avec <textarea /> Meilleur gestion du multimédia Internet Explorer 9 abandonne le VML et implémente le SVG

61 SOURCES