U našem prethodni članak Vidjeli smo kako koristiti besplatni softver za uključivanje slika u WebP formatu. Sada ćemo vidjeti zašto kreirati SVG slike za web stranice.
Jedan od velikih izazova s kojima se web dizajneri suočavaju je broj uređaja s kojima se ljudi povezuju na mrežu. U onim slučajevima kada je slika samo ilustrativna, gubitak kvaliteta ne utiče mnogo. Ali, ako je važan za sadržaj kao što je infografika, žičani okvir ili snimak ekrana, morate osigurati da sadržaj izgleda potpuno isto u bilo kojoj veličini.
Kreirajte SVG slike za web stranice
Šta su grafike u SVG formatu
Da bismo razumjeli razliku između ove vrste grafike i onih koji se obično koriste na web stranicama, moramo objasniti dva koncepta; rastersku grafiku i vektorsku grafiku.
- Rasterska grafika: Ova vrsta grafike je izgrađena od piksela raspoređenih u mreži. Svakom pikselu je dodeljena određena boja. Kvalitet se zasniva na rezoluciji koja je određena brojem piksela po inču. Kako se veličina povećava, gustoća piksela se smanjuje, što utiče na kvalitet slike. To znači da su za predstavljanje složenih slika s mnogo detalja kao što je fotografija potrebne vrlo velike datoteke određene veličine.
- Vektorska grafika: Građeni su od geometrijskih objekata izraženih matematičkim formulama. Ovi objekti mogu biti linije, oblici i krive. Kako su izraženi u matematičkim formulama, njihova veličina se može mijenjati bez gubitka kvalitete i oštrine, što precizno predstavlja detalje.
Rasterska grafika je najprikladnija za vrlo složene slike kao što su fotografije ili koji uključuju meko sjenčanje boja i gradijente. Da bi ih uređivali, potreban im je specijalizirani softver za uređivanje fotografija kao što je Gimp.
Sa druge strane, Vektorska grafika je najbolja za ilustracije, ikone i logotipe. Iako postoje programi za uređivanje kao što je Inkscape, oni se takođe mogu kreirati i uređivati pisanjem teksta.
Grafika u SVG formatu (skalabilna vektorska grafika) Uglavnom se koriste na web stranicama i imaju ove karakteristike:
- Rezolucija na njih ne utiče: Grafika u SVG formatu izgleda jednako oštro na bilo kojoj veličini ekrana, uključujući i one koji koriste tehnologiju vrlo visoke rezolucije.
- Oni su vektorska grafika: Kao što smo već objasnili, ova vrsta grafike se zasniva na predstavljanju geometrijskih objekata izgrađenih iz matematičkih formula. Promjena veličine jednostavno primjenjuje formulu na nove vrijednosti.
- manja veličina: SVG format ne mora čuvati informacije za svaki piksel. Matematičke formule za njihovo konstruisanje pohranjene su u tekstualnoj datoteci u kompresovanom XML formatu.
- Izdanje: Kao i svaka vektorska grafika, SVG format se može mijenjati posebnim softverom ili uređivačem teksta.
- Interaktivnost: Ove vrste grafike mogu se animirati ili napraviti da odgovaraju na korisnička uputstva koristeći CSS ili Javascript kod.
- Kompatibilnost: Većina uređaja ima pretraživače koji podržavaju ovaj grafički format.
Rekli smo da se SVG grafika može kreirati pomoću uređivača teksta. Otvorite uređivač teksta vaše distribucije i zalijepite sljedeći kod:
<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>
Sada ga sačuvajte pod imenom circle.svg. Ako pogledate u upravitelju datoteka vidjet ćete sličicu zelenog kruga, a ako ga otvorite u pregledniku slika, vidjet ćete ga u punoj veličini.
Gde:
<svg width="200" height="200">
Postavite širinu i visinu na 200 piksela.
<rect width="100%" height="100%" fill="white" />
Utvrđuje da će pozadina biti bijeli kvadrat koji će zauzimati cijelu širinu i visinu slike.
<circle cx="50%" cy="50%" r="50" fill="green" />
Postavite krug u sredinu slike, dodelite mu radijus od 50 piksela i označite da će boja biti zelena.
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
Postavite riječ Ubunlog u tačan centar kruga.
U narednom članku ćemo vidjeti grafičke urednike za ovaj format.