Spróbuj to sam Przykłady
Poniższe przykłady osadzić kod SVG bezpośrednio w kodzie HTML.
Potwierdzeniem tego jest Firefox, Internet Explorer 9, Google Chrome, Opera i Safari.
Przykłady SVG
SVG Kształty podstawowe
Koło
prostokąt
Prostokąt z kryciem
Prostokąt z kryciem 2
Prostokąt z zaokrąglonymi rogami
elipsą
Trzy elipsy na górze każdego innego
dwie elipsy
linia
Wielokąt z trzech stron
Wielokąt z czterech stron
Gwiazda
Kolejną gwiazdą
polilinia
Innym łamaną
Ścieżka
Krzywej Béziera drugiego stopnia
Napisz tekst
Obracanie tekstu
Tekst na kilku liniach
Tekst jako link
Określa kolor linii, tekstu lub konspektu (stroke)
Określa szerokość linii, tekstu lub konspektu (stroke-width)
Definiuje różne rodzaje końcówek do otwartej ścieżce (stroke-linecap)
Określa linie przerywane (stroke-dasharray)
Filtry SVG
feGaussianBlur - efekt rozmycia
feOffset - przesunięcie prostokąta, a następnie mieszać oryginału na górze przesunięcie obrazu
feOffset - rozmycie obrazu offsetowej
feOffset - sprawiają, że cień czarny
feOffset - traktować jako cień koloru
Filtr feBlend
filtr 1
filtr 2
filtr 3
filtr 4
filtr 5
filtr 6
SVG Gradienty
Elipsą z poziomym liniowym gradientem od żółtego do czerwonego
Elipsą z pionowym gradientem liniowym od żółtego do czerwonego
Elipsą z poziomym liniowym gradientem od żółtego do czerwonego i tekst
Elipsą z gradientu radialnego z białego na niebieski
Innym elipsą z gradientu radialnego z białego na niebieski
SVG Inne
Prostokąt, który wielokrotnie znikną w ciągu 5 sekund
Rosnąca prostokąt zmieni kolor
Trzy prostokąty, które zmieniają kolor
Przesuwanie tekstu wzdłuż ścieżki ruchu
Przesuwanie, obracanie i skala tekstu wzdłuż ścieżki ruchu
Przesuwanie, obracanie i skala tekstu wzdłuż ścieżki ruchu + rosnąca prostokąt zmieni kolor
obracanie elipsy