Forum | Derniers tutoriels de développement web
 

SVG Exemples


Essayez-le vous-même Exemples

Les exemples ci-dessous intègrent le code SVG directement dans le code HTML.

Ceci est soutenu par Firefox, Internet Explorer 9, Google Chrome, Opera et Safari.


SVG Exemples

SVG Basic Shapes

Un cercle
Un rectangle
Un rectangle avec une opacité
Un rectangle avec une opacité 2
Un rectangle avec des coins arrondis
Une ellipse
Trois points de suspension au - dessus de l'autre
deux ellipses
Une ligne
Un polygone à trois côtés ,
Un polygone à quatre côtés ,
Une étoile
une autre étoile
Une polyligne
un autre polyligne
Un chemin
Une courbe de Bézier quadratique
Écrire un texte
Tourner un texte
Texte sur plusieurs lignes
Texte en tant que lien
Définit la couleur d'une ligne, le texte ou le contour (stroke)
Définit la largeur d'une ligne, le texte ou le contour (stroke-width)
Définit différents types de terminaisons à un chemin ouvert (stroke-linecap)
Lignes pointillées Définit (stroke-dasharray)

Filtres SVG

feGaussianBlur - effet de flou
feOffset - décalage d' un rectangle, puis mélanger l'original sur le dessus de l'image d' offset
feOffset - flou l'image d' offset
feOffset - faire le noir de l' ombre
feOffset - traiter l'ombre comme une couleur
Un filtre feBlend
Filtre 1
Filtre 2
Filtre 3
Filtre 4
Filtre 5
Filtre 6

SVG Dégradés

Une ellipse avec un gradient linéaire horizontal du jaune au rouge
Une ellipse avec un gradient linéaire vertical du jaune au rouge
Une ellipse avec un gradient linéaire horizontal du jaune au rouge et un texte
Une ellipse avec un dégradé radial du blanc au bleu
Une autre ellipse avec un gradient radial du blanc au bleu

SVG Divers

Rectangle qui se fanent à plusieurs reprises à une distance de plus de 5 secondes
Un rectangle de croissance qui va changer la couleur
Trois rectangles qui vont changer la couleur
Déplacer le texte le long d' une trajectoire de mouvement
Déplacer, faire pivoter, et le texte à l'échelle le long d' une trajectoire de mouvement
Déplacer, faire pivoter, et le texte à l'échelle le long d' une trajectoire de mouvement + un rectangle de croissance qui va changer la couleur
Rotation des ellipses