Scalable Vector Graphicsi eelised
Scalable Vector Graphics või SVG täna mängivad olulist rolli veebisaidi kujundamisel. Kui te ei kasuta oma veebidisaini töös SVG-d praegu, on mõned põhjused, miks peaksite seda tegema, samuti tagasilöökid, mida saate kasutada vanemate brauseritega, mis neid faile ei toeta.
Resolutsioon
SVG suurim kasu on resolutsiooni sõltumatus. Kuna SVG-failid on pikslipõhiste rasterpiltide asemel vektorgraafika, saab neid muuta, ilma et kaotataks mingit kujutise kvaliteeti. See on eriti kasulik, kui loote reageerivaid veebisaite, mis peavad välja nägema hästi ja töötama hästi laias ekraani suuruses ja seadmetes .
SVG-faile saab laiendada või vähendada, et kohandada teie reageeriva veebisaidi muutuva suuruse ja paigutusvajadustega, ja te ei pea muretsema nende graafikute puhul, mis mõjutavad kvaliteeti mis tahes sammuga.
Faili suurus
Rasterpiltide (JPG, PNG, GIF) kasutamine tundlikel veebisaitidel on nende piltide failisuurus. Kuna rasterpildid ei skaala nii, nagu need vektoreid teevad, peate andma oma pikslipõhiseid kujutisi suurima suurusega, millel neid kuvatakse. Seda seetõttu, et saate alati muuta pildi väiksemaks ja säilitada selle kvaliteet, kuid see ei kehti ka piltide suurema pildi kohta. Lõpptulemus on see, et sageli on pildid, mis on palju suuremad, kui need kuvatakse inimese ekraanil, mis tähendab, et nad on tarbetult sunnitud väga suure faili alla laadima.
SVG käsitleb seda väljakutset. Kuna vektorgraafika on skaleeritavad, võib teil olla väga väikesed failisuurused sõltumata sellest, kui palju neid pilte võib-olla kuvada. See võib lõppkokkuvõttes positiivselt mõjutada saidi üldist jõudlust ja allalaadimise kiirust.
CSS stiil
SVG-koodi saab lisada ka otse lehe HTML-i. Seda tuntakse kui "inline SVG-d". Inline SVG-i üks eeliseid on see, et kuna brauser põhineb graafikul teie koodil, ei ole vaja pildifaili hankimiseks HTTP-päringut teha. Teine eelis on see, et sisemist SVG-d saab stiili kujundada CSS-iga.
Kas soovite SVG ikooni värvi muuta? Selle asemel, et seda pilti mõnes redaktsioonitarkvaras avada ja eksportida ja fail uuesti üles laadida, saate lihtsalt muuta SVG-faili mõne CSS-i rida.
Võite kasutada ka teisi CSS-i stiile SVG-graafiliselt, et neid muuta kursori olekutes või teatud disainivajaduste jaoks. Neid graafika saab isegi aimuerida, et lisada lehele teatud liikumist ja interaktiivsust.
Animatsioonid
Kuna sisseehitatud SVG-faile saab stiliseerida CSS-iga, saate neile ka CSS-animatsioone kasutada. CSS-i teisendused ja üleminekud on kaks lihtsat viisi, kuidas lisada SVG-failidele mingit elu. Lehel saate rikkaid Flash-like kogemusi, ilma et võtaksite tänapäeval veebisaidil Flashi kasutamisega seotud nõrkusi.
SVG kasutamine
Nii võimas kui SVG, ei saa need graafikud asendada kõiki teisi pildivorminguid, mida kasutate oma veebisaidil. Fotod, mis vajavad sügavat värvi sügavust, peavad endiselt olema JPG- või isegi PNG-failid, kuid lihtsad pildid, nagu ikoonid, sobivad täiesti SVG-ga täidetuks.
SVG võib sobida ka keerukamate illustratsioonide jaoks, nagu näiteks ettevõtte logod või graafikud ja graafikud. Kõik graafika saavad kasutada skaalautuvat, CSS-i stiili ja muid selles artiklis loetletud eeliseid.
Vanemate brauserite toetus
Praegune toetus SVG-le on tänapäevastes veebibrauserites väga hea. Ainsad brauserid, kellel sellist graafikat tegelikult puudub, on Internet Exploreri vanemad versioonid (versioon 8 ja allpool) ja mõned vanemad Androidi versioonid. Kokkuvõttes kasutab endiselt neid veebibraporteerijaid väga väike protsent sirvimisest, ja see number jätkab kahanemist. See tähendab, et SVG-d saab täna veebisaitidel täiesti turvaliselt kasutada.
Kui soovid pakkuda SVG varundamist, võite kasutada filtri rühma nagu Grumpiconit. See ressurss võtab teie SVG-pildifailid ja loob vanemate brauseritega PNG-i tagasilöögid.
Redigeeris Jeremy Girard 27. ja 17. jaanuaril