Mikä on SVG? Milloin käyttää SVG:tä ja milloin PNG:tä?

Mikä SVG-tiedosto on?

SVG on lyhenne sanoista Scalable Vector Graphics eli skaalautuva vektorigrafiikka. Pelkän värillisten pikselien ruudukon sijaan tiedosto voi kuvata muotoja, polkuja, täyttövärejä ja tekstiä. Selain tai piirto-ohjelma piirtää kuvan näiden ohjeiden perusteella haluttuun kokoon. SVG:n tekeminen ei edellytä koodaamista: vektorigrafiikkaa käsittelevä suunnitteluohjelma voi viedä kuvan SVG-muotoon.

Ajattele ympyrän muotoista logoa. SVG voi määrittää ympyrän ja sen värin, kun taas PNG tallentaa ympyrän muodostavat pikselit tietyssä koossa. SVG:stä voidaan piirtää suurempi ympyrä, jonka reuna säilyy tasaisena. PNG:n suurentaminen jakaa olemassa olevat pikselit suuremmalle alueelle, mikä voi pehmentää reunaa. MDN:n SVG-esittely kertoo tarkemmin formaatin toiminnasta.

SVG ja PNG: erot käytännössä

Kumpikaan muoto ei ole aina pienempi. Yksityiskohtainen SVG, jossa on tuhansia polkuja, voi olla sopivaa PNG:tä suurempi. Vertaa todellisia tiedostoja ja tarkista, että käyttökohde hyväksyy ne. Valokuville kannattaa harkita JPG:tä, WebP:tä tai AVIF:iä sen sijaan, että käyttäisit SVG:tä valokuvien pakkausmuotona.

Milloin SVG on hyvä valinta?

Verkkosivun yläosassa, esityksessä ja suuressa mainosbannerissa käytettävä logo hyötyy vektorimuotoisesta alkuperäisestä. SVG sopii myös kuvakkeille ja yksinkertaisille kaavioille, joita tarvitaan useassa koossa. Tarkista silti pienin versio: terävä piirtojälki ei tee pikkuruisesta tekstistä luettavaa tai estä ohuita viivoja jäämästä vaikeasti havaittaviksi.

SVG voi sisältää tavallisen pikselikuvan, kuten PNG:n tai JPG:n. Tällaisen kuvan tarkkuus säilyy alkuperäisenä. Pienen valokuvan upottaminen SVG:hen ei palauta yksityiskohtia eikä muuta sitä vektorimuodoiksi. Myöskään .png-päätteen vaihtaminen .svg:ksi ei muuta tiedoston kuvamuotoa.

Kuvakoko, viewBox ja tyhjä tila

Leveys ja korkeus kertovat kuvan mitat. viewBox määrittää koordinaattialueen, johon kuvan sisältö sijoitetaan. Se auttaa sovittamaan piirroksen siihen tilaan, jossa kuva näytetään. Se ei ole tiedostokoon asetus. MDN:n viewBox-ohje selittää näiden määrittelyjen suhteen.

Jos logo näyttää pieneltä suuren tyhjän alueen keskellä, tarkista suunnitteluohjelmasi piirtoalueen tai sivun rajat. Koko sivun vieminen voi tallentaa myös piirroksen ympärille jäävän tyhjän tilan. Sovita sivu tarvittaessa kuvan sisältöön, mutta jätä tilaa reunaviivoille ja varjoille. Pelkkä näyttöleveyden suurentaminen suurentaa myös tyhjää tilaa.

SVG verkkosivulla

Tavallinen verkkosivun logo voidaan julkaista SVG-kuvatiedostona. Anna merkityksellisille kuville kuvaava vaihtoehtoinen teksti ja varaa asettelussa oikea leveys ja korkeus. Koristekuville kuuluu tyhjä vaihtoehtoinen teksti. Esimerkkejä löydät alt-tekstiä käsittelevästä oppaasta.

Se, että selain näyttää SVG:n, ei tarkoita kaikkien sisällönhallintajärjestelmien tai latauslomakkeiden hyväksyvän sitä. Tarkista julkaisualustasi säännöt ennen lopullisen kuvamuodon valintaa. Kuvaelementtinä käytettävä SVG toimii myös eri tavalla kuin suoraan sivun rakenteeseen upotettu SVG: kuvatilassa komentosarjojen suorittamista ja ulkoisten resurssien lataamista rajoitetaan. MDN:n ohje SVG:n käytöstä kuvana selittää rajoitukset. Käytä luotettavasta lähteestä saatua grafiikkaa ja alustasi tukemaa julkaisutapaa.

Valmistele SVG jaettavaksi

• Vie haluamasi kuvasisältöä vastaava alue, älä tarpeettoman suurta sivua.
• Sisällytä linkitetyt kuvat ja tarvittavat tyylit tiedostoon, jotta kuva ei ole riippuvainen erillisistä tiedostoista.
• Jos tekstin pitää näyttää täsmälleen samalta toisella laitteella, muunna se poluiksi suunnitteluohjelmassasi. Säilytä muokattava alkuperäinen, sillä poluiksi muutettua tekstiä ei enää voi muokata tavallisena tekstinä.
• Poista käyttämättömät objektit ja tarpeettomat ohjelman lisäämät tiedot kopiosta. Tarkista tulos ennen alkuperäisen korvaamista.
• Avaa viety SVG aiotussa sovelluksessa tai verkkosivulla ja tarkista reunat, teksti, tausta sekä mahdollisesti puuttuvat elementit.

Tekstin muuttaminen poluiksi voi lisätä polkujen määrää ja kasvattaa tiedostokokoa. Polkujen liiallinen yksinkertaistaminen voi muuttaa piirrosta. Arvioi optimointia lopputulosta vertaamalla sen sijaan, että poistaisit tietoja harkitsematta. Pixilon SVG → PNG -työkalu luo pikselikuvan. Se ei optimoi SVG:tä eikä tuota pienempää SVG-tiedostoa.

Milloin tarvitset PNG-kopion?

Tee PNG, kun vastaanottava palvelu vaatii sitä, tarvitset kuvakaappauksen kaltaisen staattisen kopion tai kuva tarvitsee tietyt pikselimitat. Vie kuva alkuperäisestä SVG:stä vaadittuun kokoon. PNG ei säilytä vektoripolkuja tai vuorovaikutteisia toimintoja, ja sen myöhempi suurentaminen voi sumentaa kuvaa. Säilytä SVG tulevia tallennuksia varten.

SVG → PNG -työkalulla voit valita pikselimitat ja säilyttää läpinäkyvät alueet tai lisätä yksivärisen taustan. Työkalusivu kertoo kokorajoista, fonteista ja sisällöstä, jota ei tueta. Läpinäkyvän taustan valinta säilyttää olemassa olevan läpinäkyvyyden. Se ei poista SVG:hen piirrettyä taustamuotoa.

Ennen kuvan julkaisemista tai lähettämistä

1. Varmista, mitkä kuvamuodot käyttökohde hyväksyy.
2. Säilytä SVG, kun vektorimuodoista ja joustavasta koon muuttamisesta on hyötyä. Tee PNG, kun käyttökohde tarvitsee pikselikuvan.
3. Tarkista kuvan rajat, fontit ja mahdolliset upotetut kuvat.
4. Katso lopullista tiedostoa sen aiotussa näyttökoossa ja sillä taustalla, jolla kuvaa käytetään.
5. Vertaa tiedostokokoja, jos latausnopeus on tärkeä, ja säilytä muokattava alkuperäinen.