Grafikat vektoriale të shkallëzueshme, ose SVG, luajnë një rol të rëndësishëm në hartimin e faqeve të internetit sot. Nëse nuk po përdorni aktualisht SVG në punën tuaj të dizajnit të ueb-faqes, këtu janë disa arsye pse duhet të filloni ta bëni këtë, si dhe kthime që mund të përdorni për shfletuesit më të vjetër që nuk i mbështesin këta skedarë.
Rezoluta
Përfitimi më i madh i SVG është pavarësia e rezolucionit. Për shkak se skedarët SVG janë grafikë vektoriale (në krahasim me imazhet raster të bazuara në pixel), ju mund t'i ndryshoni përmasat e tyre pa humbur cilësinë e imazhit. Kjo është veçanërisht e dobishme kur krijoni faqe interneti të përgjegjshme që duhet të duken mirë dhe të funksionojnë mirë në një gamë të gjerë të madhësive dhe pajisjeve të ekranit. Ju mund t'i shkallëzoni skedarët SVG lart ose poshtë për të përshtatur nevojat në ndryshim të madhësisë dhe paraqitjes së faqes suaj të internetit reaguese pa kompromentuar cilësinë e tyre në asnjë mënyrë.
Në përgjithësi, SVG-të kanë një pamje më të butë dhe më të qartë se imazhet e formateve të tjera, pavarësisht nga madhësia.
Madhësia e skedarit
Një sfidë me përdorimin e imazheve raster (p.sh., JPG, PNG, GIF) në faqet e internetit të përgjegjshme është madhësia e skedarit. Për shkak se imazhet raster nuk shkallëzohen siç bëjnë imazhet vektoriale, ju duhet të dorëzoni imazhet tuaja të bazuara në piksel në madhësinë më të madhe në të cilën do të shfaqen. Kjo është për shkak se ju gjithmonë mund ta bëni një imazh më të vogël dhe të ruani cilësinë e tij, por e njëjta gjë nuk është e vërtetë për t'i bërë imazhet më të mëdha. Rezultati janë imazhe që janë shumë më të mëdha se madhësia në të cilën po shikohen, duke i detyruar shfletuesit të shkarkojnë skedarë të mëdhenj.
Në të kundërt, grafikat vektoriale janë të shkallëzueshme, kështu që ju mund të përdorni madhësi shumë të vogla skedarësh pavarësisht se sa të mëdha mund të kenë nevojë të shfaqen ato imazhe. Kjo përfundimisht optimizon performancën e përgjithshme të një sajti dhe shpejtësinë e shkarkimit.
Stilim CSS
Mund të shtoni lehtësisht SVG direkt në HTML-në e një faqeje. Kjo njihet si SVG inline. Një përfitim i përdorimit të SVG-së inline është se, për shkak se grafika në fakt vizatohet nga shfletuesi, nuk ka nevojë për një kërkesë HTTP për të marrë një skedar imazhi.
Një tjetër përfitim: Mund të stiloni SVG inline me CSS. Keni nevojë të ndryshoni ngjyrën e një ikone SVG? Në vend që ta redaktoni atë imazh në softuerin e redaktimit grafik dhe më pas të eksportoni dhe ngarkoni përsëri skedarin, mund ta ndryshoni skedarin SVG thjesht me disa rreshta CSS. Ju mund të përdorni CSS për të ndryshuar SVG për gjendjet e pezullimit dhe nevoja të tjera të dizajnit gjithashtu.
Përfundim
Për shkak se ju mund të stiloni skedarët SVG inline me CSS, mund të përdorni edhe animacione CSS në to. Transformimet dhe tranzicionet CSS janë dy mënyra të thjeshta për t'i shtuar pak jetë SVG-ve. Mund të merrni përvoja të pasura të ngjashme me Flash në një faqe pa përdorur Flash-të cilin iPad nuk e mbështet më. Në fakt, Adobe po heq dorë nga Flash deri në fund të vitit 2020.
Përdorimet e SVG
Sado të fuqishme që janë SVG-të, ato nuk mund të zëvendësojnë çdo format tjetër imazhi. Fotografitë që kërkojnë thellësi të pasur ngjyrash duhet të jenë ende në format-j.webp
SVG është gjithashtu i përshtatshëm për disa ilustrime komplekse, të tilla si grafikët, grafikët dhe logot e kompanive. Të gjitha këto grafika përfitojnë nga të qenit të shkallëzueshme dhe të aftë për t'u stiluar me CSS.
Mbështetje për shfletuesit më të vjetër
Mbështetja aktuale për SVG është shumë e mirë në shfletuesit modern të internetit. Të vetmit shfletues që nuk kanë mbështetje për këto grafika janë versionet e vjetra të Internet Explorer (të cilat Microsoft nuk i mbështet më) dhe disa versione të vjetra të Android. Në përgjithësi, një përqindje shumë e vogël e popullsisë së shfletimit i përdor ende këta shfletues dhe ky numër vazhdon të tkurret. Kjo do të thotë që ju mund të përdorni SVG në faqen tuaj të internetit pa u shqetësuar.
Nëse dëshironi të siguroni një kthim prapa për SVG, përdorni një mjet të tillë si Grumpicon nga Filament Group. Ky burim krijon-p.webp
