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
Primitives
Lignes
Rectangles
Cercles & Ellipses
Polylignes
Polygones
Segments
<svg width="400" height="300"> <!-- NOTA : Tous les ségments ont la meme longueur --> <!-- Segment noir Attributs CSS --> <line x1="50" y1="30" x2="350" y2="30" style="stroke:black; stroke-width: 20;"/> <!-- Segment bleu Attributs XML --> <line x1="50" y1="80" x2="350" y2="80" stroke="blue" stroke-width="20"/> <!-- Segment vert bouts arrondie --> <line x1="50" y1="130" x2="350" y2="130" stroke-linecap="round" stroke="green" stroke-width="20"/> <!-- Segment rouge bouts carrés --> <line x1="50" y1="180" x2="350" y2="180" stroke-linecap="square" stroke="red" stroke-width="20"/> <!-- Segment brun en pointillés --> <line x1="50" y1="230" x2="350" y2="230" stroke-dasharray="30 10" stroke="brown" stroke-width="20"/> </svg>
Rectangle
<svg width="400" height="300"> <!-- Rectangle rose --> <rect x="30" y="30" width="200" height="160" style="fill:pink; stroke:purple; stroke-width: 8px"/> <!-- Rectangle jaune --> <rect x="130" y="130" width="200" height="160" rx="20" ry="20" style="fill:#FF9; stroke:green; stroke-width: 8px"/> </svg>
Circle et Ellipse (circle & ellipse)
<svg width="400" height="300"> <!-- Cercle rose --> <circle cx="120" cy="120" r="100" style="fill:pink; stroke:purple; stroke-width: 8px"/> <!-- Ellipse jaune --> <ellipse cx="180" cy="180" rx="120" ry="80" style="fill:#FF9; stroke:green; stroke-width: 8px"/> </svg>
Polyligne (polyline)
<svg width="400" height="300"> <!-- Polyligne grise non remplie --> <polyline points="30,100 80,200 120,100" style="fill:none; stroke:gray; stroke-width: 20px"/> <!-- Polyligne pourpre non remplie --> <polyline points="150,100 200,200 250,100" stroke-linecap="round" style="fill:none; stroke:purple; stroke-width: 20px"/> <!-- Polyligne cyan non remplie --> <polyline points="280,100 330,200 380,100" stroke-linecap="round" stroke-linejoin="round" style="fill:none; stroke:cyan; stroke-width: 20px"/> </svg>
Polygones (polygon)
<svg width="400" height="300"> <!-- Polylgone rouge rempli avec du rose --> <polygon points="30,100 80,200 120,100" style="fill:#FAA; stroke:red; stroke-width: 20px"/> <!-- Polygone pourpre rempli avec du rose --> <polygon points="150,100 200,200 250,100" stroke-linejoin="bevel" style="fill:#FAA; stroke:purple; stroke-width: 20px"/> <!-- Polygone bleu rempli svec du cyan--> <polygon points="280,100 330,200 380,100" stroke-linecap="round" stroke-linejoin="round" style="fill:cyan; stroke:darkblue; stroke-width: 20px"/> </svg>
