Co to jest `svg` w HTML?

SVG (Scalable Vector Graphics) to format grafiki wektorowej, który jest integralną częścią języka HTML i pozwala na tworzenie oraz wyświetlanie zaawansowanych, skalowalnych grafik bez utraty jakości niezależnie od rozmiaru lub rozdzielczości ekranu. SVG bazuje na języku XML i jest przetwarzany bezpośrednio przez przeglądarki internetowe, co czyni go potężnym narzędziem w nowoczesnym webdesignie.

Czym jest SVG w HTML?

• SVG umożliwia powstawanie grafik dwuwymiarowych za pomocą zestawu znaczników podobnych do tych używanych w HTML lub XML;
• każdy element SVG (np. linia, okrąg, prostokąt) jest opisany przy użyciu znaczników tekstowych, co ułatwia modyfikację, stylizację przez CSS oraz manipulację przez JavaScript;
• grafika SVG jest niezależna od rozdzielczości, dzięki czemu nie traci ostrości na ekranach o wysokiej rozdzielczości (Retina, 4K);
• SVG można umieszczać bezpośrednio w kodzie HTML lub ładować jako osobne pliki.

Przykładowa składnia SVG w HTML

Poniżej znajduje się prosty przykład wstawienia grafiki SVG bezpośrednio do dokumentu HTML:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#0099ff" stroke="#003366" stroke-width="4" />
  <text x="100" y="115" font-size="32" text-anchor="middle" fill="#ffffff">SVG</text>
</svg>

To proste logo tworzy niebieskie koło z białym napisem pośrodku i ciemnym obramowaniem.

Najważniejsze zalety SVG

• Skalowalność – grafiki SVG pozostają ostre w każdym rozmiarze — od miniatur po billboardy;
• Edytowalność – SVG można łatwo edytować w edytorach tekstowych lub programach do grafiki wektorowej;
• Możliwość animacji – elementy SVG można animować za pomocą CSS lub JavaScript;
• Interaktywność – SVG wspiera reagowanie na zdarzenia (kliknięcia, najechanie kursorem) i dynamiczne zmiany;
• Mały rozmiar pliku – zwłaszcza w przypadku prostych grafik, SVG zajmuje dużo mniej miejsca niż odpowiedniki rastrowe (JPG, PNG).

Typowe zastosowania SVG na stronach internetowych

• Ikony i logotypy – SVG to pierwszy wybór dla ikon menu, przycisków, logotypów firmowych — zawsze idealnie ostre i lekkie;
• Ilustracje i grafiki – wielu nowoczesnych projektantów stosuje SVG zamiast rastrowych ilustracji, ponieważ grafika wygląda świetnie na każdym urządzeniu;
• Animacje – SVG idealnie nadaje się do animowania elementów — od prostych efektów po skomplikowane infografiki z animowanymi danymi;
• Mapy interaktywne – SVG wykorzystuje się do prezentacji map, na których punkty mogą reagować na interakcje użytkownika (np. mapy sklepów, mapy interaktywne państw);
• Diagramy i wykresy – dzięki SVG można budować interaktywne wykresy i diagramy, które dynamicznie aktualizują się, np. pod wpływem wyników wyszukiwań lub wprowadzonych danych.

Zaawansowane techniki pracy z SVG

• Stylowanie przy użyciu CSS – każdy element SVG można stylizować dokładnie jak HTML, np. nadawanie kolorów po najechaniu kursorem;
• Integracja z JavaScript – możliwość dynamicznej zmiany kształtu, koloru lub pozycji elementów w odpowiedzi na działania użytkownika;
• Dostępność – stosowanie elementów <title> i <desc> w SVG pozwala na opisywanie grafik osobom korzystającym z czytników ekranu.

Przykład – interaktywna animowana ikona

<svg width="60" height="60" viewBox="0 0 60 60" style="cursor:pointer;">
  <circle cx="30" cy="30" r="25" fill="#42b983" id="myCircle"/>
  <text x="30" y="37" font-size="20" text-anchor="middle" fill="#fff">Klik</text>
  <script type="application/ecmascript">
    <![CDATA[
      var circle = document.getElementById('myCircle');
      circle.addEventListener('mouseover', function() {
        circle.setAttribute('fill', '#35495e');
      });
      circle.addEventListener('mouseout', function() {
        circle.setAttribute('fill', '#42b983');
      });
    ]]>
  </script>
</svg>

Po najechaniu kursorem na okrąg zmienia on kolor — to przykład prostej interakcji.

Podsumowanie

SVG to kluczowy format dla współczesnych stron internetowych, pozwalający na tworzenie skalowalnej, interaktywnej i nowoczesnej grafiki. Integracja z HTML, prostota edycji, wsparcie dla animacji i responsywności czynią SVG niezastąpionym narzędziem w pracy każdego webdevelopera. Jeśli zależy ci na jakości, wydajności i atrakcyjności wizualnej twojej witryny — ucz się i korzystaj z SVG!