Scalable Vector Graphics
= format d'image basé sur XML
- qui peut s'agrandir à n'importe quelle taille d'écran sans distorsion ;
- qui est utilisé pour créer des animations graphiques et de l'interaction
- 1.1 SVG Fun
- 1.2 Image Bitmap versus Vecteur
- 1.3 Notre premier SVG
- 1.4 Une Icône Maison
- 1.5 Un Toit pour Notre Maison
- 1.6 Une Cheminée pour Notre Maison
- 1.7 Une Porte pour Nous Laisser Entrer
- 2.1 Des Cercles à la Tonne
- 2.2 Dessiner un Cercle
- 2.3 Une Bordure Externe pour Notre Cercle
- 2.4 SVG Inline
- 2.5 Arrondir les Angles
- 2.6 Des Formes pour Vous
- 2.7 Une Fleur Doit Avoir une Tige
- 2.8 Ajouter un Texte à Notre Icône
- 2.9 Attributs Inline
- 2.10 Les Styles à Leur Place
- 2.11 Un Toit Polygone
- 2.12 L'Ordre Compte
- 3.1 Groups Anyone?
- 3.2 Grouper Toutes les Choses
- 3.3 Déplacer le Groupe
- 3.4 Transform à la Rescousse
- 3.5 Faire Tourner la Fleur
- 3.6 Redimensionner la Fleur
- 3.7 Redimensionner l’autre Fleur
- 3.8 Responsively
- 3.9 Revue du Viewport
- 3.10 ViewBox FTW
- 4.1 Les Paths Sont Amusants
- 4.2 Des Nuages pour Notre Maison
- 4.3 Les Symbols à Utiliser
- 4.4 Les Symboles Vont Aider
- 4.5 Accessibilité
- SVG - spec. officielle : la spécification officielle du SVG sur le site du W3C
- SVG - spec. en français : la version française de la spécification du SVG sur le site Yoyodesign
- Styles SVG - doc. officielle : la documentation officielle du W3C au sujet des styles SVG sur le site du W3C
- Styles SVG - doc. en français : la documentation au sujet des styles SVG en français sur le site Yoyodesign
- SVG, le dessin vectoriel pour le web : Tutoriel sur Alsacréations par Nicolas Gillis
- Un logo cliquable SVG avec alternatives : Tutoriel sur Alsacréations par Stéphanie W.
- Créer une police d’icônes facilement à partir d’illustrations vectorielles : Tutoriel sur Alsacréations par Stéphanie W.
- Réduire le poids d'une image SVG : d'Illustrator à l'export final : Tutoriel sur Alsacréations par Stéphanie W.
- How SVG Line Animation Works : Tuto pour une simple animation de path
- A Guide to SVG Animations (SMIL) :
- Creating a Web Type Lockup : Use SVG to create a type lockup (a typographic design where the words and characters are styled and arranged very specifically)
- SVGround : Un site qui met à disposition des cours gratuits sur SVG (version 1.1) les plus complets possible
- SVG ou Canvas, que choisir ? : Article sur les différences entre SVG et Canvas par Jérémie Patonnier sur OpenWeb
- Animated SVG icons : Animations SVG réalisées par Luigi De Rosa (Epic, du stage de Céline Eppe)
- 30 Awesome SVG Animation For Your Inspiration