Skaalautuva vektorigrafiikka eli SVG on tärkeä rooli verkkosivustojen suunnittelussa nykyään. Jos et tällä hetkellä käytä SVG:tä web-suunnittelussasi, tässä on muutamia syitä, miksi sinun kannattaa aloittaa sillä, sekä varavaihtoehtoja, joita voit käyttää vanhemmille selaimille, jotka eivät tue näitä tiedostoja.
Ratkaisu
SVG:n suurin etu on resoluutioriippumattomuus. Koska SVG-tiedostot ovat vektorikuvia (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 monenlaisilla näytöillä ja laitteilla. Voit skaalata SVG-tiedostoja ylös tai alas vastaamaan responsiivisen verkkosivustosi muuttuviin koko- ja asettelutarpeisiin tinkimättä sen laadusta millään tavalla. Yleensä SVG-tiedostot näyttävät tasaisemmilta ja terävämmiltä kuin muiden muotojen kuvat, koosta riippumatta.
Tiedoston koko
Yksi haaste käytettäessä rasterikuvia (esim. JPG, PNG, GIF) responsiivisilla verkkosivustoilla on tiedostokoko. Koska rasterikuvia ei skaalata kuten vektorikuvia, sinun on annettava pikselipohjaiset kuvat suurimmassa koossa, jossa ne näkyvät. Tämä johtuu siitä, että voit aina pienentää kuvaa ja säilyttää sen laadun, mutta samaa ei voida sanoa kuvien suurentamisesta. Tuloksena on kuvia, jotka ovat paljon suurempia kuin niiden katselukoko, ja se pakottaa selaimet lataamaan suuria tiedostoja. Sitä vastoin vektorikuvat ovat skaalautuvia, joten voit käyttää erittäin pieniä tiedostokokoja riippumatta siitä, kuinka suuria kuvien pitäisi näkyä. 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ää kuvat, kuvatiedoston hakemiseen ei tarvita HTTP-pyyntöä. Toinen etu: voit alustaa SVG:n sisäänpäin CSS:n avulla. Haluatko muuttaa SVG-kuvakkeen väriä? Sen sijaan, että muokkaat tätä kuvaa grafiikan muokkausohjelmistossa ja sitten vietät tiedoston uudelleen ja lataat sen uudelleen, voit helposti muokata SVG-tiedostoa muutamalla CSS-rivillä. CSS:n avulla voit myös muokata leijuustilan SVG-tiedostoja ja muita suunnittelutarpeita.
Animaatiot
Koska voit muotoilla SVG-tiedostoja CSS:n avulla, voit käyttää niissä myös CSS-animaatioita. CSS-muunnokset ja -siirrot ovat kaksi helppoa tapaa herättää SVG:t eloon. Voit saada rikkaita Flash-tyyppisiä kokemuksia sivulla ilman Flashia, jota iPad ei enää tue. Itse asiassa Adobe lopettaa Flashin vaiheittaisen käytön vuoden 2020 loppuun mennessä.
SVG:tä käyttämällä
Vaikka SVG:t ovatkin tehokkaita, ne eivät voi korvata muita kuvamuotoja. Valokuvien, jotka vaativat runsaasti värisyvyyttä, tulisi silti olla JPG- tai PNG-muodossa, mutta yksinkertaiset kuvat, kuten kuvakkeet, sopivat täydellisesti tulostettavaksi SVG-muodossa. SVG sopii myös joihinkin monimutkaisiin kuviin, kuten kaavioihin, kaavioihin ja yritysten logoihin. Kaikki nämä kuvat hyödyntävät skaalautuvuutta, ja niitä voidaan muokata CSS:n avulla.
Tuki vanhemmille selaimille
Nykyinen SVG-tuki on erittäin hyvä nykyaikaisissa verkkoselaimissa. Ainoat selaimet, jotka eivät tue näitä kuvia, ovat Internet Explorerin vanhat versiot (versio 8 ja vanhempi) ja jotkin vanhat Android-versiot. Kaiken kaikkiaan hyvin pieni osa selaimista käyttää edelleen näitä selaimia, ja tämä määrä pienenee edelleen. Tämä tarkoittaa, että voit käyttää SVG:tä verkkosivustollasi ilman huolta. Jos haluat tarjota varaosan SVG:lle, käytä työkalua, kuten Filament Groupin Grumpicon. Tämä resurssi luo PNG-tiedostoja SVG-kuvatiedostoistasi.