Co to jest SVG? Przewodnik po formacie wektorowym

SVG to format obrazów złożony z instrukcji rysowania, a nie z pikseli. Gdy logo, ikona lub wykres są zapisane jako SVG, plik zawiera polecenia w rodzaju „narysuj krzywą od tego punktu do tamtego i wypełnij ją tym kolorem”. Dlatego SVG pozostaje ostry w każdym rozmiarze, często jest maleńki i można go otworzyć oraz edytować w edytorze tekstu. W tym artykule omawiamy miejsce SVG wśród norm W3C, budowę pliku, obsługę w przeglądarkach i programach, zagrożenia bezpieczeństwa oraz konwersję między SVG a PNG lub JPG.

Czym jest SVG?

SVG (Scalable Vector Graphics) to oparta na XML norma W3C do opisu dwuwymiarowej grafiki wektorowej. Rozszerzenie to .svg, a typ MIME image/svg+xml. Wariant skompresowany gzipem ma rozszerzenie .svgz.

Formaty rastrowe (JPG, PNG, WebP) przechowują obraz jako stałą siatkę pikseli; po powiększeniu piksele stają się widoczne. SVG opisuje kształty matematycznie, a przeglądarka lub program rysuje je na nowo w takiej rozdzielczości, jaką ma ekran. Przewodnik MDN po formatach obrazów nazywa SVG idealnym wyborem dla obrazów, które można przedstawić jako polecenia rysowania, zwłaszcza gdy rozmiar wyświetlania jest nieznany lub zmienny, i zaznacza, że do zdjęć zasadniczo się nie nadaje.

Historia: SVG 1.0, 1.1 i SVG 2

• 4 września 2001: SVG 1.0 opublikowano jako Rekomendację W3C.
• 14 stycznia 2003: SVG 1.1 stał się Rekomendacją. Wersja 1.1 podzieliła język na moduły, co ułatwiło definiowanie podzbiorów, takich jak profile mobilne.
• 16 sierpnia 2011: opublikowano SVG 1.1 Second Edition. To stabilna wersja, na której opierają się dziś przeglądarki.
• SVG 2: według historii publikacji W3C wersje robocze pojawiały się od 2012 roku, a pierwszy Candidate Recommendation Snapshot opublikowano 15 września 2016 roku. Najnowszy snapshot nosi datę 6 października 2026 roku; dokument wciąż jest na etapie Candidate Recommendation.

SVG 2 bazuje na 1.1 Second Edition i dąży do lepszej integracji z HTML i CSS. Niektóre zagadnienia, takie jak filtry, maskowanie i czcionki, przeniesiono do osobnych modułów CSS i FX. W praktyce przeglądarki implementują części SVG 2, więc nie zakładaj, że każda funkcja działa wszędzie.

Budowa pliku SVG

Prosty plik SVG wygląda tak:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Układ współrzędnych: viewBox, width i height

viewBox definiuje wewnętrzny układ współrzędnych rysunku (tutaj od 0 do 100). width i height określają, ile miejsca rysunek zajmuje na stronie. SVG z viewBoxem skaluje się proporcjonalnie do dowolnego rozmiaru nadanego w CSS. Pliki bez viewBoxa mogą zostać przycięte przy zmianie rozmiaru, co jest jednym z najczęstszych błędów w logo.

Podstawowe elementy

• Kształty: rect, circle, ellipse, line, polyline, polygon oraz path, którym można narysować wszystko.
• Tekst: text i tspan. Tekst pozostaje zaznaczalny i przeszukiwalny, ale jeśli na urządzeniu brakuje czcionki, używana jest zastępcza.
• Grupowanie i ponowne użycie: g, defs, symbol, use. Zestawy ikon często łączy się w jednym pliku jako elementy symbol.
• Malowanie: jednolite kolory, gradienty liniowe i radialne, wzory, ścieżki przycinania, maski i filtry (rozmycie, cień).
• Styl i animacja: CSS może nadawać SVG styl; animacje CSS i elementy animacji SMIL dodają ruch.
• Treść osadzona: image dla obrazów rastrowych, foreignObject dla HTML i script dla JavaScriptu.

Kolor, przezroczystość, warstwy i strony

Przezroczystość jest w SVG natywna: wszystko, co nie zostało narysowane, jest puste, a opacity i fill-opacity określają półprzezroczystość. Warstwy są reprezentowane przez grupy g; Inkscape i Illustrator zapisują w ten sposób swoje warstwy. Kolory są domyślnie w sRGB i nie ma ograniczenia głębi bitowej w zwykłym sensie, bo kolory zapisuje się jako liczby. SVG nie jest formatem dokumentów wielostronicowych; do rysunków wielostronicowych lepiej pasuje PDF.

Obsługa w przeglądarkach, systemach i programach

Według MDN Chrome, Edge, Firefox, Opera i Safari obsługują SVG. Możesz go używać przez <img>, jako CSS background-image, bezpośrednio w HTML albo przez <object> i <iframe>. Programy wektorowe, takie jak Inkscape, Adobe Illustrator, Affinity Designer i Figma, odczytują i zapisują SVG, a aktualne wersje Microsoft Office pozwalają wstawiać grafiki SVG.

Gdzie indziej obsługa jest słaba: wiele serwisów społecznościowych, programów pocztowych, komunikatorów i formularzy przesyłania odrzuca SVG albo nie pokazuje podglądu. Częściowo wynika to z zagrożenia bezpieczeństwa opisanego poniżej.

Bezpieczeństwo: traktuj SVG jak dokument

SVG to dokument XML i może zawierać element script, atrybuty zdarzeń (np. onload) i odwołania zewnętrzne. Strona MDN „SVG as an image” wyjaśnia, że gdy SVG jest używany przez <img> lub jako tło CSS, przeglądarki wyłączają JavaScript i nie wczytują zasobów zewnętrznych, takich jak obrazy czy arkusze stylów. Te ograniczenia nie obowiązują, gdy plik jest otwierany bezpośrednio albo osadzany przez <iframe>, <object> lub <embed>.

Praktyczna konsekwencja: jeśli strona pozwala użytkownikom przesyłać pliki SVG i serwuje je bezpośrednio z własnej domeny, skrypt osadzony w pliku może zostać wykonany w kontekście tej strony (stored XSS). Typowe zabezpieczenia:

• Przepuszczaj przesłane pliki SVG przez sanitizer, który usuwa script, atrybuty zdarzeń, foreignObject i linki zewnętrzne.
• Serwuj pliki użytkowników z osobnej domeny, ze ścisłą polityką Content-Security-Policy albo jako pliki do pobrania (Content-Disposition: attachment).
• Jeśli nie potrzebujesz wektora, konwertuj przesłane SVG do PNG na serwerze i publikuj tylko wersję rastrową.

Typowe zastosowania

• Logo i elementy marki: jeden plik pozostaje ostry od wizytówki po billboard.
• Ikony interfejsu: można je kolorować w CSS i nigdy nie są rozmyte na ekranach o wysokiej gęstości pikseli.
• Wykresy, mapy i diagramy: biblioteki takie jak D3.js rysują dane bezpośrednio w elementach SVG.
• Favikony: aktualne przeglądarki akceptują favikony SVG przez <link rel="icon" type="image/svg+xml">.
• Cięcie i druk: wycinarki laserowe, plotery tnące do folii i hafciarki pracują na ścieżkach wektorowych.

Zalety i wady

Typowe problemy i jak je rozwiązać

Strona lub aplikacja nie przyjmuje SVG

Najprostszym rozwiązaniem jest kopia w PNG. Nasz konwerter SVG do PNG renderuje rysunek do przezroczystego PNG w Twojej przeglądarce, w wybranej przez Ciebie szerokości w pikselach. Plik nie jest przesyłany i nigdy nie opuszcza Twojego urządzenia.

Tekst wyświetla się inną czcionką

SVG domyślnie nie osadza czcionek; jeśli system, na którym oglądasz plik, nie ma danej czcionki, używana jest zastępcza. W kontekście obrazu zewnętrzne czcionki też nie są wczytywane. Zamień tekst na krzywe w programie graficznym albo osadź czcionkę.

SVG ma zły rozmiar lub jest przycięty na stronie

Bez viewBox albo przy stałych width/height skalowanie nie działa zgodnie z oczekiwaniami. Dodaj do głównego elementu svg viewBox obejmujący rysunek i ustaw rozmiar w CSS.

Plik jest większy, niż się spodziewałem

Programy graficzne zapisują w SVG metadane edytora, nadmiar miejsc po przecinku i ukryte warstwy. Optymalizator taki jak SVGO je usuwa. Kompresja gzip lub Brotli na serwerze dodatkowo zmniejsza tekstowy SVG.

Potrzebuję logo z PNG jako SVG

Obrazu rastrowego nie da się naprawdę „przekonwertować” na wektor; narzędzia wykonują wektoryzację (tracing): wykrywają kształty i rysują je na nowo jako kontury. Nasze narzędzia PNG do SVG i JPG do SVG wektoryzują z użyciem od 2 do 8 kolorów. Wyniki są dobre w przypadku prostych logo i rysunków, a zgrubne w przypadku zdjęć. W tych narzędziach plik jest przesyłany na nasze serwery bezpiecznym połączeniem, tam wektoryzowany i usuwany najpóźniej w ciągu 30 minut.

Wskazówki dotyczące konwersji

• Znaj docelowy rozmiar: renderując SVG do PNG, wybierz największy rozmiar, w jakim obraz będzie wyświetlany, podwojony dla ekranów o wysokiej gęstości pikseli. W naszym narzędziu dłuższy bok może mieć do 4096 pikseli; jeśli zostawisz szerokość pustą, małe rysunki są skalowane tak, by dłuższy bok miał 1024 piksele.
• JPG do treści zdjęciowych: jeśli SVG zawiera zdjęcie, a nie potrzebujesz przezroczystości, JPG lub WebP będą mniejsze niż PNG; PNG możesz potem przekonwertować w konwerterze obrazów.
• Favikony: jeśli Twoje logo jest w SVG, generator favicon je przyjmie i doda do paczki plik icon.svg.
• Czyste źródło do wektoryzacji: tworząc SVG z PNG, zacznij od obrazu w wysokiej rozdzielczości, w jednolitych kolorach i bez szumu.

Najczęściej zadawane pytania

Czym różni się SVG od PNG?

PNG to stała liczba pikseli i po powiększeniu robi się rozmyty. SVG opisuje kształty i jest rysowany ostro w każdym rozmiarze. SVG pasuje do logo i ikon; PNG lub JPG do zdjęć i zrzutów ekranu.

Czy plik SVG może zawierać wirusa?

SVG nie jest programem wykonywalnym, ale może zawierać osadzony JavaScript. Skrypty nie działają, gdy SVG jest wyświetlany jako obraz (<img>), ale mogą działać, gdy plik zostanie otwarty bezpośrednio w przeglądarce. Pliki SVG z nieznanych źródeł oglądaj w przeglądarce obrazów albo przekonwertuj do PNG, zamiast otwierać je bezpośrednio.

Czy mogę wstawić SVG do Worda lub PowerPointa?

Aktualne wersje Microsoft Office obsługują wstawianie SVG. W przypadku starszych wersji albo gdy będziesz udostępniać plik innym programom, bezpieczniejsza jest kopia w PNG.

Czy konwersja SVG do PNG obniża jakość?

PNG jest bezstratny, ale rysunek zostaje utrwalony w określonym rozmiarze w pikselach. Wybierz wystarczająco dużą szerokość, a nie zauważysz żadnej straty; późniejsze powiększanie PNG go rozmyje.

Czy SVG obsługuje animację?

Tak. Ruch mogą zapewnić animacje CSS, elementy animacji SMIL i JavaScript. Konwersja do PNG daje jedną klatkę.

Źródła

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: historia publikacji SVG 2
• MDN: SVG as an image
• MDN: Image file type and format guide