Exemples SVG
Primitives de base
Lignes
Rectangles
Cercles & Ellipses
Polylignes
Polygones
Paths
Lignes
Arcs
Courbe Quadratique
Courbe Cubique
Texte
Images
Dégradés
Dégradé linéaire
Dégradé radial
Motifs
Transformations
Translation
Rotation
Mise à l'échelle
Cisaillement
Avancé
Cliping
Masques
Exercices
1 - Coeur
2 - Coeurs croisés
3 - Logo Lesieur
4 - Astérie
5 - Croisillon
6 - Carrelage
7 - Vagues
8 - Mona lisa
Dégradés
Dégradé linéaire
Dégradé radial
Dédradé linéaire (linearGradient)
<svg width="400" height="300"> <linearGradient id="grad0"> <stop offset="0%" stop-color="red"></stop> <stop offset="20%" stop-color="orange"></stop> <stop offset="40%" stop-color="yellow"></stop> <stop offset="60%" stop-color="green"></stop> <stop offset="80%" stop-color="blue"></stop> <stop offset="100%" stop-color="violet"></stop> </linearGradient> <rect x="50" y="50" width="300" height="200" fill="url(#grad0)"></rect> </svg>
<svg width="400" height="300"> <linearGradient id="grad1"> <stop offset="0%" stop-color="green"></stop> <stop offset="100%" stop-color="white"></stop> </linearGradient> <circle r="70" cx="120" cy="150" fill="url(#grad1)"/> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="red"></stop> <stop offset="100%" stop-color="white"></stop> </linearGradient> <circle r="70" cx="300" cy="150" fill="url(#grad2)"/> </svg>
Dédradé radial (radialGradient)
<svg width="400" height="300"> <radialGradient id="grad3"> <stop offset="0%" stop-color="white"></stop> <stop offset="100%" stop-color="green"></stop> </radialGradient> <circle r="70" cx="120" cy="150" fill="url(#grad3)"/> <radialGradient id="grad4" fx="30%" fy="30%"> <stop offset="0%" stop-color="white"></stop> <stop offset="100%" stop-color="red"></stop> </radialGradient> <circle r="70" cx="300" cy="150" fill="url(#grad4)"/> </svg>
