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 .