SVG est un langage XML, assez similaire au XHTML. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.
La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.
Alors, on s'y met ?
Les bons outils
Il y a un certain nombre de logiciels de dessin disponibles, et certains comme Inkscape, sont libres et gratuits, et utilisent SVG comme format natif. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.
Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le HTML. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :
- Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici).
- Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.
La spécification du langage SVG (en) est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les références d'éléments et les références d'interfaces pour découvrir tout ce que vous aurez besoin de connaître.
Interwiki Languages Links