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.

 

---