Kurs HTML5 – SVG – Wprowadzenie
Autor: Marcin Dembowski
Opublikowano: 2011-11-14
Scalable Vector Graphics (w skrócie SVG) jest plikiem tekstowym, którego zawartość tworzy zestaw znaczników XML opisujących pozycję, rozmiary, wygląd dwuwymiarowych kształtów, obrazów i tekstu. Poszczególne podstawowe elementy możesz łączyć i wykorzystywać, tworząc dzięki temu bardziej skomplikowane kształty.
Format SVG jest standardem, który rozwija się od 1999 roku przez World Wide Web Consortium. Do dziś powstały jego trzy rekomendacje – czyli ukończone wersje standardu (SVG 1.1, SVG Tiny 1.2, SVG Mobile 1.1) oraz kilka zarysów i planów następnych wersji – w tym kompletnie przepisanej wersji SVG 2.0, która to wypchnęła wersję SVG 1.2. Mimo upublicznionej w 2003 roku rekomendacji SVG 1.1, na chwilę obecną żadna z dostępnych na rynku przeglądarek nie wspiera jej w pełni, jednak większość podstawowych funkcji jest wspierana już natywnie – to znaczy, bez instalowania dodatkowych rozszerzeń – we wszystkich popularnych obecnie przeglądarkach, począwszy od Internet Explorer 9.
Grafika tworzona za pomocą składni SVG jest grafiką wektorową – oznacza to, że utworzone w ten sposób obiekty można powiększać bez utraty jakości obrazu. Bardzo dobrze da się to zauważyć porównując przykłady na rysunku Rys. 1. Po lewej stronie użyty został obraz w rastrowym formacie PNG o oryginalnych rozmiarach 64x64 pikseli i jego powiększeniu 256x256 pikseli, natomiast po prawej stronie, został użyty obraz w formacie wektorowym SVG. Można zauważyć, że mniejsze obrazki są identyczne, jednak widać również różnice w ich powiększeniach.
Rys. 1. Porównanie jakości grafiki rastrowej z grafiką wektorową.
Grafika utworzona w formacie SVG, może być statyczna i przedstawiać różnego rodzaju elementy ozdobne, gradienty, wykresy, tekst, plany, schematy i mapy, jak i dynamiczna, pozwalająca tworzyć animacje, gry, efekty przejścia. Dodatkowo, wykorzystując język skryptowy JavaScript oraz Kaskadowe Arkusze Stylów (CSS), można w dość prosty sposób tworzyć i zarządzać poszczególnymi elementami składowymi całego obrazka, wprowadzając zdarzenia na kliknięcia myszką, czy też koloryzując SVG, zależnie od wyglądu strony. Dzięki swojej prostocie, format ten znalazł miejsce nie tylko w przeglądarkach internetowych, ale także w różnego rodzaju programach graficznych.
Zaletą formatu tekstowego, definiującego SVG jest to, że rozmiar pliku można zmniejszyć grupując często powtarzające się i wykorzystywane obiekty, jak i kompresować jego zawartość, wykorzystując do tego celu algorytm kompresji GZIP. Postać tekstowa pozwala także w dość prosty sposób analizować jej zawartość, przez co dane mogą być indeksowane, przeszukiwane jak i edytowane przez najprostsze narzędzia tekstowe, na przykład Notatnik.
Aby wyjaśnić sposób użycia i zasadę działania SVG, przygotowany został zestaw samouczków, które przedstawiają, krok po kroku, poszczególne części SVG. Dzięki nim zdobędziesz podstawową wiedzę na temat sposobu osadzania SVG na stronach internetowych, zapoznasz się z dostępnymi obiektami, utworzysz ozdobny tekst oraz wykorzystasz CSS do definiowania kolorów dla pliku SVG, a na koniec utworzysz interaktywną grę.
Spis samouczków:
- SVG na stronach WWW – w tej części kursu nauczysz się osadzać SVG na stronach oraz w zewnętrznych plikach.
- Podstawowe kształty w SVG – w tej części kursu zapoznasz się z podstawowymi kształtami w SVG. Za ich pomocą utworzysz znaki drogowe.
- Ścieżki w SVG – w tej części kursu zapoznasz się z obiektem ścieżki oraz z zasadą jej definiowania. Ponadto, za pomocą ścieżki utworzysz kolejny znak drogowy.
- Tekst w SVG – w tej części kursu wyświetlisz tekst oraz dowiesz się, jak zmodyfikować jego wygląd i kolor.
- Biblioteka elementów w SVG – w tej części kursu nauczysz się, jak grupować elementy, a następnie utworzysz ozdobny tekst, który zostanie wyświetlony na ścieżce.
- Transformacje w SVG – w tej części kursu nauczysz się, w jaki sposób skalować, przesuwać oraz obracać obiekty w SVG.
- Animacja w SVG – w tej części kursu nauczysz się podstaw animacji w SVG przy użyciu języka JavaScript – utworzysz w ten sposób zegar analogowy, wskazujący aktualną godzinę na komputerze.
- Definiowanie kolorów i gradientów w SVG – w tej części kursu dowiesz się, w jaki sposób definiować kolory i gradienty w SVG.
- Definiowanie wzorów i wypełnień w SVG – w tej części kursu dowiesz się, w jaki sposób definiować własne wypełnienia.
- Style CSS w SVG – w tej części kursu nauczysz się, jak przy użyciu stylów CSS zmienić wygląd obrazka SVG.
- Animacja zaawansowana w SVG – w tej części kursu dowiesz się, w jaki sposób wykrywać kolizje oraz sterować obiektami SVG na przykładzie prostej gry.
- Porównanie SVG z elementem CANVAS – w tej części kursu dowiesz się, jakie są różnice pomiędzy SVG, a elementem CANVAS oraz gdzie lepiej użyć SVG, a gdzie lepiej CANVAS.