Zdarma převodník

PNG do Vectorizer SVG

Převeďte rastrové obrázky PNG/JPG na škálovatelnou vektorovou grafiku SVG. Bezpečné, rychlé a zpracované výhradně ve vašem prohlížeči.

Sem přetáhněte PNG/JPG

Podporuje až 50 MB

Nebo

O tomto nástroji

Převod PNG na SVG je v zásadě operace sledování, nikoli změna formátu. PNG ukládá pixely; SVG ukládá geometrická primitiva. Přechod z pixelové mřížky na škálovatelné vektorové cesty vyžaduje interpretaci bitmapy a kreslení přibližných tvarů kolem oblastí podobné barvy. Výsledek je skutečně škálovatelný – velikost můžete libovolně měnit bez pixelace – ale není to dokonalá reprodukce zdroje. Fotografický obsah se špatně sleduje, protože každá barevná variace na úrovni pixelu se stává tvarem a vytváří obrovské SVG, které maří účel. Loga, ikony, čárová grafika a vysoce kontrastní grafika jsou čisté, protože mají malý počet barevných oblastí s dobře definovanými hranicemi.

Tento konvertor používá knihovnu imagetracerjs, JavaScriptový port algoritmů pro sledování vektorů podobných potrace. PNG je dekódován do bitmapy RGBA, bitmapa je segmentována do barevných oblastí pomocí konfigurovatelné palety, hranice každé oblasti jsou vysledovány do cesty, cesty jsou zjednodušeny pomocí Bézierovy aproximace a výsledné cesty jsou vydávány jako prvky cesty SVG. Celý kanál běží ve vašem prohlížeči bez jakéhokoli nahrávání serveru.

Parametry trasování řídí kompromis mezi věrností a velikostí souboru. Více barev a jemnější detaily vytvářejí větší SVG, které více odpovídá zdroji; méně barev a hrubší trasování vytváří menší SVG s více stylizovaným dojmem. Výchozí nastavení je vyladěno pro loga a ikony; složité obrázky mohou těžit z trasovacího průchodu s upraveným nastavením nebo jednoduše nemusí být vhodnými kandidáty pro vektorizaci.

Proč převádět PNG na SVG

Vektorizace PNG je nejužitečnější, když potřebujete změnit měřítko obrázku nad jeho původní rozlišení. Zejména loga často přicházejí jako PNG ve skromné ​​velikosti a musí vypadat jasně na billboardech, sítnicových displejích a velkoformátových výtiscích. Vektorové trasování vytváří SVG, které se mění bez ztráty kvality; kompromisem je věrnost původním pixelům.

SVG je také výrazně kompaktnější než PNG pro grafiku s malým počtem barev a velkými plochými oblastmi. Ikona PNG v rozlišení 256×256 může mít velikost 8 kB; ekvivalentní SVG se dvěma nebo třemi barvami má často méně než 1 kB. U knihoven ikon uživatelského rozhraní dodávaných do webového rozhraní vektorové verze zmenšují velikost balíčku a zlepšují ostrost při všech hustotách zobrazení.

Jak používat

Pusťte PNG, zvolte nastavení trasování, vygenerujte SVG.

  1. Nahrajte svůj PNG: Přetáhněte soubor do oblasti pro nahrávání nebo kliknutím procházejte. Nejlepší výsledky pocházejí z PNG s ostrými hranami a malým počtem odlišných barev – loga, ikony, čárové grafiky, jednoduché ilustrace. Fotografie se špatně sledují a vytvářejí obrovské SVG.
  2. V případě potřeby upravte možnosti trasování: Počet barev určuje, kolik různých barev se objeví na výstupu. Zjednodušení cesty (také nazývané ltres nebo qtres) řídí, jak agresivně algoritmus vyhlazuje rohy. Vyšší přesnost vytváří SVG blíže ke zdroji, ale s více daty cesty.
  3. Trasování a náhled: Algoritmus imagetracerjs prochází kvantizací barev, detekcí hran, sledováním obrysů a Bézierovým přizpůsobením. Sledování časových měřítek s velikostí obrazu a počtem barev. Logo 256×256 se 4 barevnými stopami za méně než sekundu; obrázek 1024×1024 se 16 barvami může trvat několik sekund.
  4. Stáhněte si SVG: Uložte SVG do svého zařízení. Soubor obsahuje značky XML s prvky cesty; můžete jej otevřít v libovolném textovém editoru a zkontrolovat nebo ručně doladit výsledek.

Běžné případy použití

Technické detaily

imagetracerjs implementuje vícestupňové potrubí: kvantizace barev redukuje bitmapu na pevný počet barev pomocí shlukování k-means nebo středního řezu; detekce hran identifikuje hranice pixelů mezi oblastmi; trasování obrysu sleduje hranice a vytváří uzavřené polygony; aproximace čar a křivek aproximuje polygony pomocí Bézierových křivek, aby se snížila data cesty.

Parametry algoritmu, na kterých záleží nejvíce, jsou počet barev (typicky: 4–32), pathomit (cesty kratší než tento počet pixelů jsou vyřazeny jako šum), ltres (tolerance čáry – jak daleko se může okraj odchýlit, než se rozdělí na nový segment) a qtres (tolerance kvadratické křivky – jak agresivně jsou křivky vyhlazeny). Výchozí hodnoty fungují dobře pro loga; komplexní obrazy těží z ladění jednotlivých snímků.

Výstup je standardní SVG 1.1 s prvky cesty. Každá barevná oblast se stane jednou cestou s atributem výplně. Výsledný soubor se otevře v libovolném prohlížeči, vektorovém editoru nebo návrhovém nástroji s podporou SVG. Velikost souboru závisí především na počtu cest a hustotě uzlů; typické trasované logo je 1–10 kB.

Nejlepší postupy

Často kladené dotazy

Bude výstup SVG skutečným vektorovým souborem?
Nástroj obkresluje rastrový obrázek a vytváří vektorové cesty. Výsledky nejlépe fungují s jednoduchou grafikou, logy a čárovou grafikou. Fotografie vytvoří složité cesty a nemusí vypadat podle očekávání.
Čím se SVG liší od jiných obrazových formátů?
SVG je vektorový formát – obrázky jsou popisovány jako matematické tvary spíše než pixely. To znamená, že soubory SVG lze škálovat na libovolnou velikost bez ztráty kvality a obvykle jsou mnohem menší než rastrové obrázky pro grafiku, jako jsou loga a ikony.
Existují nějaká omezení, která je třeba si uvědomit?
Podporovány jsou soubory do 50 MB. Zpracování velmi velkých nebo složitých souborů může trvat déle. Veškerá konverze probíhá ve vašem prohlížeči, takže rychlost zpracování závisí na vašem zařízení.
Jsou moje obrázky během převodu soukromé?
Ano. Vaše soubory PNG jsou zpracovávány výhradně ve vašem prohlížeči pomocí rozhraní Canvas API a JavaScriptu. Nic se nenahrává na žádný server – soubor jde přímo z vašeho zařízení do převodníku a zpět do vašeho zařízení.
Je trasování upravitelné v Illustratoru nebo Inkscape?
Ano. Výstupem je standardní SVG s prvky cesty. Illustrator i Inkscape jej otevírají nativně a umožňují vám upravovat cesty, měnit barvy a upřesňovat výsledek.
Je můj PNG nahrán na server?
Ne. Sledování probíhá ve vašem prohlížeči pomocí imagetracerjs. Soubor neopustí vaše zařízení.
Proč je můj soubor SVG obrovský?
Obvykle proto, že zdrojový obrázek má příliš mnoho barev nebo příliš mnoho jemných detailů. Zkuste snížit počet barev, zvýšit zjednodušení cesty nebo použít jiný zdrojový obrázek s čistší geometrií.
Mohu sledovat PNG s průhledností?
Ano. Z průhledných pixelů se v SVG stanou oblasti bez cest. Průhledné pozadí je zachováno, když je SVG vykreslen na jakékoli barvě pozadí.