Prilikom izrade web stranice, web dizajner mora uzeti u obzir četiri glavne točke razmišljajući o izgledu i vizualnom dizajnu weba, tekst, slike, boje i fontovi zaposlenika.
Od ove četiri točke, ona kojoj ćemo dati najveću važnost u ovom postu su slike, budući da ćemo govoriti o kako stvoriti svg datoteke budući da je vrlo važno voditi računa o kvaliteti slika s kojima radite.
Tretmani sa SVG datotekama, povećavaju profesionalci a ne tako profesionalci u svijetu dizajna.
Što je SVG datoteka?
SVG je kratica na engleskom za Scalabe Vector Graphics, na španjolskom, Scalable Vector Graphics. Riječ je o a otvorenog i slobodnog formata s kojim se stvaraju 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 kvaliteta slike zadržati. 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 razlučivost. Naprotiv, slike sastavljene od bitmapa, sastavljene od piksela, gube kvalitetu ako im se promijeni veličina. SVG format definiran je svojom lakoćom i svestranošću.
Još jedna točka u prilog korištenja ovog formata je njegova mala veličina, odnosno zahvaljujući tome povećava brzinu učitavanja stranica na kojima se nalaze. Ove slike izrađuje preglednik, što pomaže u smanjenju opterećenja i potrošnje na poslužitelju.
Osim toga, mogu stvoriti animirane SVG slike čime će našoj web stranici dati dojam bliskosti i skrenuti pozornost gledatelja koji je posjećuju.
SVG je otvoreni format, tj. može doživjeti poboljšanja i ažuriranja. Osim toga, SVG datoteke se mogu uređivati programima za vektorsko uređivanje, na primjer Adobe Illustartor bez gubitka kvalitete prikaza, može se gledati na bilo kojem uređaju. Također nam omogućuje ispis bez gubitka kvalitete.
Kako jednostavno stvoriti SVG datoteke
Možda je najlakši način za stvaranje 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 efekt, zamućenje, kistovi, pikseli itd. budući da su rasterizirani kada se spremaju u SVG format datoteke. Preporuča se koristiti efekte SVG filtera, za dodavanje efekata kako se kasnije ne bi mogli rasterizirati.
Još jedan savjet koji vam dajemo jest korištenje jednostavni simboli i putovi u ilustracijama za bolju izvedbu navedenog formata. Izbjegavajte korištenje kistova s puno ocrtavanja jer to stvara veće opterećenje podataka.
Da biste stvorili SVG datoteku u ovom programu, Prvo što moramo imati otvoreno je prazno platno na kojem ćemo raditi na našoj ideji.
Nakon što naš posao završi, ono što ćemo učiniti je otići na alatnu traku koja je prikazana iznad programa, a mi ćemo odabrati opciju datoteku, spremite kao i pojavit će se skočni zaslon na kojem će nam reći da našoj datoteci damo ime i označimo format u kojem ga želimo spremiti. U ovom posljednjem odjeljku moramo označiti opciju SVG.
Prilikom odabira tipa SVG pojavljuje se dijaloški okvir koji nam pokazuje različite opcije koje moramo uzeti u obzir.
Kao opće pravilo, u prvom polju koje se pojavi u tablici pojavljuje se SVG 1.1 profil. U nastavku nam daje mogućnost odabira izvora u kojima nam oni daju zadano je tekst označen u SVG-u i podskup kao nijedan. U našem slučaju, ovaj rad nema fontove, da ga ima, opciju podskupova bi se morala promijeniti iz nijedan u sve piktograme.
Sljedeći dio je vrlo važan, ako ukažemo na embed opciju, slike kompozicije će biti ugrađene u datoteku, što će uzrokovati debljanje 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 staza. Prednost ove opcije je što će datoteke težiti puno manje.
U odjeljku naprednih opcija nalazimo opciju za SVG kod, ova opcija će naznačiti kako je datoteka unutra, odnosno šifra koja stoji iza našeg rada. Ova je opcija neophodna ako želite dodati svoju SVG datoteku, na primjer u svoj osobni WordPress, samo morate kopirati kod i dodati ga izravno u svoj WordPress HTML editor.
Posljednji savjet koji vam dajemo je da prilikom spremanja u SVG formatu, imajte na umu da će se, ako radite s različitim umjetničkim pločama, zadržati samo aktivna ploča.
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. Za primjenu efekta moramo odabrati prozor efekata, SVG filtere i primijeniti ga.
Prilikom primjene SVG filtera, program za dizajn nam pokazuje prozor gdje Pojavljuje se popis filtara 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 puno privlačnijima bez žrtvovanja performansi, sve dok ispravno koriste navedeni format. SVG je postao savršen spoj između svijeta dizajna i web razvoja.