Modele coraz lepiej radzą sobie z obrazem — niektóre narzędzia robią zrzuty ekranu, kiedy nie potrafią rozpoznać elementu inaczej. Ale między rozpoznaniem a odczytaniem jest różnica, o której warto wiedzieć, budując strony.
Zrobiliśmy taki eksperyment. Strona, na niej grafika z konkretną informacją — ceną, terminem, liczbą. Obok, w tekście, ta sama informacja podana inaczej. Agent AI dostał zadanie: powiedz, ile to kosztuje.
Przeczytał tekst. Grafiki nie tknął.
Nie dlatego, że nie umiał. Modele wizyjne działają i są coraz tańsze — dziś część narzędzi agentowych sięga po zrzut ekranu wtedy, gdy nie potrafi ustalić czegoś ze struktury dokumentu. Ale przetworzenie obrazu wciąż kosztuje wielokrotnie więcej niż przeczytanie akapitu, a wynik jest mniej pewny. Model, mając wybór, wybiera tańszą i pewniejszą drogę — tak samo jak człowiek, który przy dwóch źródłach tej samej informacji sięga po to, które da się przeczytać w sekundę.
Wniosek dla każdego, kto buduje strony, jest umiarkowanie niewygodny: to, co umieściłeś wyłącznie na obrazku, jest dla maszyny dostępne warunkowo. Może zostać odczytane, jeśli odbiorca uruchomi model wizyjny, jeśli mu się to opłaci i jeśli rozpozna poprawnie. Trzy „jeśli" tam, gdzie przy tekście nie ma żadnego.
Jest jednak format graficzny, przy którym te „jeśli" znikają.
SVG to nie obrazek. To dokument
Różnica jest fundamentalna i przez większość ludzi pracujących ze stronami niezauważana, bo w przeglądarce oba wyglądają tak samo.
JPEG, PNG i WebP to siatki pikseli. Żeby dowiedzieć się, co przedstawiają, trzeba je zinterpretować — uruchomić model wizyjny, przetworzyć obraz, wyciągnąć wniosek. To działa i działa coraz lepiej, ale ma trzy właściwości, których nie da się usunąć: kosztuje, bywa pomijane przy prostszych klientach i daje wynik z niepewnością. Napis „od 2 400 zł" może zostać odczytany jako „od 2 400 zł" albo jako „od 2 40O zł", zależnie od kroju, tła i rozdzielczości.
SVG jest tekstem. Otwierasz plik i widzisz elementy, współrzędne, kolory, opisy i — co najważniejsze — prawdziwy tekst tam, gdzie na grafice widać napis. Nie trzeba tego interpretować. Wystarczy odczytać, tak samo jak odczytuje się akapit.
To jest cała różnica: raster wymaga wnioskowania o treści, SVG wymaga jej przeczytania. Pierwsze może się nie udać. Drugie albo działa, albo pliku nie ma.
I jest jeszcze jedna właściwość, rzadka wśród formatów graficznych: model może taki dokument nie tylko przeczytać, ale też zmienić i wygenerować od nowa. Poproszony o wykres z innymi danymi, nie generuje obrazu — pisze nowy dokument. Trudno o drugi format graficzny w codziennym użyciu na stronach, w którym maszyna jest jednocześnie odbiorcą i autorem.
Cztery rzeczy, które to zmienia w praktyce
Napis na grafice staje się treścią. Etykieta na schemacie, podpis pod wykresem, nazwa na diagramie — w SVG to są węzły tekstowe. Da się je wyszukać, zaznaczyć, skopiować i przeczytać bez oglądania. W PNG to są piksele w kształcie liter.
Struktura niesie znaczenie. Elementy mają identyfikatory i klasy, można je grupować i opisywać. Diagram procesu przestaje być obrazkiem procesu, a staje się jego zapisem — z podziałem na etapy, które da się odczytać po nazwie.
Warstwa dostępności obsługuje oba typy odbiorców naraz. Atrybuty role, title i desc, które dodaje się dla czytników ekranowych, są dokładnie tym samym, co daje maszynie kontekst. Jedna praca, dwie korzyści — rzadki układ.
Rozmiar nie rośnie z rozdzielczością. Ikona w SVG waży tyle samo na telefonie i na monitorze czterokrotnej rozdzielczości. Nie potrzeba wariantów, nie potrzeba przełączania, nie ma rozmycia.
Druga strona medalu, o której trzeba wiedzieć
Skoro SVG jest dokumentem, który przeglądarka wykonuje, to znaczy dokładnie to, co się wydaje: może zawierać kod.
Osadzony skrypt, odwołanie do zewnętrznego zasobu, zdarzenie uruchamiane przy załadowaniu. Plik, który wygląda jak ikona, może być wektorem ataku — i jest to jeden z częstszych sposobów na przemycenie kodu do serwisu, który przyjmuje pliki od użytkowników.
To nie jest powód, żeby SVG unikać. To jest powód, żeby wiedzieć, co się z nim robi: sanityzować wszystko, co pochodzi z zewnątrz, i rozumieć, które elementy są bezpieczne, a które nie.
Ta sama właściwość, która czyni SVG czytelnym dla maszyny, czyni go wykonywalnym. Jedno nie istnieje bez drugiego.
Dlatego zrobiliśmy z tego kurs
Większość materiałów o SVG uczy jednej z dwóch rzeczy: albo obsługi programu graficznego, albo kopiowania gotowych ikon. Żadna z nich nie odpowiada na pytanie, co siedzi w pliku i dlaczego akurat tak.
Kurs SVG na ifox.pl idzie odwrotną drogą — od środka. Dwadzieścia lekcji w czterech blokach, dostępnych bez opłat i bez zakładania konta:
Anatomia (lekcje 1–5) — układ współrzędnych i viewBox, sześć podstawowych kształtów, a potem path rozłożony na trzy części: linie, krzywe Béziera i łuki. To jest moment, w którym d="M96 220 C190 64..." przestaje być magią i zaczyna być zdaniem, które da się przeczytać.
Wygląd (6–11) — fill i stroke, stroke-dasharray, transformacje, gradienty, maski i clipPath, filtry. Dlaczego gradient jest osobnym obiektem, a nie kolorem, i dlaczego środek gwiazdy bywa dziurawy.
Życie (12–16) — trzy drogi animacji i kiedy której używać, efekt rysowania linii, sprite ikonowy przez defs, use i symbol, tekst po krzywej, SVG w relacji z CSS-em i trybem ciemnym.
Higiena (17–20) — optymalizacja, dostępność, bezpieczeństwo i na koniec lekcja o SVG w kontekście agentów AI.
Do tego jeden playground, wspólny dla wszystkich lekcji, z innym presetem za każdym razem. Zmieniasz parametr, widzisz konsekwencję. Bez instalowania czegokolwiek.
Dwie lekcje, które robią różnicę
Lekcja 19 — bezpieczeństwo. Sanityzacja i XSS w pliku, który wygląda jak obrazek. Pokazujemy własny kod jako przykład: playground kursu robi dokładnie to samo przy każdym renderze, bo musi.
Lekcja 20 — SVG a agenci AI. Format, który model potrafi nie tylko zobaczyć, ale przeczytać i napisać. Co z tego wynika dla dokumentacji, schematów, wykresów i wszystkiego, co zwykle wrzuca się na stronę jako obrazek.
To są dwie lekcje, których nie znajdziesz w typowym kursie o grafice wektorowej — bo typowy kurs kończy się na eksporcie z programu graficznego.
Dla kogo to jest
Dla osób budujących strony, które chcą przestać traktować SVG jak czarną skrzynkę wypluwaną przez eksporter.
Dla projektantów, którzy oddają pliki deweloperom i chcą wiedzieć, co w tych plikach jest potrzebne, a co eksporter dopisał sam.
Dla wszystkich, którzy zajmują się widocznością w AI — bo grafika jest tą warstwą strony, o której mówi się najmniej, a przy której najłatwiej stracić informację bez zauważenia.
Nie trzeba umieć rysować. Nie trzeba mieć Illustratora. Wystarczy przeglądarka.
Otwórz kurs SVG — bezpłatnie →
Dlaczego to jest za darmo
Bo uważamy, że ta wiedza powinna być dostępna — i dlatego, że najlepszym argumentem za tym, jak pracujemy, jest pokazanie, co wiemy.
Ale nie każdy chce przechodzić przez dwadzieścia lekcji, żeby poprawić grafiki na własnej stronie. I nie każdy powinien — to jest wiedza dla osób, które budują, a nie dla tych, które prowadzą firmę i chcą, żeby strona po prostu działała.
Dlatego w studiu nie sprzedajemy tego jako osobnej usługi. Czytelność dla agentów AI jest częścią każdego projektu, który u nas powstaje — tak samo jak dostępność, wydajność i poprawna struktura dokumentu. Nie w formie dopłaty i nie jako opcja do wyboru, tylko jako standard wykonania.
Grafika jest w tym jedną z warstw. Pozostałe to struktura dokumentu, dane strukturalne, dane produktowe i to, co widać w kodzie strony bez uruchamiania skryptów. Każdą z nich sprawdzamy przy budowie i przy przebudowie, bo poprawienie tego później kosztuje więcej niż zrobienie od razu.
Często zadawane pytania
Ile kosztuje kurs? Nic. Wszystkie dwadzieścia lekcji i playground są dostępne bez opłat, bez konta i bez zapisu na listę.
Czy muszę umieć programować? Nie. Kurs zaczyna się od układu współrzędnych, czyli od najprostszej rzeczy, jaka w SVG istnieje. Pomaga ogólna znajomość HTML-a, ale nie jest wymagana.
Czy to kurs o rysowaniu ikon? Nie. To kurs o tym, jak zbudowany jest plik SVG i co można z nim zrobić poza obejrzeniem. Rysowanie jest skutkiem ubocznym zrozumienia formatu.
Czym SVG różni się od PNG dla wyszukiwarek i modeli AI? PNG jest siatką pikseli — żeby ustalić, co przedstawia, odbiorca musi go zinterpretować modelem wizyjnym. To działa, ale kosztuje i daje wynik z pewnym marginesem błędu. SVG jest dokumentem tekstowym: napisy w nim są prawdziwym tekstem, a struktura da się odczytać wprost, bez wnioskowania.
Czy SVG jest bezpieczny? Sam format tak, ale plik z niezaufanego źródła może zawierać kod wykonywany przez przeglądarkę. Dlatego wszystko, co przyjmujesz od użytkowników, trzeba sanityzować. Poświęcamy temu osobną lekcję.
Czy potrzebuję jakiegoś programu? Nie. Playground działa w przeglądarce i nie wymaga instalacji ani konta.
Czy SVG nadaje się do zdjęć? Nie. To format wektorowy — świetny do ikon, logotypów, schematów, wykresów i ilustracji o wyraźnych kształtach. Zdjęcia zostają w formatach rastrowych.