Beneficiile utilizării graficii grafice scalabile
Scalable Vector Graphics, sau SVG, joacă un rol important în designul site-ului web 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 alternativele 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 în locul imaginilor raster bazate pe pixeli, ele pot fi redimensionate fără a pierde nici o calitate a imaginii. Acest lucru este util în special atunci când creați site-uri web responsabile care trebuie să arate bine și să funcționeze bine într-o gamă largă de dimensiuni și dispozitive de ecran .
Fișierele SVG pot fi scalate în sus sau în jos pentru a se potrivi cu dimensiunile și aspectul schimbării nevoilor site-ului dvs. receptiv și nu trebuie să vă faceți griji cu privire la acele grafice care au compromis calitatea oricărui pas al drumului.
Mărime fișier
Una dintre provocările cu utilizarea imaginilor raster (JPG, PNG, GIF) pe site-urile web responsabile este dimensiunea fișierului acestor imagini. Deoarece imaginile raster nu scară în felul în care fac vectori, 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 face întotdeauna o imagine mai mică și să păstreze calitatea acesteia, dar același lucru nu este valabil pentru a face imaginile mai mari. Rezultatul final este că de multe ori aveți imagini care sunt mult mai mari decât acestea sunt afișate pe ecranul unei persoane, ceea ce înseamnă că sunt inutil obligați să descarce un fișier foarte mare.
SVG abordează această provocare. Deoarece grafica vectorială este scalabilă, puteți avea dimensiuni foarte mici ale fișierelor, indiferent de cât de mare ar trebui să fie afișate aceste imagini. Acest lucru va avea în final un impact pozitiv asupra performanței globale a site-ului și vitezei de descărcare.
CSS Styling
Codul SVG poate fi adăugat, de asemenea, direct în codul HTML al unei pagini. Acest lucru este cunoscut sub numele de "inline SVG". Unul dintre avantajele utilizării SVG inline este că, deoarece grafica este trasată de browser în funcție de codul dvs., nu este nevoie să faceți o solicitare HTTP pentru a prelua un fișier imagine. Un alt avantaj este că SVG inline poate fi decorat cu CSS.
Trebuie să modificați culoarea unei pictograme SVG? În loc să aveți nevoie să deschideți imaginea într-un fel de software de editare și să exportați și să încărcați din nou fișierul, puteți schimba pur și simplu fișierul SVG cu câteva linii de CSS.
De asemenea, puteți utiliza alte stiluri CSS pe graficele SVG pentru a le schimba pe stări de hover sau pentru anumite cerințe de proiectare. Puteți chiar anima acele grafice pentru a adăuga o mișcare și o interactivitate la o pagină.
Animații
Deoarece fișierele SVG inline pot fi decorate cu CSS, puteți folosi și animații CSS pe ele. Transformările CSS și tranzițiile sunt două modalități ușoare de a adăuga o viață la fișierele SVG. Puteți obține experiențe bogate în Flash pe o pagină, fără a ceda la dezavantajele care vin cu utilizarea Flash pe site-urile de astăzi.
Utilizări ale SVG
La fel de puternic ca SVG, aceste grafică nu poate înlocui orice alt format de imagine pe care îl utilizați pe site-ul dvs. Web. Fotografiile care necesită adâncime de culoare vor trebui să fie în continuare un fișier JPG sau poate un fișier PNG, însă imaginile simple, cum ar fi icoanele, sunt perfect potrivite pentru a fi executate ca SVG.
SVG poate fi, de asemenea, potrivit pentru ilustrații mai complexe, cum ar fi logo-urile companiei sau graficele și diagramele. Toate graficele vor beneficia de scalabilitate, capabil să fie dotate cu CSS și celelalte avantaje enumerate în acest articol.
Suport pentru browserele mai vechi
Actualul suport pentru SVG este foarte bun în browserele web moderne. Singurele browsere care nu au suport pentru aceste grafice sunt versiunile mai vechi ale Internet Explorer (versiunea 8 și versiunile ulterioare) și câteva versiuni mai vechi ale Android. În general, un procent foarte mic din populația de navigare utilizează în continuare aceste browsere, iar acest număr continuă să se micșoreze. Aceasta înseamnă că SVG poate fi folosit destul de sigur pe site-urile de astăzi.
Dacă doriți să furnizați o rezervă pentru SVG, puteți utiliza un instrument ca Grumpicon din Grupul Filament. Această resursă va prelua fișierele imagine SVG și va crea rezervări PNG pentru browserele mai vechi.
Editat de Jeremy Girard pe 17.17