Ilmainen muunnin

PNG kohteeseen SVG Vectorizer

Muunna rasteri-PNG/JPG-kuvat skaalautuvaksi Vector SVG -grafiikaksi. Turvallinen, nopea ja kokonaan selaimessa käsitelty.

Vedä ja pudota PNG/JPG tähän

Tukee jopa 50 Mt

Tai

Tietoa tästä työkalusta

PNG:n muuntaminen SVG:ksi on pohjimmiltaan jäljitystoimintoa, ei muodon muutosta. PNG tallentaa pikseliä; SVG tallentaa geometriset primitiivit. Siirtyminen pikseliruudukosta skaalautuviin vektoripolkuihin edellyttää bittikartan tulkitsemista ja likimääräisten muotojen piirtämistä samanväristen alueiden ympärille. Tulos on aidosti skaalautuva – voit muuttaa kokoa vapaasti ilman pikseliä – mutta se ei ole täydellinen kopio lähteestä. Valokuvasisällön jäljitys on huono, koska jokaisesta pikselitason värivariaatiosta tulee muoto, joka tuottaa valtavia SVG-tiedostoja, jotka kumoavat tarkoituksen. Logot, kuvakkeet, viivapiirrokset ja korkeakontrastiset grafiikat jäljittelevät selkeästi, koska niissä on pieni määrä värialueita, joilla on hyvin määritellyt rajat.

Tämä muunnin käyttää imagetracerjs-kirjastoa, JavaScript-porttia vektorinseurantaalgoritmeille, jotka ovat samanlaisia ​​kuin potrace. PNG dekoodataan RGBA-bittikartaksi, bittikartta segmentoidaan värialueisiin konfiguroitavan paletin avulla, kunkin alueen raja jäljitetään poluksi, polut yksinkertaistetaan Bezier-approksimaatiolla ja tuloksena olevat polut lähetetään SVG-polkuelementteinä. Koko putki toimii selaimessasi ilman palvelimen latausta.

Jäljitysparametrit säätelevät tarkkuuden ja tiedostokoon välistä kompromissia. Enemmän värejä ja hienompia yksityiskohtia tuottavat suuremman SVG:n, joka vastaa paremmin lähdettä; vähemmän värejä ja karkeampi jäljitys tuottaa pienemmän SVG:n, jossa on tyylitellympi tunnelma. Oletusasetukset on viritetty logoille ja kuvakkeille; monimutkaiset kuvat voivat hyötyä jäljityspassista säädetyillä asetuksilla, tai ne eivät yksinkertaisesti ole hyviä kandidaatteja vektorointiin.

Miksi muuntaa PNG SVG:ksi

PNG:n vektorointi on hyödyllisintä, kun kuva täytyy skaalata alkuperäistä resoluutiota pidemmälle. Erityisesti logot saapuvat usein PNG-muodossa vaatimattomina, ja niiden on näytettävä terävinä mainostauluilla, verkkokalvonäytöillä ja suurikokoisissa tulosteissa. Vektorijäljitys tuottaa SVG:n, joka skaalautuu ilman laadun heikkenemistä; kompromissi on uskollisuus alkuperäisille pikseleille.

SVG on myös huomattavasti PNG:tä kompaktimpi grafiikoille, joissa on vähän värejä ja suuria litteitä alueita. PNG-kuvake, jonka koko on 256 × 256, voi olla 8 kt; vastaava SVG kahdella tai kolmella värillä on usein alle 1 kt. Verkkokäyttöliittymään toimitettujen käyttöliittymäkuvakekirjastojen vektoriversiot pienentävät nippukokoa ja parantavat kaikkien näyttötiheyksien terävyyttä.

Käyttöohjeet

Pudota PNG, valitse jäljitysasetukset ja luo SVG.

  1. Lataa PNG: Vedä tiedosto latausalueelle tai selaa napsauttamalla. Parhaat tulokset saadaan PNG-kuvista, joissa on terävät reunat ja pieni määrä erillisiä värejä – logoja, kuvakkeita, viivapiirroksia, yksinkertaisia ​​kuvia. Valokuvat jäljittävät huonosti ja tuottavat valtavia SVG-tiedostoja.
  2. Säädä jäljitysasetuksia tarvittaessa: Värien määrä määrittää, kuinka monta eri väriä tulosteessa näkyy. Polun yksinkertaistaminen (kutsutaan myös nimellä ltres tai qtres) ohjaa kuinka aggressiivisesti algoritmi tasoittaa kulmia. Suurempi tarkkuus tuottaa SVG:t lähempänä lähdettä, mutta enemmän polkudataa.
  3. Jäljitys ja esikatselu: Imagetracerjs-algoritmi käy läpi värien kvantisoinnin, reunantunnistuksen, ääriviivojen jäljityksen ja Bezier-sovituksen. Jäljitysaika-asteikot kuvan koon ja värien lukumäärän mukaan. 256 × 256 logo, jossa 4 väriä jälkiä alle sekunnissa; 1024×1024-kuva 16 värillä voi kestää useita sekunteja.
  4. Lataa SVG: Tallenna SVG laitteellesi. Tiedosto sisältää XML-merkinnät polkuelementeillä; voit avata sen missä tahansa tekstieditorissa tarkastaaksesi tai säätääksesi tulosta käsin.

Yleiset käyttötapaukset

Tekniset tiedot

imagetracerjs toteuttaa monivaiheisen liukuhihnan: värikvantisointi vähentää bittikartan kiinteään määrään värejä käyttämällä k-keskiarvoklusterointia tai mediaanileikkausta; reunantunnistus tunnistaa pikselirajat alueiden välillä; ääriviivojen jäljitys seuraa rajoja tuottaakseen suljettuja polygoneja; viiva- ja käyräsovitus approksimoi polygoneja Bezier-käyrillä polkutietojen vähentämiseksi.

Tärkeimmät algoritmiparametrit ovat värien lukumäärä (tyypillinen: 4–32), patomitti (tätä lyhyemmät polut hylätään kohinaksi), ltres (viivatoleranssi – kuinka pitkälle reuna voi poiketa ennen kuin se jaetaan uudeksi segmentiksi) ja qtres (neliökäyrän toleranssi – kuinka aggressiivisia käyrät ovat). Oletusasetukset toimivat hyvin logoille; monimutkaiset kuvat hyötyvät kuvakohtaisesta virityksestä.

Lähtö on standardi SVG 1.1 polkuelementeillä. Jokaisesta värialueesta tulee yksi polku täyttömääritteellä. Tuloksena oleva tiedosto avautuu missä tahansa selaimessa, vektorieditorissa tai SVG-tietoisessa suunnittelutyökalussa. Tiedoston koko riippuu ensisijaisesti polkujen määrästä ja solmun tiheydestä; tyypillinen jäljitetty logo on 1–10 kt.

Parhaat käytännöt

Usein kysytyt kysymykset

Onko SVG-tulostus todellinen vektoritiedosto?
Työkalu jäljittää rasterikuvaa vektoripolkujen luomiseksi. Tulokset toimivat parhaiten käyttämällä yksinkertaista grafiikkaa, logoja ja viivapiirroksia. Valokuvat tuottavat monimutkaisia ​​polkuja, eivätkä ne välttämättä näytä odotetulta.
Mikä tekee SVG:stä eron muista kuvamuodoista?
SVG on vektorimuoto – kuvat kuvataan matemaattisiksi muodoiksi eikä pikseleiksi. Tämä tarkoittaa, että SVG-tiedostot skaalautuvat mihin tahansa kokoon laadun heikkenemättä, ja ne ovat yleensä paljon pienempiä kuin rasterikuvat grafiikkaa, kuten logoja ja kuvakkeita, varten.
Onko olemassa mitään rajoituksia, jotka on tiedostettava?
50 Mt:n tiedostot ovat tuettuja. Erittäin suurten tai monimutkaisten tiedostojen käsittely voi kestää kauemmin. Kaikki muunnos tapahtuu selaimessasi, joten käsittelynopeus riippuu laitteestasi.
Pidetäänkö kuvani yksityisinä muuntamisen aikana?
Kyllä. PNG-tiedostosi käsitellään kokonaan selaimessasi Canvas API:n ja JavaScriptin avulla. Mitään ei ladata millekään palvelimelle – tiedosto siirtyy suoraan laitteeltasi muuntimeen ja takaisin laitteellesi.
Onko jäljitys muokattavissa Illustratorissa tai Inkscapessa?
Kyllä. Lähtö on vakio-SVG polkuelementeillä. Sekä Illustrator että Inkscape avaavat sen natiivisti ja antavat sinun muokata polkuja, vaihtaa värejä ja tarkentaa tulosta.
Onko minun PNG ladattu palvelimelle?
Ei. Jäljitys tapahtuu selaimessasi imagetracerjs-ohjelman avulla. Tiedosto ei poistu laitteestasi.
Miksi SVG-tiedostoni on valtava?
Yleensä siksi, että lähdekuvassa on liikaa värejä tai liian paljon hienoja yksityiskohtia. Kokeile vähentää värien määrää, lisätä polun yksinkertaistamista tai käyttää toista lähdekuvaa puhtaamman geometrian kanssa.
Voinko jäljittää PNG:n läpinäkyvyydellä?
Kyllä. Läpinäkyvistä pikseleistä tulee alueita, joissa ei ole polkuja SVG:ssä. Läpinäkyvä tausta säilyy, kun SVG renderöidään millä tahansa taustavärillä.