Scalable Vector Graphics, sau SVG, joacă un rol important în designul site-urilor de astăzi. Dacă în prezent nu utilizați SVG în munca dvs. de web design, iată câteva motive pentru care ar trebui să începeți să faceți acest lucru, precum și alternative pe care le puteți utiliza pentru browserele mai vechi care nu acceptă aceste fișiere.
Rezoluție
Cel mai mare beneficiu al SVG este independența rezoluției. Deoarece fișierele SVG sunt grafice vectoriale (spre deosebire de imaginile raster bazate pe pixeli), le puteți redimensiona fără a pierde calitatea imaginii. Acest lucru este util în special atunci când creați site-uri web receptive care trebuie să arate bine și să funcționeze bine pe o gamă largă de dimensiuni de ecran și dispozitive. Puteți mări sau reduce fișierele SVG pentru a se adapta nevoilor de dimensiune și aspect în schimbare ale site-ului dvs. responsive, fără a compromite în niciun fel calitatea acestora.
În general, SVG-urile au un aspect mai neted, mai clar decât imaginile din alte formate, indiferent de dimensiune.
Dimensiunea fișierului
O problemă cu utilizarea imaginilor raster (de exemplu, JPG, PNG, GIF) pe site-uri web receptive este dimensiunea fișierului. Deoarece imaginile raster nu se scalează așa cum o fac imaginile vectoriale, trebuie să livrați imaginile bazate pe pixeli la cea mai mare dimensiune la care vor fi afișate. Acest lucru se datorează faptului că puteți oricând să micșorați o imagine și să-i păstrați calitatea, dar nu același lucru este valabil și pentru a mări imaginile. Rezultatul sunt imagini care sunt mult mai mari decât dimensiunea la care sunt vizualizate, forțând browserele să descarce fișiere mari.
În schimb, graficele vectoriale sunt scalabile, astfel încât să puteți utiliza fișiere de dimensiuni foarte mici, indiferent de cât de mari ar trebui să fie afișate acele imagini. Acest lucru optimizează în cele din urmă performanța generală a unui site și viteza de descărcare.
Stil CSS
Puteți adăuga cu ușurință SVG direct la HTML-ul unei pagini. Acesta este cunoscut sub numele de SVG inline. Un avantaj al utilizării SVG în linie este că, deoarece graficele sunt de fapt desenate de browser, nu este nevoie de o solicitare HTTP pentru a prelua un fișier imagine.
Un alt avantaj: puteți stila SVG inline cu CSS. Trebuie să schimbați culoarea unei pictograme SVG? În loc să editați acea imagine în software-ul de editare grafică și apoi să exportați și să încărcați din nou fișierul, puteți modifica fișierul SVG pur și simplu cu câteva rânduri de CSS. Puteți folosi CSS pentru a schimba SVG-urile pentru stările de trecere cu mouse-ul și alte necesități de proiectare.
Linia de bază
Deoarece puteți stila fișiere SVG inline cu CSS, puteți folosi și animații CSS pentru ele. Transformările și tranzițiile CSS sunt două moduri ușoare de a adăuga un pic de viață SVG-urilor. Puteți obține experiențe bogate asemănătoare Flash-ului pe o pagină fără a utiliza Flash, pe care iPad-ul nu îl mai acceptă. De fapt, Adobe renunță treptat la Flash până la sfârșitul anului 2020.
Utilizări ale SVG
Oricât de puternice sunt SVG-urile, nu pot înlocui orice alt format de imagine. Fotografiile care necesită o adâncime bogată de culoare ar trebui să fie în format-j.webp
SVG este potrivit și pentru unele ilustrații complexe, cum ar fi grafice, diagrame și sigle ale companiei. Toate aceste elemente grafice beneficiază de faptul că sunt scalabile și pot fi modelate cu CSS.
Asistență pentru browsere mai vechi
Suportul actual pentru SVG este foarte bun în browserele web moderne. Singurele browsere care nu au suport pentru aceste grafice sunt versiunile vechi de Internet Explorer (pe care Microsoft nu mai acceptă) și câteva versiuni vechi de Android. Per total, un procent foarte mic din populația care navighează încă mai folosește aceste browsere, iar acest număr continuă să scadă. Aceasta înseamnă că puteți folosi SVG pe site-ul dvs. fără griji.
Dacă doriți să oferiți o rezervă pentru SVG, utilizați un instrument precum Grumpicon de la Filament Group. Această resursă creează PNG-uri din fișierele dvs. imagine SVG.
