SVG to więcej niż ikonka na stronie. viewBox, optymalizacja SVGO, operacje Boolean, fonty ikon, sprite'y SVG, generowanie programowe — praktyczny przewodnik dla grafików i programistów.
SVG to więcej niż ikonka na stronie
Większość programistów frontendowych kojarzy SVG z ikonami i prostymi ilustracjami. Tymczasem SVG to pełnoprawny format grafiki wektorowej oparty na XML, który można stylować w CSS, manipulować w JavaScript, optymalizować narzędziami CLI i używać jako bazę do generowania fontów ikon, dynamicznych wykresów czy animacji. W tym artykule zebrałem rzeczy, które nie są oczywiste na pierwszy rzut oka — a które przydają się zarówno grafikom, jak i programistom frontend.
Trzy sposoby osadzania — i każdy zachowuje się inaczej
SVG można umieścić na stronie na kilka sposobów, a wybór wpływa na to, co możemy z nim zrobić:
<img src="icon.svg">— najprostsze, ale SVG jest traktowany jak obraz rastrowy. Nie da się go stylować z zewnętrznego CSS ani manipulować JavaScriptem. Za to jest bezpieczny (przeglądarka blokuje skrypty wewnątrz SVG załadowanego przez img).- Inline SVG (
<svg>...</svg>bezpośrednio w HTML) — pełna kontrola: CSS, JavaScript, animacje, aria-label. Wada: zwiększa rozmiar HTML i nie jest cache'owalny osobno. <object>lub<iframe>— SVG ładowany jako osobny dokument. Można go stylować wewnętrznie, ale komunikacja z zewnętrznym CSS jest ograniczona. Rzadko stosowane w nowoczesnych projektach.
W praktyce najczęściej używamy inline SVG dla ikon, które muszą reagować na motyw kolorystyczny (np. zmiana koloru przy prefers-color-scheme: dark), i <img> dla ilustracji, gdzie cache przeglądarki jest ważniejszy niż stylowalność.
viewBox — atrybut, który decyduje o wszystkim
Atrybut viewBox definiuje wirtualny układ współrzędnych SVG — prostokąt, w którym „żyje" grafika. Format: viewBox="minX minY width height". Jeśli go brakuje, SVG nie skaluje się proporcjonalnie i może wyglądać inaczej na różnych ekranach.
Typowy błąd: grafik eksportuje SVG z Figmy lub Illustratora ze stałymi atrybutami width i height, ale bez viewBox. Plik wyświetla się poprawnie w edytorze, ale na stronie — gdzie kontener ma inny rozmiar — grafika jest ucięta lub rozciągnięta.
Rozwiązanie: zawsze eksportuj z viewBox. Jeśli chcesz, żeby SVG wypełniał kontener responsywnie, ustaw width="100%" i height="auto" (lub w CSS), a viewBox zachowa proporcje.
Zamień tekst i kontury na krzywe — ale nie zawsze
Element <text> w SVG renderuje się za pomocą czcionki zainstalowanej na urządzeniu użytkownika. Jeśli czcionka nie jest dostępna, przeglądarka użyje fallbacku — a grafika będzie wyglądać inaczej niż w projekcie. Dlatego w eksportowanych ikonach i logo tekst zamienia się na krzywe (ścieżki <path>).
Ale uwaga — nie zawsze warto to robić:
- Ikony i logo → tak, zamieniaj na krzywe. Tekst w logo musi wyglądać identycznie wszędzie.
- Wykresy i infografiki z etykietami → nie. Tekst w
<text>jest indeksowalny przez wyszukiwarki, dostępny dla czytników ekranu i daje się kopiować. Po zamianie na krzywe te właściwości znikają. - Edytowalne szablony → nie. Jeśli SVG ma być edytowany później (np. zmiana tekstu w banerze), krzywe uniemożliwiają prostą edycję.
Podobna zasada dotyczy konturów (stroke): w ikonach warto skonwertować stroke do fill (Path → Outline Stroke w Illustratorze, Object → Stroke to Path w Inkscape), żeby uniknąć problemów ze skalowaniem grubości linii. Ale w dynamicznie generowanym SVG — zostawiamy stroke, bo łatwiej nim manipulować z poziomu CSS.
SVG gromadzi śmieci — optymalizacja jest obowiązkowa
Plik SVG wyeksportowany z Illustratora, Figmy czy Inkscape zawiera mnóstwo zbędnych danych: puste grupy <g>, niestandardowe atrybuty edytora (np. inkscape:label), zduplikowane definicje <defs>, nadmiarowe precyzje w współrzędnych (np. d="M 12.345678 67.891011" zamiast d="M12.35 67.89").
Dwa narzędzia, które rozwiązują problem:
- SVGO (github.com/svg/svgo) — narzędzie CLI do optymalizacji SVG. Usuwa zbędne elementy, skraca ścieżki, czyści atrybuty. Integruje się z Webpack (svgo-loader), Vite i pipeline'ami CI. W naszych projektach standardowo zmniejsza rozmiar SVG o 30–60%.
- SVG Cleaner (github.com/nickcernis/svgcleaner-gui) — aplikacja desktopowa z GUI. Mniej popularna niż SVGO, ale bywa agresywniejsza w optymalizacji ścieżek.
Po optymalizacji warto sprawdzić wizualnie, czy grafika nadal wygląda poprawnie — szczególnie jeśli SVG zawiera filtry, maski lub animacje, które SVGO mógł usunąć jako „nieużywane".
Białe „dziury" to nie wycinki — operacje Boolean
Częsty błąd w ikonach: zamiast wyciąć otwór w kształcie (np. dziurę w literze „O"), grafik nakłada biały element na wierzch. Na białym tle różnicy nie widać. Ale gdy SVG trafi na ciemne tło, gradient albo zdjęcie — biała plama staje się widoczna.
Rozwiązanie: w edytorze wektorowym użyj operacji Boolean — Path Difference (Inkscape) lub Minus Front (Illustrator) — żeby fizycznie wyciąć kształt. Wynikowa ścieżka będzie miała prawdziwy otwór (fill-rule: evenodd), nie nałożoną białą łatę.
SVG jako baza do fontów ikon
Zestawy takie jak FontAwesome, Material Icons czy Feather Icons bazują na plikach SVG, które są konwertowane do fontów (WOFF2, TTF). Każda ikona staje się glifem, dostępnym przez klasę CSS. Narzędzia do tworzenia własnych fontów ikon z SVG:
- IcoMoon (icomoon.io) — generator online. Wgrywasz swoje SVG, wybierasz ikony, pobierasz font z klasami CSS.
- Fontastic (fontastic.me) — podobne narzędzie, z możliwością edycji ikon w przeglądarce.
- svg-sprite — narzędzie CLI do generowania sprite'ów SVG (alternatywa dla fontów ikon, która zachowuje zalety SVG: kolory, dostępność, brak problemów z antyaliasingiem).
Trend w ostatnich latach przesuwa się od fontów ikon w stronę inline SVG i sprite'ów SVG. Font ikon ma problemy z antyaliasingiem, nie pozwala na wielokolorowe ikony i wymaga ładowania całego zestawu, nawet jeśli używasz trzech ikon. SVG sprite (<symbol> + <use>) rozwiązuje te problemy.
SVG to XML — można go generować programowo
Ponieważ SVG to XML, można go tworzyć i modyfikować z poziomu kodu — dowolnego języka, który potrafi generować tekst. Zastosowania:
- Dynamiczne wykresy — generowanie SVG z danych JSON po stronie serwera (PHP, Node.js, Python). Wynik to gotowy plik SVG, który nie wymaga JavaScript po stronie klienta.
- Generowanie identyfikacji wizualnej — automatyczne tworzenie wariantów logo (kolor, monochromatyczny, negatyw) z jednego szablonu SVG.
- Mapy i schematy — generowanie planów pomieszczeń, map regionów, diagramów procesów z danych strukturalnych.
Porównanie SVG z Canvas do wizualizacji danych opisaliśmy szczegółowo w artykule Canvas czy SVG — o wykresach słów kilka.
Inkscape SVG ≠ Plain SVG
Inkscape — darmowy edytor wektorowy — domyślnie zapisuje pliki jako „Inkscape SVG", który zawiera niestandardowe przestrzenie nazw (inkscape:, sodipodi:), metadane edytora i rozszerzenia, których przeglądarki nie interpretują. Plik działa, ale jest cięższy i może powodować problemy przy importie do innych narzędzi.
Zawsze eksportuj jako Plain SVG (Plik → Zapisz jako → Plain SVG), jeśli plik ma trafić na stronę. A potem przepuść przez SVGO.
Checklist — SVG gotowy na produkcję
- viewBox ustawiony,
width/heightusunięte lub ustawione na100%. - Tekst zamieniony na krzywe (w ikonach i logo) lub pozostawiony w
<text>(w wykresach i infografikach). - Kontury skonwertowane do fill tam, gdzie to ikona do osadzenia.
- Operacje Boolean zamiast białych nakładek.
- SVGO uruchomiony — sprawdzony wynik wizualnie.
- Plain SVG (nie Inkscape SVG, nie AI SVG).
- Dostępność —
<title>irole="img"dla dekoracyjnych;aria-labeldla interaktywnych.
SVG to format, który łączy świat grafiki i programowania. Dobrze przygotowany plik SVG waży kilkaset bajtów, skaluje się bez utraty jakości, jest dostępny dla czytników ekranu i indeksowalny przez wyszukiwarki. Jeśli budujesz system dedykowany z warstwą graficzną — ikony, schematy, wykresy — warto zadbać o SVG od samego początku. Porozmawiajmy o tym.
Źródła
- MDN Web Docs — SVG — pełna dokumentacja formatu SVG i jego obsługi w przeglądarkach.
- MDN Web Docs — viewBox — dokumentacja atrybutu viewBox i zasad skalowania SVG.
- SVGO — narzędzie do optymalizacji plików SVG (GitHub).
- CSS-Tricks — SVG symbol, a Good Choice for Icons — technika sprite'ów SVG z <symbol> i <use>.
- W3C — SVG 2 Specification — aktualna specyfikacja formatu SVG.
LinkedIn/desi9n-pl 
FB/desi9npl 
@desi9n.pl