Jak převést PNG do SVG: vektorizace log, ikon a kreseb

PNG je rastrový obrázek: pevná mřížka pixelů, z nichž každý má barvu a případně průhlednost. Logo 500 × 500 px obsahuje přesně 250 000 těchto čtverečků a nic dalšího, takže jeho zvětšení na velikost plakátu může čtverečky jen zvětšit nebo rozmazat přechody mezi nimi. SVG je vektorový obrázek, textový soubor se seznamem tvarů, například <path>, <circle> a <rect>, se souřadnicemi a barvami výplně. Prohlížeč nebo řezací plotr tyto tvary vykreslí znovu v jakékoli potřebné velikosti, proto vektorové logo zůstane ostré na displeji telefonu i na banneru veletrhu.

Z vektoru na rastr se jde snadno, protože vykreslovač tvary prostě namaluje do pixelů; SVG do PNG to zvládne za vteřinu. Opačným směrem žádná bezeztrátová zkratka neexistuje, protože mřížka pixelů si o tvarech, které ji vytvořily, nic nepamatuje. Něco se musí na pixely podívat a odhadnout, kde který tvar začíná a končí. Tomuto kroku se říká trasování nebo vektorizace a každý poctivý převodník PNG do SVG, od Illustratoru po program v příkazové řádce, je uvnitř trasovač.

Některé převodníky těžkou část přeskočí. Zapíšou platný soubor SVG s jediným prvkem <image>, do něhož je původní PNG vložené jako text base64, čímž je soubor asi o třetinu větší než PNG. Výsledek se otevře jako SVG a projde kontrolou typu souboru, ale pořád je to pixelový obrázek ve vektorovém obalu: po přiblížení uvidíte stejné zubaté hrany a řezací plotr nenajde žádné cesty, po kterých by jel. Otevřete libovolné SVG v textovém editoru a vyhledejte data:image/png; pokud tam tento řetězec je, nic se nevektorizovalo.

Trasování se vyplatí u obrázků, které byly od začátku nakreslené jako tvary. Logo exportované z návrhářské aplikace, plošná ikona, kreslená postavička s černými obrysy, naskenovaný podpis nebo šablona se skládají z několika plných barev oddělených zřetelnými hranami. Trasovač seskupí každou barvu do oblastí, sleduje jejich okraje a vloží podél nich hladké křivky, takže výsledné SVG se blíží tvarům, které původně nakreslil designér. Tučné písmo ve slovním logu se trasuje také dobře, protože velké písmeno je jen další vyplněný tvar a každý znak se stane obrysem, který lze přebarvit nebo zvětšit, ale už ne přepsat.

Fotografie jsou opačný případ. Portrét nebo snímek produktu má tisíce nepatrně odlišných tónů plynule přecházejících do sebe a vektorový formát je neumí efektivně popsat. Požádáte-li trasovač o 16 barev, dostanete posterizovanou ilustraci s viditelnými pruhy; při 64 barvách dostanete desítky tisíc drobných tvarů v souboru mnohem větším než PNG, který stále nevypadá jako fotka. Jemné přechody, vržené stíny a záře se stejným způsobem změní na hromady tenkých pásů. Třetím problémem je drobný text: při 10–12 px vyhlazování hran slévá každé písmeno s pozadím a trasovač nerozezná „e“ od „o“.

Rozlišení je důležitější než jakékoli nastavení. Trasovač přikládá každou křivku ke schodům pixelů podél hrany a čím jemnější schody, tím věrnější křivka. Pokud jste PNG sami exportovali z Figmy, Canvy, Photoshopu nebo prezentace, exportujte je znovu ve dvou až třech násobcích zobrazované velikosti; logo široké 1500–2000 px dává trasovači dost materiálu. Malé PNG nejdřív nezvětšujte AI zvětšovačem, pokud výsledek při zobrazení 100 % nevypadá čistě, protože vymyšlená textura hran se trasuje stejně věrně jako skutečné hrany.

Dále zjednodušte pozadí. PNG podporuje plnou průhlednost a průhledné pozadí je nejsnazší případ: každý zcela průhledný pixel se bere jako prázdné místo, takže SVG nemá za kresbou bílý obdélník. Pokud má PNG plné pozadí, nejprve těsně oříznete kolem kresby; náš návod jak oříznout obrázek na poměr stran popisuje přesné kadrování. Rušné pozadí, například logo vyfocené na tričku, odstraňte nebo před trasováním přemalujte jednou plnou barvou.

Nakonec snižte počet barev dřív, než to za vás udělá trasovač. Skryjte stíny, záře a překryvy přechodů ve zdrojovém souboru a výplň přechodem nahraďte její střední barvou, pokud ji vektorová verze nepotřebuje. Spočítejte zbylé plné barvy včetně barvy obrysu a číslo si zapište; je to nejužitečnější číslo, které v dalším kroku zadáte. Pokud vybíráte mezi JPEG a PNG téhož loga, vezměte PNG, protože komprese JPEG přidává šum kolem každé hrany, jak vysvětluje článek JPG vs JPEG vs PNG.

Každý trasovač se ptá na tytéž tři věci, i když se popisky liší. První je, kolik barev zachovat. V převodníku PNG do SVG volí Barevný režim mezi možnostmi Barevná, Odstíny šedi a Černobílá a Počet barev určuje, do kolika shluků se pixely roztřídí, od 2 do 64. Nastavte hodnotu, kterou jste si zapsali. Příliš vysoká hodnota způsobí, že trasovač rozdělí pixely vyhlazených hran na vlastní tenké barvy, což se projeví slabým lemem kolem každého tvaru; příliš nízká sloučí dvě barvy značky do jedné.

Druhá otázka je, jak zacházet s hranami. Vyhlazení zaoblí schody po pixelech a Detaily určují, jak malá skvrna se ještě stane tvarem. Stránka pro PNG začíná na Detaily 70 a Vyhlazení 40, což u čistého exportu zachová malé rohy. Pokud se objeví prach a zbloudilé tečky, snižte Detaily; pokud jsou křivky roztřesené, zvyšte Vyhlazení. U geometrických log z přímých hran nastavte Křivky na Přímé čáry, u pixel artu, který má zůstat hranatý, na Pixelové hrany.

Třetí otázka platí jen pro černobílé trasování: kde vést hranici mezi inkoustem a papírem. Práh se pohybuje od 1 do 254, výchozí je 128. Pixely tmavší než práh jsou černé, světlejší zůstanou prázdné. U podpisu napsaného tenkou modrou propiskou ho zvyšte k 160–180, aby slabé tahy přežily; u tučné kresby fixou na lehce šedém papíru ho snižte k 100, aby se struktura papíru nezměnila na skvrny. Měňte vždy jedno nastavení a porovnávejte, protože se navzájem ovlivňují.

Nezastavujte se u náhledu. Otevřete SVG v prohlížeči a přibližte na 400–800 % nejtěsnější křivku, například oblouk písmene nebo špičku hrotu. Dobré trasování ukazuje hladké oblouky a ostré rohy tam, kde je návrh má; slabé ukazuje vlnky, promáčkliny a zaoblené špičky. Pak soubor otevřete ve vektorovém editoru, například Inkscape, Illustrator nebo Figma, a zapněte zobrazení obrysů nebo uzlů. Jednoduché dvoubarevné logo obvykle potřebuje několik set uzlů; pokud jich vaše má několik tisíc, trasovač sledoval šum a cesty se budou špatně upravovat nebo řezat.

Rychlou kontrolou je velikost souboru. Optimalizované SVG plošného loga má obvykle několik kilobajtů až několik desítek kilobajtů a často je menší než původní PNG. Vektorizovaný soubor několikanásobně větší než zdrojové PNG obvykle znamená příliš mnoho barev, příliš mnoho detailů, nebo fotku, která se vektorizovat neměla. Nechte zapnuté Optimalizovat SVG, protože zaokrouhluje souřadnice a slučuje cesty bez viditelné změny, a nakonec kresbu zvětšete na velikost plakátu a zmenšete na velikost favicony, abyste ověřili, že je čitelná v obou.

Bezplatnou desktopovou možností je Inkscape. Importujte PNG, vyberte ho a otevřete Cesta > Trasovat bitmapu (Shift+Alt+B). Režimy s jedním průchodem, například Hranice jasu, vytvoří jednu černou cestu, což se hodí na perokresbu; režimy s více průchody trasují zadaný počet barev nebo šedí jako vrstvy nad sebou. Černobílé trasování v Inkscapu stojí na Potrace, trasovací knihovně, kterou v roce 2001 vydal Peter Selinger. Samotné Potrace je program pro příkazovou řádku, který čte PBM, PGM, PPM nebo BMP místo PNG, zvládá jen dvoubarevné obrázky a zapisuje SVG, PDF, EPS nebo DXF, takže je vhodné pro skriptování velkých dávek skenů.

V Adobe Illustratoru nahradilo Image Trace starší Live Trace v Illustratoru CS6. Vložte PNG, otevřete Okno > Image Trace a začněte předvolbou, například Black and White Logo, 3 Colors nebo 16 Colors, a pak upravte Paths, Corners a Noise v pokročilé části. Trasování zůstává živé, dokud neklepnete na Expand, čímž se změní na běžné upravitelné cesty. Pokud nemáte nainstalovaný ani jeden z programů, převodník v prohlížeči provede stejný postup: snížení barev, nalezení hran, proložení křivek; převodník obrázků do SVG přijímá také JPG, WebP a HEIC a místo SVG umí zapsat EPS, PDF nebo DXF.

Na webu je SVG doporučením W3C od roku 2001 a každý současný prohlížeč ho vykreslí ve značce <img>, jako pozadí v CSS nebo přímo v HTML, kde se jeho barvy mohou měnit třeba po najetí myší. Vektorizované logo obvykle nahradí několik velikostí PNG pro retina displeje jedním malým souborem. U řezacích plotrů je SVG formát, který očekávají Cricut Design Space a Silhouette Studio: každý vektorizovaný tvar se stane řezanou cestou a vícebarevné trasování přijde jako samostatné vrstvy, které lze řezat z vinylu různých barev. Laserové řezačky a software CNC obvykle preferují DXF, které z týchž nastavení trasování vytvoří PNG do DXF.

Tiskárny žádají vektorovou grafiku, protože tiskový stroj, vyšívací digitizér nebo řezač reklam potřebuje hrany, ne pixely, a vektorizované SVG to u samolepek, triček nebo banneru často splní. Pořád jde o aproximaci: křivky jsou odhadnuté, barvy zprůměrované z pixelů a text převedený na obrysy. Než tedy začnete trasovat firemní logo, zeptejte se toho, kdo ho vytvořil. Designér nebo agentura má téměř vždy originál v AI, EPS, PDF nebo SVG s přesnými křivkami, pojmenovanými barvami a fonty a odeslání jim zabere minutu. Trasování je správný nástroj, když je originál ztracený, když logo přežilo jen na naskenovaném hlavičkovém papíru, nebo když jde o vaši vlastní kresbu.