Kaj morate vedeti o SVG?

SVG ponuja ogromno možnosti, kar je lahko sprva kar obremenjujoče. To še posebej velja, če ste šele na začetku svoje poti z SVG formatom. Kje začeti, da se ne izgubite v “zajčji luknji”?

Da ne odkrivamo tople vode se bomo naslonili na članek Josh-a W. Comeau »A Friendly Introduction to SVG«, kjer nam lepo razloži vse od osnovnih oblik, kako delujejo, atribute, animacije, … Spodaj pa je moj povzetek vsega.

Kaj morate vedeti o SVG

SVG (Scalable Vector Graphics) je odprt standard za prikaz vektorske grafike na spletu, lahko ga uporabimo tudi za tisk. Omogoča pa, da slike ostanejo ostre in čiste pri katerikoli velikosti ali ločljivosti, kar ga naredi za nepogrešljivo orodje pri sodobnem spletnem oblikovanju (gledamo RWD).

Zakaj SVG?

SVG ni samo še en slikovni format – v resnici gre za kodo (XML), ki opisuje grafiko. To prinaša več pomembnih prednosti:

Neomejena povečava – brez izgube kvalitete na mobilnih, tablicah, 4K ali celo 8K zaslonih.
Majhne datoteke – pogosto precej lažje kot klasične slike (.jpg, .png).
Prilagodljivost – SVG je mogoče enostavno urejati, oblikovati z CSS ali animirati z JavaScript.
Dostopnost – ker gre za besedilno kodo, jo lahko preberejo tudi bralniki zaslona.

Osnovne oblike

Za začetek je pomembno spoznati osnovne gradnike SVG:

<circle> – krogi
<rect> – pravokotniki
<line> – črte
<polygon> – poligoni
<path> – poljubne oblike

Vsaka oblika ima lastne atribute (npr. cx, cy, r pri krogih), s katerimi jo nadzorujemo.

ViewBox in skalabilnost

Ena ključnih prednosti SVG je skalabilnost/povečava. Tu pride v igro atribut viewBox. viewBox določa koordinatni sistem in razmerje med grafiko in zaslonom. Če ga obvladate, lahko ustvarite prilagodljive SVG-je, ki izgledajo enako dobro na vseh zaslonih. Praktični nasvet: vedno nastavite viewBox – to je srce prilagodljivosti vektorske grafike.

Predstavitveni atributi

SVG omogoča uporabo predstavitvenih atributov, kot so fill, stroke, stroke-width, s katerimi lahko grafiko enostavno obarvate in oblikujete. Primer: <circle cx=”50″ cy=”50″ r=”40″ fill=”red” stroke=”black” stroke-width=”2″ />. Ta koda nariše rdeč krog s črnim robom.

Animacije in učinki

SVG ni statičen, lahko ga animiramo. To odpira kreativne možnosti – od animiranih ikon do interaktivnih diagramov.

Preproste animacije s pomočjo CSS (npr. spreminjanje barv).
Napredne animacije s stroke-dasharray in stroke-dashoffset, kjer ustvarimo občutek “risanja” črt.
Kombinacije z JavaScript za interaktivne učinke.

Zaključek

SVG je močno orodje, ki združuje oblikovanje, funkcionalnost in dostopnost. Začetnikom se morda zdi zapleten, a s pravimi osnovami hitro postane razumljiv: