Skaalautuvan vektorigrafiikan hyödyt
Skaalautuva Vector Graphics, tai SVG, on tärkeä rooli sivuston suunnittelussa tänään. Jos et tällä hetkellä käytä SVG: ää web-suunnittelutyössäsi, tässä on joitain syitä, miksi sinun pitäisi aloittaa niin, samoin kuin varoituksia, joita voit käyttää vanhemmille selaimille, jotka eivät tue näitä tiedostoja.
päätöslauselma
SVG: n suurin hyöty on resoluution itsenäisyys. Koska SVG-tiedostot ovat pikselipohjaisten rasterikuvien sijaan vektorigrafiikkaa, ne voidaan muuttaa pienemmiksi ilman kuvan laatuaan. Tämä on erityisen hyödyllistä, kun luot luotettavaa verkkosivustoja, jotka näyttävät hyvältä ja toimivat hyvin monenlaisten näytön koon ja laitteiden välillä .
SVG-tiedostoja voidaan skaalata ylös tai alas mukautuvien verkkosivustojen koon ja ulkoasun tarpeiden huomioon ottamiseksi. Sinun ei tarvitse huolehtia siitä, että grafiikka heikentää laatua missä tahansa vaiheessa.
Tiedoston koko
Yksi haasteista rasterikuvien (JPG, PNG, GIF) käytöstä reagoivien verkkosivustojen kanssa on näiden kuvien tiedostokoko. Koska rasterikuvat eivät skaalaa tapaa, jolla vektorien tekijät tekevät, sinun on toimitettava pikselipohjaiset kuvat suurimmalle koolle, jolla ne näytetään. Tämä johtuu siitä, että voit aina pienentää kuvaa ja säilyttää sen laadun, mutta sama ei ole totta, jos kuvat ovat suuremmat. Lopputuloksena on, että sinulla on usein kuvia, jotka ovat paljon suurempia kuin ne näytetään henkilön näytössä, mikä tarkoittaa, että heidät on pakko ladata hyvin suuri tiedosto.
SVG vastaa tähän haasteeseen. Koska vektorigrafiikka on skaalautuva, tiedostokoko voi olla hyvin pieni riippumatta siitä, kuinka suuret kuvat on ehkä näytettävä. Tällä on lopulta myönteinen vaikutus sivuston yleiseen suorituskykyyn ja latausnopeuteen.
CSS-muotoilu
SVG-koodi voidaan myös lisätä suoraan sivun HTML-muotoon. Tätä kutsutaan "inline SVG: ksi." Yksi inline-SVG: n käytöstä on se, että selaimesi piirtää grafiikan itse koodin perusteella, eikä HTTP-pyyntöä tarvitse hakea kuvatiedostoa. Toinen etu on, että inline-SVG voidaan muotoilla CSS: llä.
Haluatko vaihtaa SVG-kuvakkeen väriä? Sen sijaan, että tarvitsisit avaamaan kuvan jonkinlaisessa muokkausohjelmistossa ja viedä tiedosto uudelleen, voit vaihtaa SVG-tiedoston muutamalla rivillä CSS: llä.
Voit myös käyttää muita CSS-tyylejä SVG-grafiikassa vaihtaaksesi niitä lepotilassa tai tietyissä suunnittelustarpeissa. Voit jopa animoitua grafiikkaa lisätä liikkeen ja vuorovaikutteisuuden sivulle.
animaatiot
Koska inline SVG -tiedostot voidaan muotoilla CSS: llä, voit käyttää myös CSS-animaatioita. CSS-muunnokset ja siirtymät ovat kaksi helppoa tapaa lisätä elämää SVG-tiedostoihin. Voit saada rikkaita Flash-tyyppisiä kokemuksia sivulta ilman, että he joutuvat käyttämään Flash- sivustoja nykyisin käytettäviin Flash- sivuihin.
SVG: n käyttö
Niin voimakas kuin SVG, nämä grafiikat eivät voi korvata jokaista muuta kuvamateriaalia, jota käytät sivustossasi. Valokuvat, jotka vaativat syvän syvyyden, täytyy silti olla JPG tai ehkä PNG-tiedosto, mutta yksinkertaiset kuvakkeet, kuten kuvakkeet, soveltuvat täydellisesti SVG: n suorittamiseen.
SVG voi myös olla sopiva monimutkaisempaan kuvaan, kuten yrityksen logot tai kaaviot ja kaaviot. Kaikki grafiikka hyötyy skaalautuvasta, CSS-tyylistä ja muista tässä artikkelissa mainituista eduista.
Tuki vanhemmille selaimille
Nykyinen SVG-tuki on erittäin hyvä nykyaikaisissa selaimissa. Ainoat selaimet, joilla ei ole tosiasiallisesti tukea näitä grafiikoita, ovat vanhemmat versiot Internet Explorerista (versio 8 ja alla) ja muutama vanhempi Android-versio. Kaiken kaikkiaan hyvin pieni prosenttiosuus selauspopulaatiosta käyttää edelleen näitä selaimia, ja tämä määrä vähenee edelleen. Tämä tarkoittaa, että SVG: tä voidaan käyttää melko turvallisesti verkkosivustoilla tänään.
Jos haluat antaa vartioinnin SVG: lle, voit käyttää työkalua kuten Grumpicon Filament-ryhmästä. Tämä resurssi vie SVG-kuvatiedostosi ja luo PNG-varaukset vanhemmille selaimille.
Julkaisija: Jeremy Girard, 1/27/17