Scalable Vector Graphics eli SVG on tärkeä rooli verkkosivustojen suunnittelussa nykyään. Jos et tällä hetkellä käytä SVG:tä web-suunnittelutyössäsi, tässä on muutamia syitä, miksi sinun pitäisi aloittaa niin, sekä varavaihtoehtoja, joita voit käyttää vanhemmille selaimille, jotka eivät tue näitä tiedostoja.
Resoluutio
SVG:n suurin hyöty on resoluution riippumattomuus. Koska SVG-tiedostot ovat vektorigrafiikkaa (toisin kuin pikselipohjaiset rasterikuvat), voit muuttaa niiden kokoa kuvanlaadun heikkenemättä. Tämä on erityisen hyödyllistä, kun luot responsiivisia verkkosivustoja, joiden on näytettävä hyvältä ja toimittava hyvin useilla eri näytöillä ja laitteilla. Voit skaalata SVG-tiedostoja ylös- tai alaspäin vastaamaan responsiivisen verkkosivustosi muuttuviin koko- ja asettelutarpeisiin tinkimättä niiden laadusta millään tavalla.
Yleensä SVG-tiedostot ovat tasaisempia ja terävämpiä kuin muiden muotojen kuvat, koosta riippumatta.
Tiedoston koko
Yksi haaste rasterikuvien (esim. JPG, PNG, GIF) käyttämisessä responsiivisilla verkkosivustoilla on tiedostokoko. Koska rasterikuvat eivät skaalaudu samalla tavalla kuin vektorikuvat, sinun on toimitettava pikselipohjaiset kuvat suurimmassa koossa, jossa ne näytetään. Tämä johtuu siitä, että voit aina pienentää kuvaa ja säilyttää sen laadun, mutta sama ei päde kuvien suurentamiseen. Tuloksena on kuvia, jotka ovat paljon suurempia kuin katselukoko ja pakottavat selaimet lataamaan suuria tiedostoja.
Päinvastoin, vektorigrafiikka on skaalattavissa, joten voit käyttää hyvin pieniä tiedostokokoja riippumatta siitä, kuinka suuria kuvia on ehkä näytettävä. Tämä optimoi lopulta sivuston yleisen suorituskyvyn ja latausnopeuden.
CSS-tyyli
Voit helposti lisätä SVG:n suoraan sivun HTML-koodiin. Tämä tunnetaan nimellä inline SVG. Yksi upotetun SVG:n käytön etu on, että koska selain itse piirtää grafiikan, kuvatiedoston hakemiseen ei tarvita
Toinen etu: Voit muotoilla sisäänrakennetun SVG:n CSS:n avulla. Haluatko vaihtaa SVG-kuvakkeen väriä? Sen sijaan, että muokkaat kuvaa grafiikan muokkausohjelmistossa ja sitten vietät ja lataat tiedoston uudelleen, voit muuttaa SVG-tiedoston yksinkertaisesti muutamalla CSS-rivillä. CSS:n avulla voit muuttaa SVG-tiedostoja myös leijutustiloja ja muita suunnittelutarpeita varten.
Bottom Line
Koska voit muotoilla upotettuja SVG-tiedostoja CSS:llä, voit käyttää niissä myös CSS-animaatioita. CSS-muunnokset ja -siirtymät ovat kaksi helppoa tapaa lisätä eloa SVG-tiedostoihin. Voit saada rikkaita Flashin k altaisia kokemuksia sivulla ilman Flashia, jota iPad ei enää tue. Itse asiassa Adobe luopuu Flashista asteittain vuoden 2020 loppuun mennessä.
SVG:n käyttö
Niin tehokkaita kuin SVG:t ovatkin, ne eivät voi korvata kaikkia muita kuvamuotoja. Valokuvien, jotka vaativat runsaasti värisyvyyttä, tulisi silti olla JPG- tai PNG-muodossa, mutta yksinkertaiset kuvat, kuten kuvakkeet, sopivat täydellisesti SVG-muotoon.
SVG sopii myös joihinkin monimutkaisiin kuviin, kuten kaavioihin, kaavioihin ja yritysten logoihin. Kaikki nämä grafiikat hyötyvät siitä, että ne ovat skaalautuvia ja niitä voidaan muotoilla CSS:n avulla.
Tuki vanhemmille selaimille
Nykyinen SVG-tuki on erittäin hyvä nykyaikaisissa verkkoselaimissa. Ainoat selaimet, jotka eivät tue näitä grafiikoita, ovat Internet Explorerin vanhat versiot (jota Microsoft ei enää tue) ja muutama vanha Android-versio. Kaiken kaikkiaan hyvin pieni osa selaimista käyttää edelleen näitä selaimia, ja määrä pienenee edelleen. Tämä tarkoittaa, että voit käyttää SVG:tä verkkosivustollasi huoletta.
Jos haluat tarjota varaosan SVG:lle, käytä työkalua, kuten Filament Groupin Grumpicon. Tämä resurssi luo PNG-tiedostoja SVG-kuvatiedostoistasi.
