Prilikom izrade web stranice web dizajner mora uzeti u obzir četiri glavne tačke razmišljajući o izgledu i vizualnom dizajnu weba, tekst, slike, boje i fontovi zaposlenih.
Od ove četiri tačke, ona kojoj ćemo dati najveći značaj u ovom postu su slike, o kojima ćemo govoriti kako kreirati svg fajlove jer je veoma važno voditi računa o kvalitetu slika sa kojima radite.
Tretmani sa SVG fajlovima, povećava se od strane profesionalaca a ne toliko profesionalci u svijetu dizajna.
Šta je SVG datoteka?
SVG je skraćenica na engleskom za Scalabe Vector Graphics, na španskom, Scalable Vector Graphics. Radi se o a otvorenog i slobodnog formata sa kojim se kreiraju 2D grafike, dvije dimenzije.
Za razliku od drugih formata slika, kao što su JPG ili PNG, SVG je skalabilan format, bez obzira koliko želite povećati njegovu veličinu, jer će se zadržati kvalitet slike. To je jedan od najčešće korištenih formata na web stranicama za postavljanje grafike ili vektorskih slika.
Zašto bismo trebali koristiti SVG?
S ovom vrstom formata, vektorske slike će zadržati visoku kvalitetu, bez obzira na njihovu veličinu i rezoluciju. Naprotiv, slike sastavljene od bitmapa, sastavljene od piksela, gube kvalitet ako im se promijeni veličina. SVG format je definisan svojom lakoćom i svestranošću.
Još jedna stvar koja ide u prilog korištenju ovog formata je njegova mala veličina, odnosno zahvaljujući tome povećava brzinu učitavanja stranica na kojima se nalaze. Ove slike kreira pretraživač, što pomaže da se smanji opterećenje i potrošnja na serveru.
Osim toga, mogu kreirajte animirane SVG slike čime da našoj web stranici damo atmosferu bliskosti i privučemo pažnju gledalaca koji je posjećuju.
SVG je otvoreni format, tj. može biti podvrgnuto poboljšanjima i ažuriranjima. Osim toga, SVG datoteke se mogu uređivati pomoću programa za vektorsko uređivanje, na primjer Adobe Illustartor bez gubitka kvalitete prikaza, može se gledati na bilo kojem uređaju. Takođe nam omogućava da ga štampamo bez gubitka kvaliteta.
Kako jednostavno kreirati SVG fajlove
Možda je najlakši način za kreiranje SVG datoteka, ako ste upoznati s njima, kroz program za grafički dizajn, kao što su Illustrator, Corel Draw, između ostalih.
Fokusirajući se na program Illustrator, kada ćemo koristiti SVG format, moramo uzeti u obzir da li smo koristili gradijente ili druge efekte, kao što su umjetnički efekat, zamućenje, četkice, pikseli itd. pošto su rasterizovani kada su sačuvani u SVG formatu datoteke. Preporučljivo je koristiti efekte SVG filtera, za dodavanje efekata tako da se kasnije ne mogu rasterizirati.
Još jedan savjet koji vam dajemo je korištenje jednostavni simboli i putanje u ilustracijama za bolje performanse navedenog formata. Izbjegavajte korištenje četkica s puno tragova jer to stvara veće opterećenje podataka.
Da kreirate SVG datoteku u ovom programu, Prvo što moramo imati otvoreno je prazno platno na kojem ćemo raditi na našoj ideji.
Kada naš posao završi, ono što ćemo uraditi je otići na alatnu traku koja je prikazana iznad programa, a mi ćemo izabrati opciju datoteku, sačuvajte kao i pojavit će se iskačući ekran gdje će nam reći da damo ime našoj datoteci i označimo format u kojem želimo da ga sačuvamo. U ovom poslednjem odeljku moramo označiti SVG opciju.
Prilikom odabira tipa SVG, pojavljuje se dijaloški okvir koji nam pokazuje različite opcije koje moramo uzeti u obzir.
Kao opšte pravilo, u prvom polju koje se pojavljuje u tabeli, pojavljuje se SVG 1.1 profil. U nastavku nam daje mogućnost izbora izvora u kojima nam oni daju podrazumevano je tekst označen u SVG i podskup kao nijedan. U našem slučaju, ovaj rad nema fontove, da ga ima, opcija podskupova bi morala biti promijenjena sa nijedan na sve piktograme.
Sljedeći dio je vrlo važan, ako ukažemo na embed opcija, slike kompozicije će biti ugrađene u datoteku, što će uzrokovati da dobije na težini ako koristimo puno bitmap slika. Ako, s druge strane, označimo opciju povezivanja, moramo biti oprezni sa slikama ako ćemo ih koristiti na web stranici, jer moramo uključiti datoteke naših slika, a također, što je vrlo važno, održavati njihove put. Prednost ove opcije je što će fajlovi težiti mnogo manje.
U odjeljku naprednih opcija nalazimo opciju za SVG kod, ova opcija će pokazati kako je datoteka unutra, odnosno kod koji stoji iza našeg rada. Ova opcija je neophodna ako želite da dodate svoj SVG fajl, na primer u svoj lični WordPress, samo morate da kopirate kod i dodate ga direktno u svoj WordPress HTML editor.
Poslednji savet koji vam dajemo je da kada snimate u SVG formatu, imajte na umu da ako radite s različitim grafičkim pločama, samo će aktivna ploča biti sačuvana.
Ako želimo ići dalje i primijeniti SVG efekte na našu ilustraciju, Illustrator nam nudi skup efekata. Da bismo to učinili, morat ćemo odabrati objekt ili grupu. Da bismo primenili efekat, moramo izabrati prozor efekata, SVG filtere i primeniti ga.
Prilikom primjene SVG filtera, program za dizajn nam pokazuje prozor gdje Pojavljuje se lista filtera koji se mogu primijeniti, nakon što ga odaberemo, Illustrator nam pokazuje kako izgleda, ali u rasteriziranoj verziji.
Kao što ste vidjeli, SVG format je bio revolucija. Zahvaljujući svom potencijalu i kvaliteti koje nudi, čini web stranice koje smatramo mnogo privlačnijima bez žrtvovanja performansi, sve dok pravilno koriste navedeni format. SVG je postao savršen brak između svijeta web dizajna i razvoja.