Exemples SVG

Essayez-le vous-même

L'exemple suivant intègre le code SVG directement dans le code HTML.

Firefox, Internet Explorer 9, Google Chrome, Opera et Safari le supportent tous.

Exemples SVG

Formes de base SVG

Cercle
Rectangle
Rectangle opaque
Rectangle avec une opacité de 2
Rectangle arrondi
Ellipse
Trois ellipses se chevauchant
Deux ellipses
Ligne
Un polygone à trois côtés
Un polygone à quatre côtés
Étoile
Une autre étoile
Ligne brisée
Autre ligne brisée
Chemins
Courbe quadratique
Écrire un texte
Texte tourné
Texte en plusieurs lignes
Texte en tant que lien
Définir la couleur des lignes, des textes ou des contours (stroke)
Définir la largeur des lignes, des textes ou des contours (stroke-width)
Définir les différents types de finitions des chemins ouverts (stroke-linecap)
Définir le trait de tiret (stroke-dasharray)

Filtres SVG

feGaussianBlur - Effet de flou
feOffset - Décaler un rectangle, puis combiner l'image originale en haut de l'image décalée
feOffset - Flou de l'image décalée
feOffset - Faire l'ombre noire
feOffset - Traiter l'ombre avec une couleur spécifique
Filtre feBlend
Filtre 1
Filtre 2
Filtre 3
Filtre 4
Filtre 5
Filtre 6

Dégradations SVG

Une ellipse avec une dégradation linéaire horizontale du jaune au rouge
Une ellipse avec une dégradation linéaire verticale du jaune au rouge
Une ellipse et un texte avec une dégradation linéaire horizontale du jaune au rouge
Une ellipse avec une dégradation radiale du blanc au bleu
Une ellipse avec une dégradation radiale du blanc au bleu

Divers éléments SVG

Un rectangle qui disparaît en répétition dans les 5 secondes
Un rectangle qui change de couleur et grandit sans cesse
Trois rectangles qui changent de couleur
Déplacement du texte suivant le chemin de déplacement
Déplacement, rotation et agrandissement du texte suivant le chemin de déplacement
Déplacement, rotation et agrandissement du texte suivant le chemin de déplacement + rectangle croissant de couleur changeante
Rotation de l'ellipse