Technologies Internet et Education, © TECFA1. Table des matières détaillée
1. Table des matières détaillée 3
2. Scalable Vector Graphics - un nouveau paradigme 6
A. SVG avec un viewer ou plugin 10
B. Mime-types que votre serveur doit définir (!) 10
3.2 Structure d’une simple page SVG 11
Exemple 3-1: Hello SVG - la structure d’un fichier SVG 13
3.3 Imbrication d’un fichier SVG dans HTML 14
Exemple 3-2: Hello avec SVG et un iframe 14
Exemple 3-3: Balises SVG / XHTML mixtes (document non-validé) 15
4. Eléments graphiques de base 16
E. Attributs XML vs attributs CSS 19
Exemple 4-1: Deux façons pour faire la mise en forme 19
Exemple 4-2: Rectangles avec style: 21
4.3 Le cercle <circle> et l’ellipse <ellipse> 22
4.4 Lignes <line> et poli-lignes <polyline> 24
4.6 Formes arbitraires avec <path> 27
B. Commandes "path data" de base: 27
Exemple 4-6: 2 Simple path: un triangle 29
C. Commandes "path data" supplémentaires: 30
Exemple 4-7: 2 Simple gateau avec <arc> 31
Exemple 5-1: text, tspan et textPath 33
Exemple 6-1: Liens vers d’autres ressources avec la balise a 34
7. Structuration: éléments de groupage et références 35
7.1 Le fragment d’un document SVG: <svg> 36
7.2 Groupage d’éléments avec <g> 37
Exemple 7-2: Un simple groupe de bambous 37
7.3 Objets abstraits (chablons) <symbol> 38
7.4 Section de définition <def> 38
7.5 Utilisation d’éléments <use> 39
Exemple 7-3: Réutilisation d’un rectangle 40
Exemple 7-4: Utilisation d’un objet <symbol> 41
Exemple 7-5: Utilisation de 2 <defs> carrés 42
7.6 Titre <title> et description <desc> 43
Exemple 7-6: Inclusion d’une image à plusieurs sauces 45
8. Système de coordonnées, transformations et unités 46
8.1 Le canevas, les viewports et les unités 47
A. Eléments qui créent un nouveau viewport 49
Exemple 8-1: Redimensions d’un dessin de bureau avec ViewPort 50
C. L’attribut preserveAspectRatio 51
Exemple 8-2: Adaptations d’un bureau à des ViewPort 52
8.3 Transformations avec l’attribut "transform" 54
A. Translations avec le paramètre "translate" 54
B. Redimensionnement (scaling) avec le paramètre "scale" 54
C. Rotations avec le paramètre "rotate" 55
Exemple 8-3: Simples transformations 56
-- TIE