Poznaj Programowanie

Tagi HTML: svg

Piotr Grochal 6 min. czytania

Tag <svg> to potężne narzędzie w arsenale każdego programisty webowego, umożliwiające tworzenie skalowalnej grafiki wektorowej bezpośrednio w HTML. W przeciwieństwie do formatów rastrowych (PNG, JPEG), SVG zachowuje krystaliczną ostrość na dowolnym rozmiarze ekranu, co czyni go idealnym do ikon, logo, infografik i animacji w projektach responsywnych.

Czym jest tag <svg> i dlaczego warto go używać?

SVG (Scalable Vector Graphics) to standard oparty na XML, definiujący grafikę za pomocą ścieżek, kształtów i matematyki, a nie pikseli. Tag <svg> działa jako kontener główny, określający wymiary, system współrzędnych i zawartość grafiki. Pozwala na precyzyjne skalowanie bez utraty jakości, co jest kluczowe w erze urządzeń o różnych rozdzielczościach – od smartfonów po ekrany 4K.

Główne zalety:

  • Responsywność – użyj atrybutu viewBox do adaptacji do kontenera;
  • Lekkość – pliki SVG są małe, zwłaszcza inline;
  • Interaktywność – łatwa manipulacja CSS i JavaScript;
  • Dostępność – wsparcie dla <title>, <desc> i ARIA.

Wady? Starsze przeglądarki (np. IE8 i starsze) wymagają polyfilli. W 2026 roku to marginalny problem.

Podstawowa składnia i wstawianie SVG do HTML

SVG wstawisz na trzy główne sposoby: inline (bezpośrednio w HTML), jako plik zewnętrzny przez <img> lub <embed>, albo w CSS jako background-image.

Aby szybko wybrać właściwą metodę, kieruj się tymi wskazówkami:

  • Inline – gdy potrzebujesz pełnej kontroli nad stylami i skryptami (selektory CSS, zdarzenia JS, animacje);
  • <img>/<embed> – gdy liczy się prostota i cache przeglądarki, a nie musisz stylować wewnętrznych elementów SVG;
  • CSS background-image – dla dekoracyjnych teł i gdy obraz nie jest częścią treści semantycznej.

1. Inline SVG – najbardziej elastyczny

Wklej kod bezpośrednio do <body>. Przykładowy prosty okrąg:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Podstawowy SVG</title>
</head>
<body>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#3498db" stroke="black" stroke-width="2" />
</svg>
</body>
</html>

Tutaj width i height definiują rozmiar, a viewBox system współrzędnych (od 0,0 do 100,100). Koło (<circle>) ma środek w (50,50) i promień 40.

2. Zewnętrzny plik SVG

Zapisz grafikę jako ikona.svg i wstaw:

<img src="ikona.svg" alt="Opis ikony" width="100" height="100">

Lub przez <embed> dla specyficznych przypadków:

<embed src="rect.svg" type="image/svg+xml" width="300" height="100">

Albo w przestrzeni nazw XML (rzadsze, w HTML5 niezalecane):

<html xmlns:svg="http://www.w3.org/2000/svg">
<svg:svg width="300" height="100" version="1.1">
<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg:svg>
</html>

<img> i <embed> ograniczają interaktywność CSS/JS wewnątrz SVG w porównaniu z osadzaniem inline.

3. SVG w CSS

Dla tła użyj właściwości background-image:

.logo {
background-image: url('logo.svg');
background-size: contain;
width: 200px;
height: 200px;
}

Podstawowe kształty i elementy SVG

Tag <svg> zawiera kształty jak <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>.

Przykładowy prostokąt z wypełnieniem i obramowaniem:

<svg width="200" height="100">
<rect width="200" height="100" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

Linie przerywane z stroke-dasharray:

<svg width="100" height="100" style="margin:auto; display:block">
<polyline points="0,25 100,25" style="stroke:black; fill:none; stroke-width:10px; stroke-linecap:butt; stroke-dasharray:10,10" />
<polyline points="0,50 100,50" style="stroke:black; fill:none; stroke-width:10px; stroke-linecap:butt; stroke-dasharray:10,10,20,10" />
</svg>

Tak skonfigurowane atrybuty pozwalają łatwo budować różnorodne wzory linii przerywanych.

Zaawansowane techniki – gradienty, symbole i ponowne użycie

Gradienty liniowe

Użyj <defs> do definicji, a następnie url(#id) w atrybucie fill:

<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#667eea" />
<stop offset="100%" stop-color="#764ba2" />
</linearGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#logo-gradient)" />
<text x="100" y="120" font-family="Arial, sans-serif" font-size="60" font-weight="bold" fill="white" text-anchor="middle">L</text>
</svg>

Płynne przejście od fioletu do purpury z tekstem.

Symbole i <use> – biblioteka ikon

Definiuj raz, używaj wielokrotnie (optymalizacja):

<!-- Definicje ukryte -->
<svg style="display: none;">
<defs>
<symbol id="icon-heart" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</symbol>
<!-- Inne symbole... -->
</defs>
</svg>

<!-- Użycie -->
<svg width="24" height="24" fill="#e74c3c"><use href="#icon-heart" /></svg>

Symbole i element <use> redukują powtarzalność kodu i poprawiają wydajność ładowania.

Animacje i interakcje z CSS oraz JavaScript

SVG błyszczy w animacjach. Przykładowa ikona hamburgera z efektem hover:

<svg width="40" height="40" viewBox="0 0 40 40" class="menu-icon">
<style>
.menu-icon line {
stroke: #333;
stroke-width: 3;
stroke-linecap: round;
transition: stroke 0.3s ease;
}
.menu-icon:hover line {
stroke: #3498db;
}
</style>
<line x1="8" y1="12" x2="32" y2="12" />
<line x1="8" y1="20" x2="32" y2="20" />
<line x1="8" y1="28" x2="32" y2="28" />
</svg>

Dla zaawansowanych: <animate> lub SMIL (choć w wielu projektach preferowane są CSS/JS).

Z JavaScript – manipuluj atrybutami:

document.querySelector('circle').setAttribute('fill', 'green');

Idealne do dashboardów, map i elementów interaktywnych.

Dostępność i SEO

Dodaj <title> i <desc> wewnątrz <svg> dla czytników ekranu:

<svg width="600" height="200">
<title>Gałki oczne</title>
<desc>Interaktywne demo SVG</desc>
<!-- zawartość -->
</svg>

Użyj atrybutów ARIA (np. role="img", aria-label="Opis") aby poprawić dostępność i indeksowanie.

Praktyczne zastosowania w web designie

  • Ikony i logo – skalowalne, lekkie (np. Airbnb używa do map);
  • Infografiki – edytowalne raporty;
  • Animowane slidery – e-commerce;
  • Dashboardy – dynamiczne wykresy z JS.

W praktyce, SVG zwiększa UX i bywa korzystne dla SEO dzięki czystej strukturze i niewielkim rozmiarom plików.