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
PATHS
Lignes
Arcs
Courbe Quadratique
Courbe Cubique
Suite de ségments - LineTo (l, h, v)
<svg width="400" height="300"> <!-- M : MoveTo --> <!-- l : LineTo Relative --> <!-- z : ClosePath --> <path d="M 150,150 l 100,100 l 100,-100 z" style="fill: none; stroke: green; stroke-width: 8" /> <!-- M : MoveTo --> <!-- L : LineTo Absolute --> <!-- z : ClosePath --> <path d="M 150,150 L 100,100 L 100,-100 z" style="fill: none; stroke: red; stroke-width: 8" /> </svg>
<svg width="400" height="300"> <!-- M : MoveTo --> <!-- h : HorizontalTo Relative --> <!-- v : VerticalTo Relative --> <!-- z : ClosePath --> <path d="M 100,50 h 200 v 200 z" style="fill: #FFC; stroke: green; stroke-width: 8" /> </svg>
Arcs - ArcTo (a)
<svg width="400" height="300"> <!-- a : ArcTo Relative --> <!-- Arc d'1 ellipse de rayons 80,60 et d'un angle 0° --> <!-- On part du point (150,150) au point (270,150) --> <path d="M 150,150 a 100,60 0 0,0 120,0" style="fill: none; stroke: green; stroke-width: 6" /> <path d="M 150,150 a 100,60 0 0,1 120,0" style="fill: none; stroke: red; stroke-width: 6" /> <path d="M 150,150 a 100,60 0 1,1 120,0" style="fill: none; stroke: blue; stroke-width: 6" /> <path d="M 150,150 a 100,60 0 1,0 120,0" style="fill: none; stroke: purple; stroke-width: 6" /> </svg>
Courbes de beziers - Quadratiques (q)
<svg width="400" height="300"> <!-- q : QuadraticTo Relative --> <!-- On part du point (150,150) au point (250,150) --> <!-- En passant par le point de controle (200,50) --> <path d="M 150,150 q 50,-100 100,0" style="fill: none; stroke: green; stroke-width: 6" /> <!-- Les memes points avec un autre pt de controle --> <path d="M 150,150 q 100,150 100,0" style="fill: none; stroke: red; stroke-width: 6" /> </svg>
Courbes de beziers - Cubiques (c)
<svg width="400" height="300"> <!-- c : CubicTo Relative --> <!-- On part du point (100,100) au point (250,150) --> <!-- En passant par deux pts de controle --> <path d="M 100,150 c 0,-150 200,150 200,0" style="fill: none; stroke: green; stroke-width: 6" /> <!-- Les memes points avec deux autres pts de controle --> <path d="M 100,150 c 0,150 200,-150 200,0" style="fill: none; stroke: red; stroke-width: 6" /> </svg>
