mozilla
Vos résultats de recherche

    Introduction

    Ce tutoriel est en cours de développement et de traduction. Si vous le pouvez, n'hésitez pas à y mettre votre grain de sel et écrire / traduire un paragraphe ou deux. Des points supplémentaires sont prévus pour ceux qui écriront des pages entières, à réclamer auprès de Julia. Merci d'avance !

    lion_svg.pngSVG 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 dont vous aurez besoin de connaître.

    Interwiki Languages Links

    Étiquettes et contributeurs liés au document

    Contributors to this page: Fredchat, Duarna, parmentf, GiulianT, Mgjbot, teoli
    Dernière mise à jour par : parmentf,