Latest web development tutorials

Exemples de SVG

exemples en ligne

L'exemple suivant est le code SVG directement intégré dans le code HTML.

Google Chrome, Firefox, Internet Explorer9 et Safari sont pris en charge.

NOTE: L'exemple suivant ne fonctionnera pas à l'Opéra, même si le support Opera SVG - il ne supporte pas SVG directement dans le code HTML.


Exemples de SVG

SVG Basic Shapes

Un cercle

rectangle

Opaque rectangle

Un opaque rectangulaire 2

Un rectangle avec des coins arrondis

un ovale

Et entassés sur les trois ellipses

deux ellipses

Une ligne

triangle

quadrilatéral

Une étoile

Another Star

ligne brisée

un autre polyligne

chemin

courbe de Bézier quadratiques

Écrire un texte

texte pivoté

Texte sur le chemin

Quelques lignes de texte

Lien texte

Définir une ligne, le texte ou la couleur du contour (stoke)

Définir une largeur de ligne, du texte ou du contour (trait de largeur)

attribut stroke-linecap définit la fin d'un chemin ouvert de différents types:

La définition d'une ligne en pointillés (stroke-dasharray)

Filtres SVG

feGaussianBlur - Blur

feOffset - compensée par un rectangle, puis le haut de l'image d' offset de mélange

feOffset - Blur Image Offset

feOffset - de sorte que les ombres noires

feOffset - enduit de couleur ombragée

Un feBlend filtre

Un feColorMatrix filtre

Un filtre feComponentTransfer

feOffset, feFlood, feComposite, feMerge et feMergeNode

Un feMorphology filtre

Filtre 1

Filtre 2

Filtre 3

Filtre 4

Filtre 5

Filtre 6

SVG Gradient

Horizontal gradient linéaire du jaune au rouge ovale

Vertical gradient linéaire du jaune au rouge ovale

Horizontal gradient linéaire de jaune à un ovale rouge dans le texte et ajouter

gradient radial de blanc à ovale bleu

gradient radial de blanc à ovale bleu autre

SVG Divers

Répéter l' opération avec 5 secondes fanent rectangle

Et changer la couleur du rectangle devient grand

Il va changer la couleur des trois rectangles

Mouvement le long d' un chemin de déplacement du texte

Le long d' une trajectoire de mouvement pour se déplacer, tourner et texte à l'échelle

Le long d' une trajectoire de mouvement pour se déplacer, faire pivoter et le texte à l'échelle + progressivement élargie et changer de couleur rectangle