Grafika SVG w HTML – przewodnik z przykładami

Co to jest SVG?

SVG (Scalable Vector Graphics) to format grafiki wektorowej oparty na XML, który pozwala na definiowanie kształtów, linii i tekstu jako elementów kodu. Dzięki temu obrazy w formacie SVG mogą być skalowane bez utraty jakości, co czyni je idealnym rozwiązaniem dla stron internetowych.

Jak używać SVG w HTML?

Istnieje kilka sposobów na umieszczenie grafiki SVG w dokumencie HTML:

1. Wstawienie bezpośrednio w kodzie HTML

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

To podejście pozwala na łatwą manipulację grafiką za pomocą CSS i JavaScript.

2. Osadzanie pliku SVG jako obraz

<img src="grafika.svg" alt="Przykładowa grafika SVG">

Jest to prosty sposób na użycie plików SVG, ale nie pozwala na łatwą manipulację elementami grafiki.

3. Użycie SVG jako tła w CSS

.element {
  background-image: url('grafika.svg');
  width: 100px;
  height: 100px;
}

To rozwiązanie jest przydatne, jeśli SVG ma być używane jako dekoracyjne tło elementu.

Podstawowe elementy SVG

Oto lista podstawowych elementów SVG wraz z opisem i sposobem użycia w XML SVG:

1. <svg>

Opis: Element kontenerowy definiujący przestrzeń rysowania SVG.

2. <circle>

Opis: Rysuje okrąg. Atrybuty:

• cx, cy – współrzędne środka
• r – promień
• fill – kolor wypełnienia
• stroke – kolor obramowania

Przykład:

<circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2"/>

3. <rect>

Opis: Rysuje prostokąt lub kwadrat. Atrybuty:

• x, y – współrzędne lewego górnego rogu
• width, height – szerokość i wysokość
• rx, ry – zaokrąglenie rogów

Przykład:

<rect x="20" y="20" width="100" height="50" rx="10" ry="10" fill="red" stroke="black" stroke-width="2"/>

4. <line>

Opis: Rysuje linię między dwoma punktami. Atrybuty:

• x1, y1 – punkt początkowy
• x2, y2 – punkt końcowy

Przykład:

<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2"/>

5. <ellipse>

Opis: Rysuje elipsę. Atrybuty:

• cx, cy – środek
• rx, ry – promienie osi X i Y

Przykład:

<ellipse cx="100" cy="50" rx="50" ry="30" fill="green" stroke="black" stroke-width="2"/>

6. <polygon>

Opis: Rysuje wielokąt (np. trójkąt). Atrybuty:

• points – lista punktów (x,y)

Przykład:

<polygon points="50,15 90,85 10,85" fill="yellow" stroke="black" stroke-width="2"/>

7. <polyline>

Opis: Rysuje linię łamaną składającą się z wielu segmentów. Atrybuty:

• points – lista punktów

Przykład:

<polyline points="10,10 50,50 90,10" fill="none" stroke="black" stroke-width="2"/>

8. <path>

Opis: Rysuje dowolny kształt za pomocą poleceń ścieżki. Atrybuty:

• d – opis ścieżki (np. M, L, C, Z)

Przykład:

<path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="black" stroke-width="2"/>

9. <text>

Opis: Wyświetla tekst. Atrybuty:

• x, y – pozycja tekstu
• font-size, fill – stylizacja

Przykład:

<text x="50" y="50" font-size="20" fill="black">Witaj SVG!</text>

10. <g>

Opis: Grupa elementów, umożliwia wspólne operacje (np. transformacje).

Przykład:

<g fill="blue" stroke="black" stroke-width="2">
    <circle cx="50" cy="50" r="40"/>
    <rect x="100" y="20" width="50" height="50"/>
</g>

11. <defs>

Opis: Definiuje zasoby (np. gradienty, symbole) do późniejszego użycia.

Przykład:

<defs>
    <linearGradient id="gradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
    </linearGradient>
</defs>
<rect x="10" y="10" width="100" height="100" fill="url(#gradient1)"/>

12. <use>

Opis: Powiela element zdefiniowany w <defs>. Przykład:

<defs>
    <circle id="myCircle" cx="30" cy="30" r="20" fill="red"/>
</defs>
<use href="#myCircle" x="50" y="50"/>

13. <symbol>

Opis: Definiuje symbole do wielokrotnego użytku.

Przykład:

<symbol id="star" viewBox="0 0 100 100">
    <polygon points="50,10 61,40 90,40 66,60 75,90 50,70 25,90 34,60 10,40 39,40"/>
</symbol>
<use href="#star" x="50" y="50" width="50" height="50"/>

14. <clipPath>

Opis: Tworzy maskę przycinającą dla elementów SVG.

Przykład:

<clipPath id="clip1">
    <circle cx="50" cy="50" r="30"/>
</clipPath>
<rect x="10" y="10" width="100" height="100" fill="blue" clip-path="url(#clip1)"/>

15. <mask>

Opis: Definiuje maskowanie elementów.

Przykład:

<mask id="mask1">
    <rect width="100" height="100" fill="white"/>
    <circle cx="50" cy="50" r="30" fill="black"/>
</mask>
<rect x="10" y="10" width="100" height="100" fill="red" mask="url(#mask1)"/>

To są podstawowe elementy SVG. Można je łączyć, animować i stylizować za pomocą CSS lub JavaScript.

Przykłady grafik SVG

Zalety SVG w porównaniu z PNG i WEBP

Zalety SVG:

• Skalowalność – nie traci jakości przy zmianie rozmiaru.
• Edytowalność – można łatwo modyfikować za pomocą CSS i JavaScript.
• Lekka waga – dla prostych grafik, pliki SVG są często mniejsze niż PNG czy WEBP.
• Interaktywność – obsługuje animacje i dynamiczne zmiany.
• Lepsza czytelność na ekranach wysokiej rozdzielczości (Retina, 4K).

Wady SVG:

• Nie nadaje się do zdjęć – nie przechowuje informacji o pikselach jak PNG czy WEBP.
• Złożoność dla skomplikowanych grafik – duże pliki SVG mogą być trudne do zarządzania.
• Kompatybilność – starsze przeglądarki mogą nie obsługiwać wszystkich funkcji SVG.

Kiedy używać SVG zamiast PNG lub WEBP?

• Dla ikon, logo, prostych ilustracji i wykresów – SVG jest najlepszym wyborem.
• Dla zdjęć i fotorealistycznych grafik – lepszym rozwiązaniem będzie WEBP lub PNG.
• Gdy zależy na animacjach i interaktywności – SVG oferuje większe możliwości niż statyczne formaty.

Podsumowanie

SVG to potężne narzędzie w nowoczesnym web designie. Dzięki swoim zaletom jest często używane do tworzenia ikon, ilustracji i animacji. Wybór między SVG, PNG i WEBP zależy od rodzaju grafiki oraz wymagań projektu.