SVG Samouczek
Rozpoczęcie pracy z SVG
Szukaj…
Uwagi
Skalowalna grafika wektorowa (SVG) to standard W3C do rysowania obrazów wektorowych.
Oto prosty samodzielny plik SVG:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG można również osadzić w HTML, w którym to przypadku xmlns nie jest wymagany.
Inne elementy graficzne to:
-
<line> -
<ellipse> -
<path> -
<polygon>i<polyline> -
<text>tym elementy potomne, takie jak<tspan>i<textPath>
CSS jest używany do stylizacji, chociaż nie wszystkie właściwości CSS dotyczą SVG, a sam SVG definiuje pewne specyficzne właściwości, takie jak fill i stroke , które nie są używane w innym miejscu.
Kształty można wypełniać gradientami lub wzorami, a dodatkowe efekty rastrowe można uzyskać za pomocą filtrów.
Przycinanie jest dostępne przy użyciu powyższych elementów graficznych jako ścieżek przycinania.
Odnośnie wersji standardu W3C SVG:
- Obecna wersja to SVG 1.1 (wydanie drugie)
- W3C pracuje obecnie nad wersją SVG 2
Wersje
| Wersja | Data wydania |
|---|---|
| 1.0 | 2001-09-04 |
| 1.1 Pierwsze wydanie | 2003-01-14 |
| 1.2 Mały | 22.12.2008 |
| 1.1 Druga edycja | 16.08.2011 |
Inline SVG
Inline SVG pozwala znacznikom SVG, napisanym w HTML, generować grafikę w przeglądarce.
Podczas korzystania z SVG inline DOCTYPE nie jest ściśle wymagany. Zamiast tego wystarczą tylko tagi otwierające i zamykające <svg> wraz z atrybutem viewBox lub atrybutami width i height:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
Powyższy fragment <svg> działa zarówno jako kontener, jak i element konstrukcyjny. Fragment ten ustanawia własny układ współrzędnych.
Poniżej znajduje się przykład renderowania fragmentu SVG z pewną zawartością. Stworzy prostokąt z „Hello World!” tekst w nim.
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
Wynik:
SVG jako ![]()
Możesz renderować zawartość pliku SVG jako obraz w dokumencie HTML za pomocą <img> . Na przykład:
<img src="my_svg_file.svg" alt="Image description">
Wymiary obrazu będą domyślnie wyświetlane zgodnie z właściwościami szerokości i wysokości określonymi w pliku SVG, do którego odwołuje się atrybut src .
Warto zauważyć różne ograniczenia związane z tym podejściem:
- Obsługa przeglądarek, choć dobra, nie obejmuje Internet Explorera 8 i wcześniejszych wersji, ani Androida 2.3 i wcześniejszych wersji.
- Nie można stylizować poszczególnych elementów zawartych w pliku SVG za pomocą CSS, który jest zewnętrzny w stosunku do pliku SVG. Cały CSS musi znajdować się w samym pliku obrazu.
- JavaScript nie działa.
- Obraz musi być kompletny w jednym pliku. Na przykład, jeśli plik SVG zawiera obrazy rastrowe, te obrazy wewnętrzne muszą być zakodowane jako adresy URL danych.
SVG jako obraz tła
Możesz wyświetlić plik SVG w dokumencie HTML, określając go jako obraz tła w CSS. Na przykład:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
Jeśli wymiary określone w pliku SVG są większe niż wymiary elementu HTML, może być pożądane określenie właściwości background-size , aby przeskalować SVG w celu dopasowania do jego elementu.
Podobnie jak w przypadku używania SVG jako <img> , warto zauważyć pewne ograniczenia związane z tym podejściem:
- Obsługa przeglądarek nie obejmuje Internet Explorera 8 i wcześniejszych wersji, ani Androida 2.3 i wcześniejszych wersji.
- Nie można stylizować poszczególnych elementów zawartych w pliku SVG za pomocą CSS, który jest zewnętrzny w stosunku do pliku SVG. Cały CSS musi znajdować się w samym pliku obrazu.