Jedyny format graficzny, który maszyna potrafi przeczytać i napisać
Przez dziewiętnaście lekcji wracało jedno zdanie: SVG to tekst. Widzieliśmy, co z niego wynika dla skalowania, dla animacji, dla wagi pliku i dla bezpieczeństwa.
Została ostatnia konsekwencja, najświeższa i najmniej opisana.
Model czyta i pisze SVG
Duży model językowy patrzący na plik PNG widzi obraz — musi go rozpoznać, zgadnąć, co przedstawia, i nie ma jak go zmienić poza wygenerowaniem nowego od zera.
Ten sam model patrzący na SVG widzi kod źródłowy. Wie, że jest tam okrąg o promieniu 40 wypełniony pomarańczowym. Potrafi go przesunąć, przemalować, dopisać drugi, poprawić literówkę w napisie i zwrócić poprawny plik.
Żaden inny format graficzny w webie tego nie umożliwia. JPG, PNG, WebP i AVIF są dla maszyny nieprzezroczystymi blokami pikseli. SVG jest dokumentem.
To nie jest ciekawostka. To zmienia sposób, w jaki warto przygotowywać grafikę do serwisu, jeśli zakładasz, że będą go czytać nie tylko ludzie.
Czytelny to nie znaczy zrozumiały
Tyle że sama możliwość odczytu nic jeszcze nie daje. Popatrz na to okiem maszyny:
html
<svg viewBox="0 0 240 150">
<path d="M35 73h40v42H35z"/>
<path d="M100 47h40v68h-40z"/>
<path d="M165 60h40v55h-40z"/>
</svg>To jest w pełni odczytywalne i kompletnie nic nie znaczy. Trzy prostokąty o różnej wysokości. Że to wykres sprzedaży kwartalnej — nie wynika stąd w żaden sposób.
Zoptymalizowany plik z lekcji siedemnastej wygląda właśnie tak. Sprzątanie usuwa balast, ale nie dokłada sensu.
Jak dołożyć sens
Narzędzia już znasz — pochodzą z lekcji o dostępności. To ta sama robota, która służy dwóm różnym odbiorcom naraz.
Ten wykres ma dwie warstwy. Trzy prostokąty dla oka i zdanie w
<desc>dla wszystkiego, co czyta kod. Najedź na słupek — każdy ma własny<title>z wartością. Rusz suwakami, a obie warstwy zmienią się razem.
Pięć rzeczy, które zamieniają rysunek w dokument:
<title> i <desc> — nazwa i opis całości. Dla czytnika ekranu to dostępność, dla modelu to jedyna informacja o tym, czym jest ten obrazek.
<title> w środku elementów — pojedynczy słupek, wycinek koła czy punkt na mapie może mieć własną nazwę z wartością. To jednocześnie dymek dla użytkownika i dana dla maszyny.
Sensowne identyfikatory. id="slupek-q2" niesie informację, id="path16" nie niesie żadnej. Kosztuje tyle samo bajtów.
Tekst jako <text>, nie jako krzywe. Napis zamieniony na ścieżki jest nieczytelny zarówno dla czytnika ekranu, jak i dla modelu. To ta sama strata, o której była lekcja piętnasta, tylko z jeszcze jednym powodem.
Struktura przez <g>. Grupa <g id="legenda"> mówi, że te elementy należą do siebie. Płaska lista dwustu ścieżek nie mówi nic.
Nic z tego nie jest nowe. Nowe jest to, że te same znaczniki obsługują teraz drugiego odbiorcę — i że warto o nich pamiętać także wtedy, gdy dostępność nie jest głównym powodem.
Druga strona medalu
Skoro maszyna czyta zawartość pliku, to czyta całą zawartość. Także tę, której nie widać.
W poprzedniej lekcji był preset z instrukcją ukrytą w <desc>. To nie był teoretyczny wymysł — to znany wzorzec. Agent przeglądający stronę i streszczający jej zawartość napotyka tekst z <desc> tak samo jak akapit z artykułu, a nie ma naturalnego sposobu, żeby odróżnić „opis obrazka" od „polecenia dla ciebie".
Praktyczne wnioski są dwa i oba prozaiczne.
Jeśli publikujesz — pilnuj, co trafia do warstwy tekstowej Twoich grafik, zwłaszcza gdy pliki pochodzą od klientów albo z zewnętrznych bibliotek ikon.
Jeśli przetwarzasz cudze pliki — traktuj treść <desc> i <title> jak dane od nieznajomego, a nie jak instrukcję. Ta sama zasada, którą stosuje się do wszystkich danych wejściowych, tylko w miejscu, w którym mało kto się jej spodziewa.
Uczciwie o granicach
Nie ma dziś standardu opisywania danych w SVG. Nie istnieje odpowiednik schema.org dla grafiki wektorowej ani ustalony sposób zapisania „to jest wykres, oto jego serie".
To, co mamy, to <title>, <desc>, atrybuty ARIA i własne, uczciwie nazwane identyfikatory. Niewiele — ale nieporównanie więcej niż przy jakimkolwiek formacie rastrowym, gdzie nie ma nic.
Warto też nie przesadzać. Ikona strzałki nie potrzebuje opisu danych. Sens dokłada się tam, gdzie grafika niesie informację: wykresy, diagramy, mapy, schematy. W pozostałych przypadkach wystarczy nazwa albo oznaczenie jako dekoracja.
Koniec kursu
Doszedłeś do końca dwudziestu lekcji. Umiesz teraz:
- czytać dowolny plik SVG i rozumieć, co robi każda linijka,
- narysować dowolny kształt ścieżką i wiedzieć, kiedy jej nie potrzebujesz,
- sterować wyglądem, animować i optymalizować,
- osadzić grafikę na stronie w sposób, który nie zaskoczy,
- przygotować ją tak, żeby była dostępna, bezpieczna i czytelna.
Playground zostaje. Wszystkie presety z kursu są w nim dostępne w jednym oknie — możesz wracać do dowolnej lekcji, przerabiać kod i sprawdzać pomysły.
A jeśli wątek z tej ostatniej lekcji Cię zainteresował — o tym, jak przygotowywać treści dla odbiorców, którzy nie są ludźmi, piszemy szerzej na webflux.pl.
Podsumowanie
- SVG jest jedynym formatem graficznym, który model potrafi przeczytać i napisać, bo jest tekstem.
- Odczytywalność to nie to samo co zrozumiałość — anonimowe ścieżki nie niosą sensu.
- Sens dokładają
<title>,<desc>, identyfikatory, prawdziwy<text>i struktura grup. - Te same znaczniki obsługują dostępność i czytelność maszynową.
- Maszyna czyta też to, czego nie widać — treść
<desc>z cudzych plików traktuj jak dane, nie polecenia. - Nie ma standardu opisu danych w SVG; ARIA i uczciwe nazewnictwo to wszystko, czym dysponujemy.
- Sens dokładaj tam, gdzie grafika niesie informację. Strzałka go nie potrzebuje.
Do wypróbowania na koniec: skopiuj kod z presetu wykres czytelny, usuń z niego <title>, <desc> i wszystkie identyfikatory, po czym pokaż oba warianty dowolnemu modelowi językowemu i poproś o opis. Różnica w odpowiedziach jest tą lekcją w jednym zdaniu.