Samouczek SVG
SVG to skrót od Scalable Vector Graphics.
SVG definiuje grafikę wektorową w formacie XML.
Przykłady w każdym rozdziale
Za pomocą naszego edytora „Wypróbuj sam” możesz edytować plik SVG i kliknąć przycisk, aby wyświetlić wynik.
Przykład SVG
<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>
Co powinieneś już wiedzieć
Zanim przejdziesz dalej, powinieneś mieć podstawową wiedzę o następujących kwestiach:
- HTML
- Podstawowy XML
Jeśli chcesz najpierw studiować te przedmioty, znajdź samouczki na naszej stronie głównej .
Co to jest SVG?
- SVG oznacza Scalable Vector Graphics
- SVG służy do definiowania grafiki wektorowej w Internecie
- SVG definiuje grafikę w formacie XML
- Każdy element i każdy atrybut w plikach SVG można animować
- SVG jest rekomendacją W3C
- SVG integruje się z innymi standardami W3C, takimi jak DOM i XSL
SVG jest rekomendacją W3C
SVG 1.0 stał się rekomendacją W3C 4 września 2001 roku.
SVG 1.1 stał się rekomendacją W3C 14 stycznia 2003 roku.
SVG 1.1 (drugie wydanie) stał się rekomendacją W3C 16 sierpnia 2011 roku.
Zalety SVG
Zalety korzystania z SVG w porównaniu z innymi formatami obrazu (takimi jak JPEG i GIF) to:
- Obrazy SVG można tworzyć i edytować za pomocą dowolnego edytora tekstu
- Obrazy SVG mogą być przeszukiwane, indeksowane, skryptowane i kompresowane
- Obrazy SVG są skalowalne
- Obrazy SVG mogą być drukowane w wysokiej jakości w dowolnej rozdzielczości
- Obrazy SVG można powiększać
- Grafika SVG NIE traci żadnej jakości, jeśli zostanie powiększona lub zmieniona
- SVG to otwarty standard
- Pliki SVG to czysty XML
Tworzenie obrazów SVG
Obrazy SVG można tworzyć za pomocą dowolnego edytora tekstu, ale często wygodniej jest tworzyć obrazy SVG za pomocą programu do rysowania, takiego jak Inkscape .