<svg>

Grafika wektorowa zapisana bezpośrednio w kodzie strony: ikony, logo, wykresy.

Wyświetlanie: inline
Znacznik zamykający: Wymagany
Dozwolona zawartość: Elementy SVG, na przykład <rect>, <circle>, <path>, <text>, <g>

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<svg width="260" height="120" viewBox="0 0 260 120" role="img" aria-labelledby="badge-title">
  <title id="badge-title">Odznaka za ukończenie kursu HTML</title>
  <rect x="4" y="4" width="252" height="112" rx="18" fill="#1e1b4b" stroke="#a78bfa" stroke-width="4" />
  <circle cx="60" cy="60" r="34" fill="#f97316" />
  <path d="M44 61 l11 11 l22 -24" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" />
  <text x="112" y="56" fill="#f5f3ff" font-size="20" font-family="system-ui, sans-serif">Kurs HTML</text>
  <text x="112" y="82" fill="#c4b5fd" font-size="15" font-family="system-ui, sans-serif">ukończony</text>
</svg>

Podgląd

Definicja i zastosowanie

Element <svg> pozwala wpisać grafikę wektorową prosto w HTML. W środku rysujesz kształtami SVG, takimi jak <rect> (prostokąt), <circle> (koło), <line> (linia), <path> (dowolny kształt) i <text> (tekst). Grafika wektorowa pozostaje ostra przy każdym powiększeniu i zwykle waży bardzo mało.

SVG to osobny język oparty na XML, z własnymi elementami i atrybutami. W przeciwieństwie do <canvas> każdy kształt pozostaje elementem w drzewie DOM, więc możesz go ostylować w CSS (fill, stroke), animować i obsłużyć kliknięcie jak zwykły element HTML.

Atrybut viewBox definiuje wewnętrzny układ współrzędnych, a width i height rozmiar na stronie. Dzięki temu ta sama ikona narysowana w siatce 24 na 24 może mieć na stronie 16 albo 64 piksele. Ikony, które mają przejmować kolor tekstu, rysuj z fill="currentColor".

Składnia

<svg width="…" height="…" viewBox="0 0 … …">
  …
</svg>

Atrybuty

width / height
długość, np. `24` albo `100%`
Rozmiar grafiki na stronie. Warto je podawać zawsze, bo bez nich rozmiar zależy od przeglądarki i kontenera, a grafika może niespodziewanie zająć całą szerokość strony.
viewBox
min-x min-y szerokość wysokość
Wewnętrzny układ współrzędnych, w którym rysujesz kształty. Przy viewBox="0 0 24 24" punkt (12, 12) to zawsze środek grafiki, niezależnie od tego, jak dużą ją wyświetlisz. W przykładzie ta sama gwiazdka ma trzy różne rozmiary.
fill / stroke
kolor, `none` albo `currentColor`
Kolor wypełnienia i obrysu kształtów. Ustawione na samym <svg> dziedziczą je wszystkie kształty w środku. Wartość currentColor bierze kolor tekstu otoczenia, więc ikona zmienia się razem z nim.
xmlns
http://www.w3.org/2000/svg
Przestrzeń nazw SVG. W kodzie HTML możesz ją pominąć, ale w osobnym pliku .svg jest obowiązkowa.

Atrybut	Wartości	Opis
width / height	długość, np. `24` albo `100%`	Rozmiar grafiki na stronie. Warto je podawać zawsze, bo bez nich rozmiar zależy od przeglądarki i kontenera, a grafika może niespodziewanie zająć całą szerokość strony.
viewBox	min-x min-y szerokość wysokość	Wewnętrzny układ współrzędnych, w którym rysujesz kształty. Przy `viewBox="0 0 24 24"` punkt (12, 12) to zawsze środek grafiki, niezależnie od tego, jak dużą ją wyświetlisz. W przykładzie ta sama gwiazdka ma trzy różne rozmiary.
fill / stroke	kolor, `none` albo `currentColor`	Kolor wypełnienia i obrysu kształtów. Ustawione na samym `<svg>` dziedziczą je wszystkie kształty w środku. Wartość `currentColor` bierze kolor tekstu otoczenia, więc ikona zmienia się razem z nim.
xmlns	http://www.w3.org/2000/svg	Przestrzeń nazw SVG. W kodzie HTML możesz ją pominąć, ale w osobnym pliku `.svg` jest obowiązkowa.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

viewBox

min-x min-y szerokość wysokość

Wewnętrzny układ współrzędnych, w którym rysujesz kształty. Przy viewBox="0 0 24 24" punkt (12, 12) to zawsze środek grafiki, niezależnie od tego, jak dużą ją wyświetlisz. W przykładzie ta sama gwiazdka ma trzy różne rozmiary.

HTML

<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
  <polygon points="12,2 14.9,8.6 22,9.3 16.6,14 18.2,21 12,17.3 5.8,21 7.4,14 2,9.3 9.1,8.6" fill="#facc15" />
</svg>
<svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true">
  <polygon points="12,2 14.9,8.6 22,9.3 16.6,14 18.2,21 12,17.3 5.8,21 7.4,14 2,9.3 9.1,8.6" fill="#facc15" />
</svg>
<svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">
  <polygon points="12,2 14.9,8.6 22,9.3 16.6,14 18.2,21 12,17.3 5.8,21 7.4,14 2,9.3 9.1,8.6" fill="#facc15" />
</svg>

Podgląd

fill / stroke

kolor, `none` albo `currentColor`

Kolor wypełnienia i obrysu kształtów. Ustawione na samym <svg> dziedziczą je wszystkie kształty w środku. Wartość currentColor bierze kolor tekstu otoczenia, więc ikona zmienia się razem z nim.

HTML

<style>
  .lesson-time { display: flex; align-items: center; gap: 6px; color: #38bdf8; }
</style>
<p class="lesson-time">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <circle cx="12" cy="12" r="9" />
    <path d="M12 7 v5 l3 3" />
  </svg>
  Czas lekcji: 12 minut
</p>

Podgląd

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Grafikę, która coś przekazuje, oznacz role="img" i nadaj jej nazwę elementem <title> lub atrybutem aria-label. Dekoracyjne ikony ukryj przed czytnikami ekranu przez aria-hidden="true".
Ikony rysuj z fill="currentColor" albo stroke="currentColor". Zmienią kolor razem z tekstem, także po najechaniu kursorem i w trybie ciemnym.
Pliki SVG z programów graficznych często zawierają zbędne dane. Przed wklejeniem do strony przepuść je przez optymalizator, na przykład SVGO.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs