Prova-da-te Esempi
Gli esempi di seguito incorporare il codice SVG direttamente nel codice HTML.
Questo è supportato da Firefox, Internet Explorer 9, Google Chrome, Opera e Safari.
Esempi SVG
SVG forme base
Un cerchio
Un rettangolo
Un rettangolo con l'opacità
Un rettangolo con l'opacità 2
Un rettangolo con gli angoli arrotondati
un'ellisse
Tre ellissi su uno sopra l'altro
due ellissi
Una linea
Un poligono con tre lati
Un poligono con quattro lati
Una stella
un'altra stella
Una polilinea
Un altro poligonale
Un sentiero
Una curva di Bezier quadratica
Scrivi un testo
Ruotare un testo
Testo su più linee
Testo come un link
Definisce il colore di una linea, di testo o di uno schema (stroke)
Definisce la larghezza di una linea, testo o di uno schema (stroke-width)
Definisce diversi tipi di terminazioni ad un percorso aperto (stroke-linecap)
Linee tratteggiate Definisce (stroke-dasharray)
Filtri SVG
feGaussianBlur - effetto di sfocatura
feOffset - Offset un rettangolo, poi si fondono l'originale sulla parte superiore dell'immagine di offset
feOffset - sfocatura dell'immagine di offset
feOffset - fare il nero ombra
feOffset - trattare l'ombra come un colore
Un filtro feBlend
Filtro 1
Filtro 2
Filtro 3
Filtro 4
Filtro 5
Filtro 6
SVG gradienti
Un'ellisse con un gradiente lineare orizzontale dal giallo al rosso
Un ellisse con un gradiente lineare verticale dal giallo al rosso
Un'ellisse con un gradiente lineare orizzontale dal giallo al rosso, e un testo
Un'ellisse con una sfumatura radiale dal bianco al blu
Un'altra ellisse con un gradiente radiale, dal bianco al blu
SVG Varie
Rectangle che più volte svaniscono oltre 5 secondi
Un rettangolo in crescita che cambierà colore
Tre rettangoli che cambieranno colore
Spostare il testo lungo un tracciato di movimento
Spostare, ruotare, e il testo scala lungo un tracciato di movimento
Spostare, ruotare, e il testo scala lungo un tracciato di movimento + un rettangolo in crescita che cambia colore
Rotazione ellissi