SVG tutorial pour créer des déssins et des grphiques en html5

Créer des grphiques et des dessins vectoriels

Le Scalable Vector Graphics (SVG) est un format d'image basé sur XML qui est utilisé pour définir des graphiques vectoriels en deux dimensions basé pour le Web. Une image vectorielle peut être modifiée vers le haut ou vers le bas sans perdre la qualité d'image.
Les images SVG et leurs comportements sont définis dans des fichiers XML — c'est-à-dire que les images SVG peuvent être créés et modifiés avec n'importe quel éditeur de texte. Il y a plusieurs autres avantages de l'utilisation de SVG sur autres formats d'image comme JPEG, PNG, GIF etc..
Les images SVG peuvent être l’objet d’une recherche, indexés, scénarisés et compressés.
Les images SVG peuvent être créés et modifiés à l'aide de JavaScript en temps réel.
Les images SVG peuvent être imprimées avec une haute qualité dans n'importe quelle résolution.
Contenu SVG peut être animée en utilisant tous les éléments d'animation.
Les images SVG peuvent contenir des hyperliens vers d'autres documents.
Astuce : Les images vectorielles sont composées d'un ensemble fixe de formes définies par math, tandis que les images bitmap ou analogiques sont composées d'un ensemble fixe de points appelés pixels.

La base du SVG 

SVG Introduction:   Qu’est ce que le SVG et quels sont ses avantages ?

Exemple SVG

SVG en HTML

  SVG Les formes

SVG Dessiner un  rectangle

Dessiner des Cercles et ellipses en SVG

Déssinée des lignes en SVG

Dessin d’un polygone en SVG

Les chemin pour déssiner en SVG   partie 1 tracer des lignes droites et des formes en lignes droites

Les chemin pour déssiner en SVG  partie 2  tracer  des courbes 

Texte en SVG

SVG Dégradés de couleurs

SVG Dégradé linéaire

SVG Dégradé radial