svg – grafika wektorowa

• Domyślne wyświetlanie: display: inline
• Znacznik zamykający: wymagany
• Zawartość: elementy SVG (path, g, circle, title…)
• Gdzie może wystąpić: wszędzie, gdzie dozwolona jest treść frazowa
• Interfejs DOM: SVGSVGElement

Atrybuty

• viewBox – układ współrzędnych rysunku (0 0 24 24: początek oraz szerokość i wysokość); rysunek dopasowuje się wtedy do rozmiaru elementu.
• width, height – rozmiar na stronie (bez nich 300 × 150 px).
• fill, stroke – wypełnienie i kontur (także w CSS); currentColor przejmuje kolor tekstu.
• preserveAspectRatio – jak rysunek zostanie umieszczony, gdy proporcje nie pasują.
• xmlns jest potrzebny tylko w osobnym pliku .svg, a nie na stronie HTML.

Przykłady

Ikona w kolorze i rozmiarze tekstu – obok treści komunikatu:

<p class="notice">
  <svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true">
    <path fill="currentColor" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
  </svg>
  Zamówienia przyjmujemy do 18:00.
</p>

.notice {
  color: #1565c0;
  font-size: 18px;
}
.notice svg {
  vertical-align: -0.15em;
}

Samodzielna grafika z opisem dla czytników ekranu:

<svg viewBox="0 0 100 100" width="100" height="100" role="img" aria-labelledby="chart-title">
  <title id="chart-title">Sprzedaż chleba: 75% to chleb na zakwasie</title>
  <circle cx="50" cy="50" r="40" fill="none" stroke="#e0e0e0" stroke-width="16"/>
  <circle cx="50" cy="50" r="40" fill="none" stroke="#8bc34a" stroke-width="16" stroke-dasharray="188.5 251.3" transform="rotate(-90 50 50)"/>
</svg>

Dostępność

Dekoracyjna ikona obok tekstu dostaje aria-hidden="true", żeby czytnik ekranu ją pominął. Samodzielna grafika ze znaczeniem potrzebuje role="img" i nazwy – aria-label albo title jako pierwszego dziecka, na które wskazuje aria-labelledby.

Na co uważać

• Bez width i height element svg ma 300 × 150 px albo rozciąga się według CSS – ikona może wtedy zająć całą szerokość.
• SVG na stronie nie pobiera się osobno i nie da się go zapisać w pamięci podręcznej. Dużą grafikę występującą na wielu stronach lepiej umieścić w pliku .svg i wstawić przez img – wtedy jednak nie da się jej pokolorować w CSS.
• Nie wstawiaj na stronę kodu SVG od odwiedzających – może zawierać skrypty.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1.5, Safari 3. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
img – obraz
canvas – płótno do rysowania
picture – obraz w kilku wersjach
aria-* – atrybuty dostępności