Tutoriel SVG
SVG signifie Scalable Vector Graphics.
SVG définit les graphiques vectoriels au format XML.
Exemples dans chaque chapitre
Avec notre éditeur "Try it Yourself", vous pouvez éditer le SVG, et cliquer sur un bouton pour voir le résultat.
Exemple SVG
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Ce que vous devez déjà savoir
Avant de continuer, vous devez avoir une compréhension de base des éléments suivants :
- HTML
- XML de base
Si vous souhaitez étudier ces sujets dans un premier temps, retrouvez les tutoriels sur notre page d'accueil .
Qu'est-ce que SVG ?
- SVG signifie Scalable Vector Graphics
- SVG est utilisé pour définir des graphiques vectoriels pour le Web
- SVG définit les graphiques au format XML
- Chaque élément et chaque attribut des fichiers SVG peut être animé
- SVG est une recommandation du W3C
- SVG s'intègre à d'autres normes W3C telles que DOM et XSL
SVG est une recommandation du W3C
SVG 1.0 est devenu une recommandation du W3C le 4 septembre 2001.
SVG 1.1 est devenu une recommandation du W3C le 14 janvier 2003.
SVG 1.1 (deuxième édition) est devenu une recommandation du W3C le 16 août 2011.
Avantages SVG
Les avantages de l'utilisation de SVG par rapport à d'autres formats d'image (comme JPEG et GIF) sont :
- Les images SVG peuvent être créées et modifiées avec n'importe quel éditeur de texte
- Les images SVG peuvent être recherchées, indexées, scriptées et compressées
- Les images SVG sont évolutives
- Les images SVG peuvent être imprimées avec une haute qualité à n'importe quelle résolution
- Les images SVG sont zoomables
- Les graphiques SVG ne perdent aucune qualité s'ils sont zoomés ou redimensionnés
- SVG est un standard ouvert
- Les fichiers SVG sont du pur XML
Création d'images SVG
Les images SVG peuvent être créées avec n'importe quel éditeur de texte, mais il est souvent plus pratique de créer des images SVG avec un programme de dessin, comme Inkscape .