Naudojant "Scalable Vector Graphics" naudą
Scalable Vector Graphics arba SVG, šiandien vaidina svarbų vaidmenį interneto svetainių kūrime. Jei šiuo metu nenaudojate SVG savo žiniatinklio kūrimo darbe, čia yra keletas priežasčių, dėl kurių turėtumėte tai padaryti, taip pat pakitimus, kuriuos galite naudoti senesnėse naršyklėse, kurios nepalaiko šių failų.
Rezoliucija
Svarbiausia SVG pranašumai yra nepriklausomybė. Kadangi SVG failai yra vektorinė grafika, o ne pikselių rastriniai vaizdai, juos galima keisti be jokio vaizdo kokybės. Tai ypač naudinga, kai kuriate jautrias svetaines, kurios turi atrodyti gerai ir gerai dirbti įvairiuose ekranų dydžiuose ir įrenginiuose .
SVG failus galima padidinti arba sumažinti, kad atitiktų jūsų reaguojančios svetainės dydį ir išdėstymo poreikius, todėl jums nereikės nerimauti dėl to, kad bet kokia pakopa kelia pavojų kokybei sugadintą grafiką.
Failo dydis
Vienas iš išbandymų, susijusių su rastrinių vaizdų (JPG, PNG, GIF) naudojimu jautriose svetainėse, yra šių vaizdų failų dydis. Kadangi rastriniai vaizdai neveikia to, kaip vyksta tokie vektoriniai veiksmai, turite pateikti pikselių vaizdus didžiausiu dydžiu, kuriame jie bus rodomi. Taip yra todėl, kad visada galite padaryti vaizdą mažesnį ir išsaugoti jo kokybę, tačiau tai nėra tiesa, jei norite, kad vaizdai būtų didesni. Galutinis rezultatas yra tai, kad dažnai turite vaizdų, kurie yra kur kas didesni, nei jie rodomi žmogaus ekrane, o tai reiškia, kad jie nebūtinai priversti atsisiųsti labai didelį failą.
SVG sprendžia šį iššūkį. Kadangi vektorinė grafika yra keičiamo dydžio, galite turėti labai mažus failų dydžius, neatsižvelgiant į tai, kiek gali būti rodomi šie vaizdai. Tai galiausiai turės teigiamą poveikį viso svetainės našumui ir atsisiuntimo greičiui.
CSS stiliaus
SVG kodą taip pat galima pridėti tiesiogiai prie puslapio HTML. Tai žinoma kaip "inline SVG". Viena iš naudos naudojant inline SVG yra tai, kad, kadangi grafika iš tikrųjų yra sukurta naršykle pagal jūsų kodą, nereikia atlikti HTTP užklausos, norint gauti vaizdo failą. Kitas privalumas yra tas, kad inline SVG gali būti stilingas su CSS.
Reikia pakeisti SVG piktogramos spalvą? Vietoj to, kad reikia atidaryti tą atvaizdą tam tikroje redagavimo programoje, o dar kartą eksportuoti ir įkelti failą, galite tiesiog pakeisti SVG failą keliomis CSS eilutėmis.
Jūs taip pat galite naudoti kitus CSS stilius SVG grafikoje, kad galėtumėte juos keisti laikydamiesi būsenos ar tam tikrų dizaino poreikių. Galite netgi animuoti šiuos grafikus, kad pridėtumėte tam tikrą judėjimą ir sąveiką su puslapiu.
Animacijos
Kadangi inline SVG failus galima stiliaus su CSS, taip pat galite naudoti CSS animacijas. CSS transformacijos ir perėjimai yra du paprasti būdai, kaip pridėti šiek tiek gyvybės SVG failus. Jūs galite gauti turtingą "Flash" panašių įspūdžių puslapyje, nepakenkiant blogėjimams, kurie šiandien yra naudojant "Flash " svetaines.
SVG naudojimas
Šios grafikos galia taip pat galinga, kaip SVG, negali pakeisti kiekvieno kito vaizdo formato, kurį naudojate savo svetainėje. Nuotraukos, kurioms reikalingas gilus gylio spalvos vaizdas, vis tiek turi būti JPG arba galbūt PNG failo, tačiau paprasti vaizdai, pavyzdžiui, piktogramos, puikiai tinka, kad jie būtų vykdomi kaip SVG.
SVG taip pat gali būti tinkama sudėtingesnėms iliustracijoms, pavyzdžiui, įmonės logotipams ar grafikai ir diagramos. Visiems grafikai bus naudinga mastelio keitimas, stilius su CSS ir kiti šiame straipsnyje išvardyti privalumai.
Parama senesniems naršyklėms
Dabartinė SVG palaikymas yra labai geras šiuolaikinėse interneto naršyklėse. Vienintelės naršyklės, kurioms trūksta šios grafikos, yra senesnės "Internet Explorer" versijos (versijos 8 ir naujesnės versijos) ir kelios senesnės "Android" versijos. Apskritai, labai maža dalis naršymo gyventojų vis dar naudoja šias naršykles, o šis skaičius ir toliau mažėja. Tai reiškia, kad SVG šiandien gali būti naudojamas gana saugiai.
Jei norite sukurti SVG atsarginę kopiją, galite naudoti "Grumpicon" įrankį iš "Filament Group". Šis išteklius perims jūsų SVG vaizdo failai ir sukuria senesnių naršyklių PNG pakitimus.
Redagavo Jeremy Girard 17.17.17