Scalable Vector Graphics arba SVG šiandien vaidina svarbų vaidmenį kuriant svetaines. Jei šiuo metu nenaudojate SVG savo žiniatinklio kūrimo darbuose, čia yra keletas priežasčių, kodėl turėtumėte tai pradėti, taip pat atsargines versijas, kurias galite naudoti senesnėms naršyklėms, kurios nepalaiko šių failų.
Rezoliucija
Didžiausias SVG pranašumas yra skyros nepriklausomumas. Kadangi SVG failai yra vektorinė grafika (priešingai nei pikselių rastriniai vaizdai), galite pakeisti jų dydį neprarandant vaizdo kokybės. Tai ypač naudinga, kai kuriate interaktyvias svetaines, kurios turi gerai atrodyti ir gerai veikti įvairiuose dydžių ekranuose ir įrenginiuose. Galite padidinti arba sumažinti SVG failų mastelį, kad atitiktumėte kintančius interaktyvios svetainės dydžio ir išdėstymo poreikius, jokiu būdu nepakenkdami jų kokybei.
Paprastai SVG išvaizda yra sklandesnė, ryškesnė nei kitų formatų vaizdai, nepaisant jų dydžio.
Failo dydis
Vienas iššūkis naudojant rastrinius vaizdus (pvz., JPG, PNG, GIF) reaguojančiose svetainėse yra failo dydis. Kadangi rastrinių vaizdų mastelis nesikeičia taip, kaip vektoriniai vaizdai, turite pateikti pikselių vaizdus didžiausio dydžio, kuriuo jie bus rodomi. Taip yra todėl, kad visada galite sumažinti vaizdą ir išlaikyti jo kokybę, tačiau tas pats pasakytina apie didinimą. Rezultatas yra vaizdai, kurie yra daug didesni nei dydis, kuriuo jie yra peržiūrimi, todėl naršyklės verčiamos atsisiųsti didelius failus.
Priešingai, vektorinė grafika yra keičiamo dydžio, todėl galite naudoti labai mažus failus, nepaisant to, kokio dydžio tie vaizdai turi būti rodomi. Tai galiausiai optimizuoja bendrą svetainės našumą ir atsisiuntimo greitį.
CSS stilius
Galite lengvai pridėti SVG tiesiai į puslapio HTML. Tai žinoma kaip eilutinis SVG. Vienas iš tiesioginio SVG naudojimo pranašumų yra tas, kad, kadangi grafiką iš tikrųjų piešia naršyklė, nereikia pateikti HTTP užklausos, norint gauti vaizdo failą.
Kitas pranašumas: galite formuoti tiesioginį SVG naudodami CSS. Reikia pakeisti SVG piktogramos spalvą? Užuot redaguodami tą vaizdą grafikos redagavimo programine įranga, o tada eksportuodami ir vėl įkeldami failą, galite pakeisti SVG failą tiesiog naudodami kelias CSS eilutes. Taip pat galite naudoti CSS, kad pakeistumėte SVG pagal užvedimo būsenas ir kitus dizaino poreikius.
Bottom line
Kadangi galite formuoti eilutinius SVG failus naudodami CSS, juose taip pat galite naudoti CSS animaciją. CSS transformacijos ir perėjimai yra du paprasti būdai suteikti SVG gyvybės. Puslapyje galite mėgautis daugybe „Flash“panašių funkcijų nenaudodami „Flash“, kurios „iPad“nebepalaiko. Tiesą sakant, „Adobe“palaipsniui atsisako „Flash“iki 2020 m. pabaigos.
SVG naudojimas
Kad ir kokie galingi būtų SVG, jie negali pakeisti visų kitų vaizdo formatų. Nuotraukos, kurioms reikalingas turtingas spalvų gylis, vis tiek turėtų būti-j.webp
SVG taip pat tinka kai kurioms sudėtingoms iliustracijoms, tokioms kaip grafikai, diagramos ir įmonės logotipai. Visa ši grafika yra naudinga, nes yra keičiama ir gali būti formuojama naudojant CSS.
Senesnių naršyklių palaikymas
Dabartinis SVG palaikymas šiuolaikinėse žiniatinklio naršyklėse yra labai geras. Vienintelės naršyklės, kuriose ši grafika nepalaikoma, yra senos „Internet Explorer“versijos (kurios „Microsoft“nebepalaiko) ir kelios senos „Android“versijos. Apskritai, labai maža dalis naršančių gyventojų vis dar naudoja šias naršykles, ir šis skaičius toliau mažėja. Tai reiškia, kad galite nesijaudindami naudoti SVG savo svetainėje.
Jei norite pateikti atsarginę SVG versiją, naudokite įrankį, pvz., Grumpicon iš Filament Group. Šis š altinis sukuria-p.webp
