SVG wewnętrzne HTML5

HTML5 obsługuje wewnętrzne SVG.

Co to jest SVG?

  • SVG oznacza skalowalne wektorowe grafiki (Scalable Vector Graphics)
  • SVG używany jest do definiowania wektorowych grafik sieciowych
  • SVG używa formatu XML do definiowania grafiki
  • Obrazy SVG nie tracą jakości graficznej przy powiększaniu lub zmianie rozmiaru
  • SVG jest standardem W3C

Zalety SVG

W porównaniu do innych formatów obrazów (np. JPEG i GIF), zaletą użycia SVG jest:

  • Obrazy SVG można tworzyć i modyfikować za pomocą edytora tekstu
  • Obrazy SVG można przeszukiwać, indeksować, skryptować lub kompresować
  • SVG jest skalowalny
  • Obrazy SVG można drukować w wysokiej jakości przy dowolnej rozdzielczości
  • SVG można powiększać bez utraty jakości obrazu

Wsparcie przeglądarki

Internet Explorer 9, Firefox, Opera, Chrome oraz Safari wspierają wewnętrzne SVG.

Włóż SVG bezpośrednio do strony HTML

W HTML5 możesz bezpośrednio włożyć element SVG do strony HTML:

Przykład

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Spróbuj sam

Wynik:

Tutorial SVG

Aby dowiedzieć się więcej o SVG, odwiedź naszą Tutorial SVG.