Un article de WikiTuto.

Catégorie:Cours XML XML Concepts de base Historique : de SGML à XML XML:Mise en oeuvre Structure d'un document XML Support par les navigateurs Prise en main d'XML CookTop XML CookTop généralités Interface Exercices Prise en main d'oXygen XML Editor Généralités Interface Fonctionnalités Exercices Déclarations de Type de Document Introduction Types de DTD Déclarations d'éléments Déclarations d'attributs Déclarations d'entités Initiation aux Schéma XML Introduction Les premiers pas Déclarations d'éléments et d'attributs Les types de données Espaces de nom Les dérivations Diverses autres fonctionnalités Mise en forme à l'aide de feuilles de style XSL Présentation Exemples de mises en forme Mise en forme à l'aide de feuilles de style XSL (XSLT) Les expressions de sélection XPath Éléments XSLT Fonctions XPath Fonctions XPath applicables aux nœuds Fonctions XPath applicables aux chaînes de caractèress Fonctions XPath applicables aux nombres Fonctions booléennes Autres fonctions Utilisation du DOM et XSLT dynamique Insertion de code JavaScript dans une page Utilisation du DOM Synchroniser des contenus multimédia avec SMIL Généralités Construction progressive d'un fichier SMIL Conclusion Un format de dessin vectoriel en XML: SVG Introduction SVG de base Éléments graphiques de base Structuration: éléments de groupage et références Transformations Autres fonctionnalités L'animation dans le SVG Introduction Animation de base: l'élément animate Des animations plus complexes Plus loin que les formulaires HTML: XForms Généralités Fonctionnalités des formulaires XForms Dans la pratique Pour aller plus loin... Quelques mots sur les Services Web Généralités Trouver un service Web Accéder à un service Web Récapitulation et inconvénients modifier Tdm XML Source : Gilles Chagnon

Sommaire 1 Introduction 2 Le fragment d'un document SVG: <svg> 3 Groupage d'éléments avec <g> 4 Objets abstraits avec <symbol>, <defs> et <use> 4.1 Symboles (élément <symbol>) 4.2 Définitions (élément <defs>) 4.3 Utilisation d'objets: la balise <use> 5 Titre <title> et descriptions <desc>

Introduction

Chaque langage informatique de haut niveau doit permettre de regrouper des objets dans des blocs, de les nommer et de les réutiliser. SVG possède plusieurs constructions intéressantes.

Il faut noter également que les objets SVG (comme les objets HTML) héritent le style de leurs parents . Autrement dit, les styles "cascadent" le long de l'arborescence. Voici la liste des éléments les plus importants. Notez qu'il faut se référer à la spécification pour connaître tous les attributs de ces éléments. Ici, nous ne montrons qu'un petit extrait. 1.Le fragment d'un document SVG : <svg> ; 2.Groupage d'éléments avec <g> ; 3.Objets abstraits (chablons) <symbol> ; 4.Section de définition <def> ; 5.Utilisation d'éléments <use> ; 6.Titre <title> et description <desc>.

Le fragment d'un document SVG: <svg>

<svg> est la racine d'un graphisme SVG. Mais on peut aussi imbriquer des éléments svg parmi d'autres et les positionner. Chaque <svg> crée un nouveau système de coordonnées. Ainsi on peut facilement réutiliser des fragments graphiques sans devoir modifier des coordonnées. Voir l'exemple salut2.svg.

Groupage d'éléments avec <g>

Cet élément sert à regrouper les éléments graphiques, ainsi que vous avez pu le constater en regardant le code source des exemples précédents. En voici une autre illustration avec g.svg. Notez l'héritage des propriétés, mais aussi leur redéfinition locale possible.

Objets abstraits avec <symbol>, <defs> et <use>

Symboles (élément <symbol>)

Cet élément permet de définir des objets graphiques réutilisables en plusieurs endroits, avec l'élément <use>. <symbol> ressemble à <g>, sauf que l'objet lui-même n'est pas dessiné. Cet élément possède des attributs supplémentaires, comme viewBox et preserveAspectRatio, dont nous ne parlerons pas.

Définitions (élément <defs>)

Cet élément ressemble un peu à <symbol>, mais est plus simple. De même, l'objet défini n'est pas dessiné.

Utilisation d'objets: la balise <use>

<use> permet de réutiliser les objets suivants : <svg>, <symbol>, <g>, éléments graphiques et <use>. Cet élément se comporte légèrement différemment selon le type d'objet défini (voir la spécification). Il s'agit donc d'un instrument de base pour éviter de répéter du code.

Les objets réutilisés doivent avoir un identificateur XML. Par exemple, <rect id="rectanglerouge" fill="red" width="20" height="10"/>.

Les attributs x, y, width et height permettent de redéfinir la taille et la position de l'élément appelé. xlink:href permet de renvoyer à l'élément défini. Voir par exemple les fichiers use.svg, use2.svg et use3.svg. Exercice 1. Groupage d'éléments Énoncé

Titre <title> et descriptions <desc>

Ces éléments permettent de documenter le code. Ils ne sont pas affichés tels quels. En revanche, un "client" peut par exemple décider de les afficher comme des infobulles. Ces documentations peuvent être utiles pour principalement deux raisons : éventuellement mieux comprendre le code (même s'il est bien sûr toujours possible de le faire via des commentaires