Do tej pory w naszej serii — WebP, AVIF, JPEG XL, PNG — mówiliśmy o formatach rastrowych, czyli takich, które zapisują obraz jako siatkę pikseli. Każdy z nich rozwiązywał to samo pytanie inaczej: jak upakować te piksele w jak najmniejszy plik przy jak najlepszej jakości. SVG jest w tym towarzystwie odmieńcem, bo w ogóle nie zapisuje pikseli.
SVG, czyli Scalable Vector Graphics, nie przechowuje obrazu. Przechowuje instrukcje, jak go narysować: poprowadź linię stąd dotąd, wypełnij ten kształt tym kolorem, zatocz tu łuk. Przeglądarka czyta te instrukcje i rysuje obraz na żywo, za każdym razem od nowa, dokładnie w takiej rozdzielczości, jaka jest akurat potrzebna. To jedna, pozornie drobna różnica, która zmienia wszystko.
Skąd wziął się SVG
SVG powstał na przełomie wieków jako otwarty standard W3C, zaprojektowany od podstaw dla sieci i oparty na XML — czyli, upraszczając, na czytelnym tekście. Plik SVG można otworzyć w edytorze tekstu i po prostu przeczytać, co jest w środku: to nie jest zbitka bajtów, tylko opis. Przez lata rozwijała się jego kolejna wersja, SVG 2, ale w praktyce to sprawdzone SVG 1.1 jest tym, na czym stoi dziś web, i jest wspierane absolutnie wszędzie — w każdej współczesnej przeglądarce, bez wyjątków i bez fallbacku.
Do czego SVG jest stworzony (i do czego nie)
Cała siła SVG bierze się z tego, że jest wektorowy. Skoro obraz to instrukcje, a nie piksele, to skaluje się w nieskończoność bez utraty ostrości — to samo logo wygląda idealnie na ikonie w zakładce i na billboardzie, z jednego pliku. Na ekranach o wysokiej gęstości nie ma mowy o rozmyciu, bo nie ma czego rozmywać; rysunek powstaje w natywnej rozdzielczości urządzenia. Do tego pliki prostych grafik są maleńkie, można je wstawić wprost w kod strony, animować i stylować za pomocą CSS oraz JavaScriptu, zmieniać im kolor jednym wierszem, reagować na najechanie kursorem.
To czyni SVG bezkonkurencyjnym do wszystkiego, co się rysuje, a nie fotografuje: loga, ikony, ilustracje, wykresy, diagramy, elementy interfejsu. I dokładnie z tego samego powodu SVG kompletnie nie nadaje się do zdjęć. Fotografia to miliony nieregularnych pikseli, których nie da się sensownie opisać jako „narysuj kształt” — próba zapisania zdjęcia jako SVG dałaby plik potworny i bezużyteczny. Tu wracają formaty rastrowe z całej reszty serii.
SVG kontra formaty rastrowe
Dlatego SVG nie jest tak naprawdę konkurentem dla WebP, AVIF czy PNG — jest ich dopełnieniem. To nie jest pytanie „który format lepszy”, tylko „co mam do pokazania”. Jeśli to obraz o naturze geometrycznej, płaskiej, powtarzalnej — SVG wygrywa i nic innego się nie zbliża. Jeśli to obraz o naturze fotograficznej — SVG w ogóle nie startuje. SVG jest po prostu najczystszym przykładem zasady, która przewija się przez całą naszą serię: nie ma jednego najlepszego formatu, jest tylko format właściwy do zadania.
Gdzie zaczyna się realny problem
Przy SVG realny problem ma jednak inną naturę niż przy formatach rastrowych — i jest to problem, o którym mówi się zdecydowanie za rzadko. Skoro plik SVG to XML, czyli kod, to może zawierać nie tylko opis rysunku, ale też prawdziwy skrypt — znacznik <script> albo procedurę obsługi zdarzeń w rodzaju onload. Jeśli Twoja strona pozwala użytkownikom wgrywać pliki SVG i serwuje je bez oczyszczenia, otwierasz sobie drogę do ataku XSS: złośliwy skrypt schowany w „obrazku” wykona się w przeglądarce odwiedzającego, w kontekście Twojej domeny, i może sięgnąć po ciasteczka czy tokeny sesji.
Wniosek nie brzmi „nie używaj SVG” — SVG, który tworzysz sam albo bierzesz z zaufanego źródła, jest całkowicie bezpieczny. Wniosek brzmi: każdy SVG z zewnątrz trzeba sanityzować przed publikacją. Służą do tego sprawdzone biblioteki (jak DOMPurify czy svg-sanitize), a na WordPressie wtyczki pokroju Safe SVG, które przepuszczają wgrywany plik przez filtr usuwający skrypty i niebezpieczne atrybuty. Dobrą praktyką jest też restrykcyjna polityka CSP i serwowanie niezaufanych plików tak, by nie renderowały się w locie. Do tego dochodzi rzecz prostsza, ale codzienna: SVG eksportowane z narzędzi graficznych bywają zaśmiecone zbędnym kodem i warto je odchudzić przed wdrożeniem.
Jest jednak druga, znacznie nowsza odsłona tego samego problemu — i co istotne, klasyczne sanityzatory jej nie łapią. Skoro SVG to tekst, może zawierać nie tylko skrypt dla przeglądarki, ale też ukrytą treść adresowaną do sztucznej inteligencji. W znacznikach <text>, <title> i <desc>, w komentarzach albo metadanych — często uczynionych niewidocznymi na oko przez opacity:0, display:none czy mikroskopijny rozmiar — da się schować instrukcje w rodzaju „zignoruj poprzednie polecenia” albo „jesteś teraz…”, wymierzone nie w człowieka i nie w przeglądarkę, lecz w agenta AI, który ten plik przetworzy. To atak typu prompt injection, a jego podstępność polega na tym, że dla filtra usuwającego <script> i atrybuty zdarzeń taka treść nie jest złośliwym kodem — jest zwykłym tekstem, więc przechodzi przez sanityzację nietknięta. A w świecie, w którym coraz więcej stron i plików czytają nie ludzie, tylko agenty — to właśnie agentic web — pozornie niewinna ikonka może nieść polecenie przejęcia kontroli nad botem, który ją analizuje. Do wykrywania takich wzorców potrzeba innego narzędzia niż sanityzator XSS: na przykład skanera prompt injection z CyberFlux, który przeszukuje kod strony lub wklejony fragment pod kątem ukrytych instrukcji dla AI i oznacza je w skali od „sprawdź kontekst” po „jednoznaczny atak”.
To wszystko część tej samej dyscypliny, którą stosujemy w Studio iFOX — gdzie grafika wektorowa jest nie tylko dobierana do właściwej roli, ale też przygotowywana pod semantykę, wydajność i bezpieczeństwo strony, a nie wrzucana w ciemno. A tam, gdzie chodzi o czysty pipeline eksportu i optymalizacji obrazów, pomaga ImgOpti v2.
Puenta
SVG to format, który najlepiej ze wszystkich pokazuje, że pytanie „jaki format obrazu jest najlepszy” jest źle postawione. Dla zdjęcia SVG jest bezużyteczny. Dla logo, ikony czy wykresu jest niedościgniony — nieskończenie skalowalny, lekki, edytowalny, żywy. Nie mierzy się z resztą serii na wagę pliku, bo gra w zupełnie innej dyscyplinie. I właśnie dlatego w dobrze zbudowanej stronie prawie zawsze pracuje obok formatów rastrowych, a nie zamiast nich — każdy robi to, w czym jest najlepszy.
