Încercați-l te Exemple
Exemplele de mai jos încorpora codul SVG direct în codul HTML.
Acest lucru este susținut de Firefox, Internet Explorer 9, Google Chrome, Opera și Safari.
Exemple SVG
SVG Basic Shapes
Un cerc
Un dreptunghi
Un dreptunghi cu opacitate
Un dreptunghi cu opacitate 2
Un dreptunghi cu colțuri rotunjite
o elipsă
Trei elipse pe partea de sus a reciproc
două elipse
O linie
Un poligon cu trei laturi
Un poligon cu patru laturi
O stea
O altă stea
O linie poligonală
O altă linie poligonală
O cale
O curbă Bezier pătratică
Scrieți un text
Rotirea unui text
Textul pe mai multe linii
Text ca link
Definește culoarea unei linii, text sau contur (stroke)
Definește lățimea unei linii, text sau contur (stroke-width)
Definește diferite tipuri de terminatii la o cale deschisă (stroke-linecap)
Liniile punctate Defineste (stroke-dasharray)
Filtre SVG
feGaussianBlur - efect de estompare
feOffset - un dreptunghi de offset, apoi amestec original pe partea de sus a imaginii de offset
feOffset - estompa imaginea de offset
feOffset - face negru umbra
feOffset - tratează umbra ca o culoare
Un filtru feBlend
Filtru 1
Filtru 2
Filtru 3
Filtru 4
Filtru 5
Filtru 6
SVG Gradienții
O elipsă cu un gradient liniar orizontal de la galben la roșu
O elipsă cu un gradient liniar vertical de la galben la roșu
O elipsă cu un gradient liniar orizontal de la galben la roșu, și un text
O elipsă cu un gradient radial de la alb la albastru
O altă elipsă cu un gradient radial de la alb la albastru
SVG Diverse
Dreptunghi care se estompeze în mod repetat , la distanță de peste 5 secunde
Un dreptunghi în creștere , care își va schimba culoarea
Trei dreptunghiuri care își va schimba culoarea
Mutați textul de-a lungul unei căi de mișcare
Deplasa, roti, și textul scară de-a lungul unei căi de mișcare
Deplasa, roti, și scara de text de-a lungul unei căi de mișcare + un dreptunghi în creștere , care își va schimba culoarea
Rotirea elipse