Pse ju duhet të përdorni SVG në faqen tuaj sot

Përfitimet e përdorimit të Grafikut Vector Scalable

Grafika Vector Scalable, ose SVG, luan një rol të rëndësishëm në hartimin e faqes së internetit sot. Nëse nuk po përdor aktualisht SVG në punën tuaj të dizajnit të uebit, këtu janë disa arsye pse duhet të filloni ta bëni këtë, si dhe fallbacks që mund të përdorni për shfletuesit më të vjetër që nuk i mbështesin këto skedarë.

zgjidhje

Përfitimi më i madh i SVG është pavarësia e zgjidhjes. Për shkak se skedarët SVG janë grafikë vektoriale në vend të imazheve të rasterit me bazë piksele, ato mund të ndryshohen pa humbur cilësinë e imazhit. Kjo është veçanërisht e dobishme kur krijoni faqet e internetit të përgjegjshme që duhet të duken mirë dhe të punojnë mirë në një gamë të gjerë të madhësive dhe pajisjeve të ekranit .

Skedat SVG mund të shkallëzohen lart ose poshtë për të akomoduar madhësinë e ndryshimit dhe nevojat e paraqitjes së faqes suaj të përgjegjshme dhe ju nuk keni nevojë të shqetësoheni për ato grafika që kanë cilësi të komprometuar çdo hap të rrugës.

Madhësia e dokumentit

Një nga sfidat me përdorimin e imazheve raster (JPG, PNG, GIF) në faqet e internetit të përgjegjshme është madhësia e skedarit të këtyre imazheve. Për shkak se imazhet e rasterit nuk shkallëzojnë mënyrën se si bëjnë ato vektorë, ju duhet të shpërndani imazhet tuaja me bazë pixel në madhësinë më të madhe në të cilën do të shfaqen. Kjo është për shkak se ju gjithmonë mund të 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ë bërë imazhe më të mëdha. Rezultati përfundimtar është që shpesh keni imazhe që janë shumë më të mëdha se ato që shfaqen në ekranin e një personi, që do të thotë se janë të detyruar të shkarkojnë një skedar shumë të madh.

SVG adreson këtë sfidë. Për shkak se grafika vektoriale është e shkallëzuar, mund të keni madhësi shumë të vogla të skedarëve pavarësisht se sa të mëdha mund t'u nevojiten atyre imazheve. Kjo në fund të fundit do të ketë një ndikim pozitiv në performancën e përgjithshme të faqes dhe shpejtësinë e shkarkimit.

CSS Styling

Kodi SVG gjithashtu mund të shtohet direkt në HTML të një faqeje. Kjo njihet si "inline SVG." Një nga përfitimet e përdorimit të SVG-së inline është që, meqë grafikët në të vërtetë janë tërhequr nga shfletuesi bazuar në kodin tuaj, nuk ka nevojë të bëni një kërkesë HTTP për të shkruar një skedar imazhi. Një përfitim tjetër është se inline SVG mund të organizohet me CSS.

Nevoja për të ndryshuar ngjyrën e një ikoni SVG? Në vend se të duhet të hapësh atë imazh në një lloj softueri të redaktimit dhe të eksportosh dhe të ngarkosh përsëri skedarin, mund të ndryshosh skedarin SVG me disa rreshta CSS.

Ju gjithashtu mund të përdorni stilet e tjera CSS në grafikë SVG për t'i ndryshuar ato në shtigjet e pezulluara ose për nevoja të caktuara të dizajnit. Mund të animosh edhe ato grafika për të shtuar një lëvizje dhe interaktivitet në një faqe.

Animime

Për shkak se skedarët SVG inline mund të personalizohen me CSS, ju gjithashtu mund të përdorni animacione CSS mbi to. Transformimet CSS dhe tranzicionet janë dy mënyra të thjeshta për të shtuar disa jetë në skedarët SVG. Ju mund të merrni përvoja të pasura me Flash në një faqe pa iu nënshtruar dobësive që vijnë me përdorimin e Flash në faqet e internetit sot.

Përdorimet e SVG

Sa i fuqishëm sa SVG është, këto grafika nuk mund të zëvendësojnë çdo format tjetër të imazhit që po përdorni në faqen tuaj te internetit. Fotot që kërkojnë thellësi të thellë të ngjyrës do të vazhdojnë të jenë JPG ose ndoshta një skedar PNG, por imazhe të thjeshta si ikona janë të përshtatshme të përkryer për t'u ekzekutuar si SVG.

SVG gjithashtu mund të jetë i përshtatshëm për ilustrime më komplekse, si logot e kompanisë ose grafikët dhe grafikët. Të gjitha grafikat do të përfitojnë nga shkathtësia e shkallëzuar, të aftë për t'u vetëquajtur me CSS, dhe përparësitë e tjera të renditura në këtë artikull.

Mbështetje për shfletuesit më të vjetër

Mbështetja aktuale për SVG është shumë e mirë në shfletuesit e internetit modernë. Shfletuesit e vetëm që me të vërtetë nuk kanë mbështetje për këto grafika janë versione të vjetra të Internet Explorer (Version 8 dhe më poshtë) dhe disa versione të vjetra të Android. Në tërësi, një përqindje shumë e vogël e popullsisë së shfletimit ende përdor këto shfletues, dhe ky numër vazhdon të tkurret. Kjo do të thotë që SVG mund të përdoret mjaft mirë në faqet e internetit sot.

Nëse dëshironi të jepni një rezervë për SVG, mund të përdorni një mjet si Grumpicon nga Grupi i Filamentit. Ky burim do të marrë skedarët tuaj të imazhit SVG dhe do të krijojë rezerva PNG për shfletuesit më të vjetër.

Redaktuar nga Jeremy Girard më 1/27/17