SVG w HTML

Możesz wstawić element SVG bezpośrednio do strony HTML.

Wstaw SVG bezpośrednio do strony HTML

Poniżej znajduje się prosty przykład grafiki SVG:

Przepraszamy, przeglądarka nie obsługuje wewnętrznego SVG.

Oto kod HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Moje pierwsze SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

spróbuj sam

wyjaś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 kółka
  • atrybuty cx i cy definiują współrzędne x i y środka kółka. Jeśli cx i cy nie są ustawione, środek kółka ustawia się na (0, 0)
  • atrybut r definiuje promień kółka
  • atrybuty stroke i stroke-width kontrolują sposób wyświetlania konturu kształtu. Ustawiamy kontur kółka na zielony 'obwód' o szerokości 4 pikseli
  • fill atrybut ustala kolor wewnątrz kółka. Ustawiamy kolor wypełnienia na żółty
  • Zamknięcie znacznika </svg> obrazu SVG

Uwaga: Ponieważ SVG jest napisany w XML, wszystkie elementy muszą być poprawnie zamknięte!