Grafika HTML SVG
SVG definiuje grafikę wektorową w formacie XML.
Co to jest SVG?
- SVG oznacza Scalable Vector Graphics
- SVG służy do definiowania grafiki w Internecie
- SVG jest rekomendacją W3C
Element HTML <svg>
Element HTML <svg>to kontener na grafikę SVG.
SVG ma kilka metod rysowania ścieżek, ramek, okręgów, tekstu i obrazów graficznych.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje dany
<svg>element.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Koło SVG
Przykład
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Prostokąt SVG
Przykład
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
Zaokrąglony prostokąt SVG
Przykład
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Gwiazda SVG
Przykład
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Logo SVG
Przykład
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
Różnice między SVG a Canvas
SVG to język opisu grafiki 2D w XML.
Canvas rysuje grafikę 2D w locie (za pomocą JavaScript).
SVG jest oparty na XML, co oznacza, że każdy element jest dostępny w SVG DOM. Do elementu można dołączyć obsługę zdarzeń JavaScript.
W SVG każdy narysowany kształt jest zapamiętywany jako obiekt. Jeśli atrybuty obiektu SVG zostaną zmienione, przeglądarka może automatycznie ponownie wyrenderować kształt.
Płótno jest renderowane piksel po pikselu. Na płótnie raz narysowana grafika zostaje zapomniana przez przeglądarkę. W przypadku zmiany jego położenia należy przerysować całą scenę, w tym wszelkie obiekty, które mogły zostać zakryte grafiką.
Porównanie Canvas i SVG
Poniższa tabela przedstawia kilka ważnych różnic między Canvas i SVG:
| Canvas | SVG |
|---|---|
|
|
Samouczek SVG
Aby dowiedzieć się więcej o SVG, przeczytaj nasz Samouczek SVG .