UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  1. Table des matières détaillée

1. Table des matières détaillée

1. Table des matières détaillée 3

2. Scalable Vector Graphics - un nouveau paradigme 6

2.1 Origine et but 6

2.2 Pourquoi SVG ? 7

2.3 Outils 8

2.4 Ressources 9

3. SVG de base 10

3.1 Viewer et serveur 10

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

4.1 Mécanismes principaux 17

A. Attributs 17

B. Positionnement 17

C. Transformations 17

D. Style 18

E. Attributs XML vs attributs CSS 19

Exemple 4-1: Deux façons pour faire la mise en forme 19

4.2 Rectangles <rect> 20

Exemple 4-2: Rectangles avec style: 21

4.3 Le cercle <circle> et l’ellipse <ellipse> 22

Exemple 4-3: Ronds figés 23

4.4 Lignes <line> et poli-lignes <polyline> 24

Exemple 4-4: Lignes 25

4.5 Polygones 26

Exemple 4-5: 2 Polygones 26

4.6 Formes arbitraires avec <path> 27

A. Attributs de base: 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

5. Le texte 32

Exemple 5-1: text, tspan et textPath 33

6. Les liens 34

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

Exemple 7-1: Hello SVG 2 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

A. Objets réutilisables 39

B. Attributs importants: 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

7.7 Images <image> 44

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. Le canevas SVG 47

B. Le viewport SVG 47

C. Longeurs 48

8.2 Création de viewports 49

A. Eléments qui créent un nouveau viewport 49

B. L’attribut viewBox 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

D. Ordre des opérations 55

Exemple 8-3: Simples transformations 56

9. Suite (rappel) 58


UPPREVIOUS NEXT -- TIE