SVG-PNG-muunnin

Muuta skaalautuvat SVG-vektorit käyttövalmiiksi PNG-kuviksi

SVG-tiedosto on joukko ohjeita, ei valmis kuva. Avaa yksi tekstieditorissa, ja löydät XML:ää, joka kuvaa polkuja, muotoja, täyttöjä ja käyriä — reseptin, jota selain seuraa piirtääkseen taideteoksen tuoreena missä tahansa pyytämässäsi koossa. PNG on päinvastainen: ruudukko värillisiä pikseleitä jäädytettynä kiinteään leveyteen ja korkeuteen. Toisen muuntamista toiseksi kutsutaan rasteroinniksi, ja tämä työkalu tekee sen kokonaan selaimessasi. Valitset lähtökoon, SVG maalataan HTML-canvasille, ja PNG palautuu — yksikään tiedosto ei koskaan poistu laitteeltasi.

Vektori versus rasteri, selkokielellä

Ydinero on siinä, miten resoluutiota käsitellään. Koska SVG tallentaa matematiikkaa pikselien sijaan, se on resoluutiosta riippumaton: skaalaa logo suosikkikuvakkeesta mainostauluksi, ja jokainen reuna lasketaan uudelleen pysyäkseen matemaattisesti terävänä. PNG:llä ei ole tällaista vapautta. Sen pikselit on paistettu sisään, joten sen suurentaminen yli alkuperäisen koon pakottaa katsojan venyttämään olemassa olevia pisteitä, ja alat nähdä sumeutta ja portaikkoefektiä, joka paljastaa rasterikuvat.

Tämä kompromissi leikkaa molempiin suuntiin. Vektorit ovat ylivoimaisia logoille, kuvakkeille ja siisteistä muodoista koostuville tasokuvituksille, ja tiedostot ovat yleensä pieniä. Rasterimuodot kuten PNG käsittelevät liukuvärejä, pehmeitä varjoja ja valokuvamaista yksityiskohtaa luonnollisemmin, ja — olennaisesti — ne ymmärtää käytännössä kaikki. Kun rasteroit, vaihdat SVG:n äärettömän skaalautuvuuden PNG:n universaaliin yhteensopivuuteen yhdessä valitussa koossa.

Miksi SVG rasteroidaan ylipäätään?

Jos SVG skaalautuu niin kauniisti, miksi muuntaa se? Yhteensopivuus on tavallinen vastaus. Monet paikat eivät yksinkertaisesti hyväksy SVG:tä: monet sähköpostiohjelmat poistavat tai kieltäytyvät renderöimästä sitä, asiakirjaeditorit ja esitysohjelmistot haluavat usein litteän kuvan, markkinapaikat ja mainosverkostot vaativat PNG:tä tai JPG:tä, ja useimmat sosiaaliset alustat jättävät vektorilataukset kokonaan huomiotta. Jotkin sisällönhallintajärjestelmät myös estävät SVG:n suoraan turvallisuussyistä, koska muoto voi upottaa skriptejä.

Toinen syy on se, että joskus haluat kiinteäkokoisen resurssin. Sovelluskuvakkeet, pikkukuvat, Open Graph -esikatselukuvat ja painetut materiaalit odottavat kaikki tarkkoja pikselimittoja. PNG lukitsee taideteoksen tähän tavoitteeseen, jotta se renderöityy identtisesti kaikkialla, ilman yllätyksiä katsojalta, joka tulkitsee vektorin eri tavalla. Lähde-SVG:si muuntaminen alustan vaatimiin tarkkoihin kokoihin on usein siistein tie johdonmukaiseen tulokseen.

Oikean vientiresoluution valitseminen

Koska PNG ei voi skaalautua ylöspäin sulavasti, koolla jota käytät viennissä on enemmän merkitystä kuin millään vektorilla. Vie liian pienenä, ja kuva näyttää pehmeältä moderneilla näytöillä; vie tarpeettoman suurena, ja tuhlaat kaistanleveyttä. Yksinkertainen nyrkkisääntö: päätä suurin koko, jossa kuvaa koskaan näytetään, ja renderöi vähintään sen verran, ja mieluiten enemmän korkean tiheyden näytöille.

Vakionäytöt pärjäävät hyvin 1x:llä — taideteoksen nimellisellä koolla. Korkean DPI:n ja Retina-näytöt pakkaavat suunnilleen kaksinkertaisen määrän pikseleitä samaan tilaan, joten 2x-vienti pitää kuvakkeet ja grafiikan terävinä sumeuden sijaan. Tulostukselle, julisteille tai hyvin suurille näytöille 3x tai 4x antaa liikkumavaraa. Koska lähde on vektori, suuremman vienti ei maksa sinulle mitään laadussa — käyrät vain lasketaan uudelleen korkeammalla pikselimäärällä ennen litistämistä. Kun epäilet, renderöi anteliaan kokoisena; voit aina skaalata suuren PNG:n pienemmäksi, mutta et koskaan voi palauttaa yksityiskohtaa skaalaamalla pientä suuremmaksi.

Läpinäkyvyys kulkee mukana

PNG tukee täyttä alfakanavaa, mikä tarkoittaa, että läpinäkyvyys säilyy muunnoksessa. Jos SVG:sSäsi ei ole taustatäyttöä, syntyvä PNG pitää nuo alueet läpinäkyvinä, joten logo tai kuvake laskeutuu siististi mille tahansa värille ilman rumaa valkoista laatikkoa ympärillä. Jos tarvitset kiinteän taustan sen sijaan, anna SVG:lle sellainen ennen muuntamista. Kummassakin tapauksessa se, mitä näet vektorissa, on se, mitä PNG säilyttää, mikä on juuri syy siihen, että PNG — eikä JPG — on luonnollinen kohde kuvakkeille, merkeille ja peittokuville.

Kaikki pysyy laitteellasi

Tämä muunnin toimii paikallisena koodina selaimessasi käyttäen canvas-rajapintaa. SVG:si luetaan, piirretään ja viedään koskaan lähettämättä sitä palvelimelle, joten latausta, jonoa tai kopiota taideteoksestasi jonkun toisen tallennustilassa ei ole. Se on sinulle nopeampaa ja turvallisempaa kaikelle, jota mieluummin et antaisi kolmannelle osapuolelle, julkaisemattomasta brändäyksestä sisäisiin kaavioihin. Kun olet valmis täällä, tutustu muihin kuvatyökaluihimme — jos rakennat Windows- tai suosikkikuvakeresurssia, PNG-ICO-muunnin on luonnollinen seuraava askel.

Usein kysytyt kysymykset