SVG w HTML
Możesz osadzać elementy SVG bezpośrednio na swoich stronach HTML.
Osadzaj SVG bezpośrednio na stronach HTML
Oto przykład prostej grafiki SVG:
a oto kod HTML:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Objaśnienie kodu SVG:
- Obraz SVG zaczyna się od elementu <svg>
- Atrybuty width i height elementu <svg> definiują szerokość i wysokość obrazu SVG
- Element <circle> służy do rysowania okręgu
- Atrybuty cx i cy definiują współrzędne x i y środka okręgu. Jeśli cx i cy nie są ustawione, środek okręgu jest ustawiony na (0, 0)
- Atrybut r określa promień okręgu
- Atrybuty obrysu i szerokości obrysu kontrolują wygląd obrysu kształtu. Ustawiamy kontur koła na zieloną „ramkę” 4px
- Atrybut wypełnienia odnosi się do koloru wewnątrz okręgu. Ustawiamy kolor wypełnienia na żółty
- Zamykający tag </svg> zamyka obraz SVG
Uwaga: Ponieważ SVG jest napisane w XML, wszystkie elementy muszą być poprawnie zamknięte!