Vektorska grafika
Updated: 2025-10-21
Published: 2025-10-21
Cilj ovih vježbi je bio kratki pregled sposobnosti SVG formata. SVG format je format za pohranu vektorske grafike. Bilo mi je malo teško prisiliti se odraditi ovu vježbu jer sam proveo dvije godine života buljeći u SVG i njegovu specifikaciju, proučavanje pathfindera i njegove implementacije, radu na komercijalnom editoru koji koristi taj stog za prikaz sučelja (poput figme), experimentiranju s generiranjem modela na osnovu teksta specifikacije (bez LLMa zbog resursa), raspravama o postojećim renderima, ...
Prvi dublji kontakt sa SVG formatom sam imao kada je ShaRose prestao ažurirati GuiAPI; imao sam (nerealistično velike) ambicije napisati rasterizer koji koristi SVG umjesto tekstura za dinamička grafička sučelja - nešto poput ksvg biblioteke od KDE projekta.
Iako sam manje zainteresiran za SVG ovih dana, dobro san upoznat s njim jer je bitan za web razvoj (time i financijske sigurnosti), a ujedno je i jedini otvoreni format za pohranu vektorske grafike što je bitno za stiliziranje skalabilnih grafičkih sučelja.
U ovim vježbama me iznenadila uporaba CDATA za CSS jer nije potrebnoa u preglednicima koji koriste poseban parser za <style>, ali je za .svg datoteke. SVG specifikacija je toliko komplicirana da ju jedino preglednici podržavaju (ni oni u potpunosti). Zbog toga se "u divljini" vrlo rijetko viđa CSS koji uključuje znakove poput < ili & u samim style blokovima, jer takav kod zbuni gotovo sve alate/programe (neovisno o CDATA).
Podrška SVG formata nije nikad potpuna i zahtjeva kompromise, što je ujedno i razlog zašto koristim ovaj format rijeđe nego što bih volio. Na primjer:
- skriptiranje i interaktivnost su rijetko podržani,
- Safari ima katastrofalno spor renderer za SVG što ograničava uporabu vrlo interaktivnih prikaza u komercijalnim primjenama.
- editori ne dozvoljavaju uređivanje značajki pristupačnosti ili je podrška vrlo ograničena,
- foreignObject sam vidio da se koristi samo sa HTMLom, i to rijetko,
- metadata se iznimno rijetko koristi za očuvanje izvornih podataka koji su stvorili SVG. To su lakši problemi...
U teže probleme spada kompozicija efekata poput blura koja je točna ili točan prikaz stiliziranih krivulja blizu stvarnog vremena (dash array). Tu sam naveo samo probleme s kojima sam se osobno susreo, vjerujem da postoji još mnogo drugih.
Kroz ovu vježbu nisam naučio ništa novo, no dobro je napisana. Trebao sam otvoriti MDN za stvari poput efekata jer ih nikad manualno ne pišem nego koristim Inkscape.
Moje konačno rješenje izgleda ovako:
Popratne datoteke je moguće preuzeti ovdje.