Atunci când creează un site web, designerul web trebuie să țină cont patru puncte principale gândindu-ne la aspectul și designul vizual al web-ului, text, imagini, culori și fonturi angajati.
Dintre aceste patru puncte, cel căruia îi vom acorda cea mai mare importanță în această postare sunt imaginile, deoarece vom vorbi despre cum se creează fișiere svg întrucât este foarte important să ții cont de calitatea imaginilor cu care lucrezi.
Tratamente cu fișiere SVG, a crescut de către profesioniști și nu atât de profesioniști din lumea designului.
Ce este un fișier SVG?
SVG este abrevierea în engleză pentru Scalabe Vector Graphics, în spaniolă, Scalable Vector Graphics. Este vorba despre o format deschis și liber cu care să creați grafică 2D, două dimensiuni.
Spre deosebire de alte formate de imagine, cum ar fi JPG sau PNG, SVG este un format scalabil, indiferent cât de mult doriți să-i creșteți dimensiunea, deoarece calitatea imaginii va fi menținută. Este unul dintre cele mai utilizate formate în paginile web pentru a plasa grafice sau imagini vectoriale.
De ce ar trebui să folosim SVG?
Cu acest tip de format, imaginile vectoriale se vor menține de înaltă calitate, indiferent de dimensiunea și rezoluția lor. Dimpotrivă, imaginile formate din bitmaps, formate din pixeli, își pierd calitatea dacă sunt redimensionate. Formatul SVG este definit prin ușurință și versatilitate.
Un alt punct în favoarea utilizării acestui format este dimensiunea sa mică, adică datorită acestui lucru crește viteza de încărcare a paginilor în care se află acestea. Aceste imagini sunt construite de browser, ceea ce ajută la reducerea încărcării și consumului de pe server.
În plus, pot creați imagini SVG animate cu care să dăm site-ului nostru un aer de apropiere și să atragem atenția spectatorilor care îl vizitează.
SVG este un format deschis, adică poate suferi îmbunătățiri și actualizări. În plus, fișierele SVG pot fi editate cu programe de editare vectorială, de exemplu Adobe Illustartor fără a pierde calitatea în afișajul său, acesta putând fi vizualizat pe orice dispozitiv. De asemenea, ne permite să-l imprimăm fără a pierde calitatea.
Cum să creați cu ușurință fișiere SVG
Poate cel mai simplu mod de a crea fișiere SVG, dacă sunteți familiarizat cu ele, este printr-un program de design grafic, cum ar fi Illustrator, Corel Draw, printre altele.
Concentrându-ne pe programul Illustrator, atunci când urmează să folosim formatul SVG, trebuie să ținem cont dacă am folosit degrade sau alte efecte, precum efectul artistic, blur, pensule, pixeli etc. deoarece sunt rasterizate atunci când sunt salvate în format de fișier SVG. Este recomandat să folosiți efecte de filtru SVG, pentru a adăuga efecte astfel încât acestea să nu poată fi rasterizate ulterior.
Un alt sfat pe care ți-l oferim este să folosești simboluri și căi simple în ilustrații pentru o performanță mai bună de formatul respectiv. Evitați utilizarea pensulelor cu multe trasări, deoarece acest lucru generează o încărcare mai mare de date.
Pentru a crea un fișier SVG în acest program, Primul lucru pe care trebuie să-l avem deschisă este o pânză goală în care vom lucra la ideea noastră.
Odată ce munca noastră este terminată, ceea ce vom face este să mergem la bara de instrumente care este afișată deasupra programului și vom selecta opțiunea de fișier, salvați ca și va apărea un ecran pop-up unde ne spune să dăm un nume fișierului nostru și indicați formatul în care dorim să-l salvăm. Este în această ultimă secțiune unde trebuie să marchem opțiunea SVG.
La selectarea tipului SVG, apare o casetă de dialog care ne arată diferite opțiuni care trebuie luate în considerare.
Ca regulă generală, în primul câmp care apare în tabel, apare profilul SVG 1.1. În cele ce urmează ne oferă opțiunea de a alege sursele, în care acestea ne oferă implicit la text marcat în SVG și subset ca niciunul. În cazul nostru, această lucrare nu are fonturi, dacă ar avea, opțiunea subseturi ar trebui schimbată de la niciun pictogramă la toate pictogramele.
Următoarea secțiune este foarte importantă, dacă subliniem opțiunea de încorporare, imaginile compoziției vor fi încorporate în fișier, ceea ce o va face să se îngrașă dacă folosim multe imagini bitmap. Dacă, pe de altă parte, bifăm opțiunea de link, trebuie să fim atenți la imagini dacă urmează să le folosim pe un site web, deoarece trebuie să includem fișierele imaginilor noastre și, de asemenea, foarte important, să le menținem cale. Avantajul acestei opțiuni este că fișierele vor cântări mult mai puțin.
În secțiunea de opțiuni avansate găsim opțiunea pentru Cod SVG, această opțiune va indica modul în care se află fișierul în interior, adică codul din spatele muncii noastre. Această opțiune este esențială dacă doriți să adăugați fișierul SVG, de exemplu la WordPress-ul personal, trebuie doar să copiați codul și să-l adăugați direct în editorul dvs. HTML WordPress.
Ultimul sfat pe care vi-l oferim este că atunci când salvați în format SVG, rețineți că, dacă lucrați cu diferite planșe de artă, va fi păstrată doar tabloul de desen activ.
Dacă vrem să mergem mai departe și să aplicăm efecte SVG ilustrației noastre, Illustrator ne oferă un set de efecte. Pentru a face acest lucru, va trebui să selectăm un obiect sau un grup. Pentru a aplica un efect trebuie să selectăm fereastra de efecte, filtrele SVG și să o aplicăm.
La aplicarea unui filtru SVG, programul de design ne arată o fereastră în care Apare o listă de filtre care pot fi aplicate., odată ce selectăm unul, Illustrator ne arată cum arată, dar într-o versiune rasterizată.
După cum ați văzut, Formatul SVG a fost o revoluție. Datorită potențialului și calității sale pe care îl oferă, face paginile web pe care le găsim mult mai atractive, fără a sacrifica performanța, atâta timp cât folosesc corect formatul menționat. SVG a devenit uniunea perfectă între lumea designului și dezvoltarea web.