PNG vai SVG: kumpi muoto sopii mihin?

1. Ydinero: pikseliruudukko vai matemaattiset polut

PNG on rasteri: se pilkkoo kuvan yksittäisiin pikseleihin ja tallentaa jokaisen värin. PNG:n suurentaminen vain venyttää pikseleitä, minkä vuoksi syntyy siksakut ja epäterävyys. SVG on vektorigraafikka: se kuvaa muodot matemaattisin ohjein, kuten koordinaatteina ja Bezier-käyrinä, ja selain piirtää kuvan uudelleen uuteen kokoon, joten se pysyy terävänä missä tahansa mittakaavassa. Tämä yksi seikka on lähes kaikkien erojen juuri.

Läpinäkyvyydessä PNG tukee alfakanavaa ja voi tallentaa läpinäkyvän taustan. SVG on luonnostaan läpinäkyvä – niin kauan kuin et piirrä taustasuorakulmiota, kaikki graafikon ulkopuoli pysyy läpinäkyvänä. Sivun lisänä: JPG ei tue läpinäkyvyyttä lainkaan, sen valkoinen tausta on oikeasti piirretty väri.

2. Tiedoston koko ja latausnopeus

Yksinkertaisille kuvakkeille ja logoille SVG on usein vain muutaman kB, ja yksi tiedosto sopii kaikkiin näyttötiheyksiin. PNG sen sijaan tarvitsee yleensä @2x- ja @3x-versiot pysyäkseen terävänä Retina-näytöillä, mikä moninkertaa tiedoston koon. Valokuvissa tilanne on käänteinen: valokuvien värisävyt ovat äärimmäisen runsaita, eikä pakotettu vektorointi tuota kuin valtavan määrän polkuja, jolloin SVG päätyy huomattavasti JPG:tä tai WEBP:tä suurempiksi eikä muunnosta kannata.

Syynä on pakkausperiaate. PNG tallentaa pikselit häviöttömästi, joten mitä monimutkaisempi kuva, sitä suurempi tiedosto. SVG on pelkkää tekstiä, jossa toistuvat polkukäskyt ja koordinaatit pakkaavat äärimmäisen hyvin. Siksi kaksi formaattia, joista molemmat ovat häviöttömiä, käyttäytyvät koossa täysin eri tavalla.

Käyttötapaus	Suositeltu muoto	Miksi
Verkkosivun kuvakkeet / logot	SVG	Yksi tiedosto kaikkiin resoluutioihin ja värit vaihtuvat CSS:llä
Valokuvat	JPG / WEBP	Pieni koko ja valokuvan tarkkuus
Kuvakaappaukset	PNG	Pikselitarkka ja häviöttömästi pakattu
Dataa esittävät kaaviot	SVG	Terävä skaalautuessa ja helposti vuorovaikutteinen
Some-alustojen kuvakkeet	PNG / JPG	Alustat hyväksyvät yleensä vain rasteja

3. Milloin kannattaa käyttää PNG:tä

• Valokuvat, monimutkainen valaistus ja hienovaraiset liukuvärit;
• Kuvakaappaukset ja käyttöliittymien tilannekuvat, joiden on oltava pikselitarkkoja;
• Paikat, joissa alusta hyväksyy vain rasteja, esimerkiksi kuvakkeen lataus joillakin ylläpitojärjestelmillä;
• Varmuusratkaisu yhteensopivuuteen: hyvin vanhat ympäristöt, jotka eivät tue SVG:tä.

4. Milloin kannattaa käyttää SVG:tä

• Verkkosivujen kuvakkeet ja logot: yksi tiedosto kaikkiin resoluutioihin, edelleen terävä Retina-näytöillä;
• Grafiikka, jonka värit halutaan vaihtaa CSS:llä tai JavaScriptillä ja joka piirretään viivanpiirtotyyliin;
• Dataa esittävät kaaviot: visualisointikirjastot kuten ECharts tuottavat oletuksena SVG:tä;
• Paino, laserkaiverrus ja vinyleikkaus, joissa laite lukee vektoripolkuja.

5. Voiko PNG:n ja SVG:n muuntaa toisikseen?

Voit. PNG → SVG: käytä PolySVG:n PNG → SVG -työkalua tai Kuva → SVG -työkalua, lataa tiedosto ja napsauta luontia, niin kuva vektoroidaan – kuvakkeet ja logot onnistuvat erinomaisesti, valokuvat saavat piirroksellisen ilmeen. Muunnus on ilmainen, ja läpinäkyvä PNG säilyttää läpinäkyvän taustansa. Tuloksena oleva SVG voidaan avata edelleen editorissa värin vaihtoa ja taustan poistoa varten, mikä täydentää työskentelynkierteen. SVG → PNG: avaa tiedosto verkkopohjaisessa SVG-editorissa ja vie PNG haluamallasi resoluutiolla – täydellinen asiakirjoihin tai esikatselukuviin.

Muistettavaa on, ettei PNG → SVG ole pelkkä tallennus toisella päätteellä vaan vektorointi, joka piirtää ääriviivat uudelleen. Graafiset materiaalit saavat siistit polut, valokuvat tiivistyvät värilohkoiksi. Tarkista lopputulos työkalusta etukäteen ja varmista, että tyyli vastaa odotuksiasi ennen lataamista.

Yksi sääntö: kuvakkeet, logot ja kaaviot valitse SVG; valokuvat ja kuvakaappaukset valitse PNG/JPG/WEBP. Jos epäilet, suosi SVG:tä graafisessa sisällössä. Lisätietoa saat artikkeleista Mikä on SVG ja Kolme tapaa muuntaa kuva SVG:ksi.