Ako previesť PNG na SVG: vektorizácia log, ikon a kresieb

PNG je rastrový obrázok: pevná mriežka pixelov, každý s farbou a voliteľne s hodnotou priehľadnosti. Logo s rozmermi 500 × 500 px obsahuje presne 250 000 týchto štvorčekov a nič iné, takže jeho zväčšenie na veľkosť plagátu môže len zväčšiť každý štvorček alebo rozmazať medzery medzi nimi. SVG je vektorový obrázok, textový súbor, ktorý zoznamuje tvary ako <path>, <circle> a <rect> so súradnicami a farbami výplne. Prehliadač alebo rezací plotter tieto tvary prekreslí v akejkoľvek veľkosti, ktorú potrebuje, preto vektorové logo ostáva ostré na displeji telefónu aj na veľtrhovom banneri.

Prechod z vektora na raster je jednoduchý, pretože vykresľovač tvary len namaľuje do pixelov; SVG na PNG to urobí za sekundu. Opačným smerom neexistuje bezstratová skratka, pretože mriežka pixelov neuchováva záznam o tvaroch, ktoré ju vytvorili. Niečo sa musí pozrieť na pixely a odhadnúť, kde každý tvar začína a končí. Tento odhad sa nazýva trasovanie alebo vektorizácia a každý poctivý konvertor PNG na SVG, od Illustratoru až po program v príkazovom riadku, je v základe trasovač.

Niektoré konvertory preskočia to ťažké. Zapíšu platný súbor SVG s jedným prvkom <image>, v ktorom je pôvodné PNG vložené ako text base64, čo súbor zároveň zväčší asi o tretinu oproti PNG. Výsledok sa otvorí ako SVG a prejde kontrolou typu súboru, ale stále je to pixelový obrázok vo vektorovom obale: po priblížení uvidíte rovnaké zubaté hrany a rezací plotter nenájde žiadne cesty, po ktorých by išiel. Otvorte ľubovoľné SVG v textovom editore a vyhľadajte data:image/png; ak tam tento reťazec je, nič sa nevektorizovalo.

Trasovanie sa oplatí obrázkom, ktoré boli od začiatku nakreslené ako tvary. Logo exportované z dizajnérskej aplikácie, plochá ikona, kreslená postavička s čiernym obrysom, naskenovaný podpis alebo šablóna pozostávajú z niekoľkých plných farieb oddelených zreteľnými hranami. Trasovač zoskupí každú farbu do oblastí, sleduje ich okraje a pozdĺž nich vedie hladké krivky, takže výsledné SVG sa blíži tvarom, ktoré dizajnér pôvodne nakreslil. Dobre sa trasuje aj tučné písmo v logotype, lebo veľké písmeno je len ďalší vyplnený tvar a každé písmeno sa stane obrysom, ktorý môžete prefarbiť alebo zväčšiť, ale už nie prepísať.

Fotografie sú opačný prípad. Portrét alebo produktová fotka má tisíce jemne odlišných tónov plynule prechádzajúcich do seba a vektorový formát na to nemá efektívny spôsob opisu. Ak požiadate trasovač o 16 farieb, dostanete posterizovanú ilustráciu s viditeľnými pásmi; pri 64 dostanete desaťtisíce drobných tvarov v súbore oveľa väčšom než PNG, ktorý stále nevyzerá ako fotka. Jemné prechody, tiene a žiare sa rovnako zmenia na stohy tenkých pásov. Tretím problémom je malý text: pri 10–12 px vyhladzovanie hrán zlieva každé písmeno s pozadím a trasovač nerozozná „e“ od „o“.

Rozlíšenie je dôležitejšie než akékoľvek nastavenie. Trasovač prikladá každú krivku k schodíkom pixelov pozdĺž hrany a čím jemnejšie schodíky, tým vernejšia krivka. Ak ste PNG exportovali sami z Figmy, Canvy, Photoshopu alebo prezentácie, exportujte ho znova v dvoj- až trojnásobku zobrazovanej veľkosti; logo široké 1500–2000 px dá trasovaču dosť materiálu. Malé PNG najprv nezväčšujte AI zväčšovačom, pokiaľ výsledok nevyzerá čisto pri priblížení 100 %, pretože vymyslená textúra hrán sa vytrasuje rovnako verne ako skutočné hrany.

Potom zjednodušte pozadie. PNG podporuje plnú priehľadnosť a priehľadné pozadie je najjednoduchší prípad: každý úplne priehľadný pixel sa berie ako prázdne miesto, takže SVG nemá za grafikou biely obdĺžnik. Ak má PNG plné pozadie, najprv ho tesne orežte okolo grafiky; presné rámovanie opisuje náš návod ako orezať obrázok na pomer strán. Rušivé pozadie, napríklad logo odfotené na tričku, pred trasovaním odstráňte alebo premaľujte jednou plnou farbou.

Nakoniec znížte počet farieb skôr, než to urobí trasovač za vás. V zdrojovom súbore skryte tiene, žiare a prekrytia prechodmi a výplň prechodom nahraďte jej strednou farbou, ak ju vektorová verzia nepotrebuje. Spočítajte zostávajúce plné farby vrátane farby obrysu a číslo si zapíšte; je to najužitočnejšie číslo, ktoré v ďalšom kroku zadáte. Ak si vyberáte medzi JPEG a PNG toho istého loga, vezmite PNG, pretože kompresia JPEG pridáva šum okolo každej hrany, ako vysvetľuje JPG vs JPEG vs PNG.

Každý trasovač kladie tri rovnaké otázky, aj keď sa názvy líšia. Prvá je, koľko farieb zachovať. V konvertore PNG na SVG si Farebný režim vyberá medzi Farebný, Odtiene sivej a Čiernobiely a Počet farieb určuje, do koľkých zhlukov sa pixely roztriedia, od 2 do 64. Prispôsobte ho číslu, ktoré ste si zapísali. Príliš vysoká hodnota spôsobí, že trasovač rozdelí vyhladené okrajové pixely na vlastné tenké farby, čo sa prejaví slabou aureolou okolo každého tvaru; príliš nízka zlúči dve firemné farby do jednej.

Druhá otázka je, ako zaobchádzať s hranami. Vyhladenie zaobľuje schodíky po pixeloch a Detail určuje, aká malá škvrna sa ešte stane tvarom. Stránka PNG začína na Detail 70 a Vyhladenie 40, čo pri čistom exporte zachová malé rohy. Znížte Detail, ak sa objavuje prach a zatúlané bodky, zvýšte Vyhladenie, ak sú krivky roztrasené, a Krivky nastavte na Rovné čiary pri geometrických logách z rovných hrán alebo na Pixelové hrany pri pixel arte, ktorý má ostať hranatý.

Tretia otázka platí len pre čiernobiele trasovanie: kde viesť hranicu medzi atramentom a papierom. Prah sa pohybuje od 1 do 254, predvolene 128. Pixely tmavšie než prah sa stanú čiernymi, svetlejšie prázdnymi. Pri podpise tenkým modrým guľôčkovým perom ho zvýšte na 160–180, aby slabé ťahy prežili; pri hrubej kresbe fixkou na mierne sivom papieri ho znížte na 100, aby sa textúra papiera nezmenila na škvrny. Meňte vždy jedno nastavenie a porovnávajte, pretože sa ovplyvňujú navzájom.

Nezastavujte sa pri miniatúre. Otvorte SVG v prehliadači a priblížte na 400–800 % najtesnejšiu krivku, oblúk písmena alebo hrot špičky. Dobrá vektorizácia ukazuje hladké oblúky a ostré rohy tam, kde ich dizajn má; slabá ukazuje vlnky, preliačiny a zaoblené hroty. Potom si súbor pozrite vo vektorovom editore, napríklad Inkscape, Illustrator alebo Figma, a zapnite zobrazenie obrysov alebo uzlov. Jednoduché dvojfarebné logo zvyčajne potrebuje pár stoviek uzlov; ak vaše ukazuje niekoľko tisíc, trasovač sledoval šum a cesty sa budú ťažko upravovať alebo rezať.

Veľkosť súboru je rýchla kontrola rozumnosti. Optimalizované SVG plochého loga má zvyčajne niekoľko kilobajtov až niekoľko desiatok kilobajtov, často menej než PNG, z ktorého vzniklo. Vytrasovaný súbor niekoľkonásobne väčší než zdrojové PNG zvyčajne znamená priveľa farieb, priveľa detailov alebo fotku, ktorú sa nemalo trasovať. Nechajte zapnuté Optimalizovať SVG, pretože zaokrúhľuje súradnice a spája cesty bez viditeľnej zmeny, a nakoniec grafiku zväčšite na veľkosť plagátu a zmenšite na veľkosť favicony, aby ste overili, že je čitateľná v oboch.

Bezplatnou desktopovou možnosťou je Inkscape. Importujte PNG, vyberte ho a otvorte Cesta > Trasovať bitmapu (Shift+Alt+B). Režimy s jedným prechodom, napríklad Brightness cutoff, vytvoria jednu čiernu cestu, čo sa hodí na čiarovú kresbu; režimy s viacerými prechodmi vytrasujú zadaný počet farieb alebo odtieňov sivej ako vrstvy nad sebou. Čiernobiele trasovanie v Inkscape stojí na Potrace, knižnici na trasovanie, ktorú Peter Selinger vydal v roku 2001. Samotné Potrace je program v príkazovom riadku, ktorý číta PBM, PGM, PPM alebo BMP namiesto PNG, zvláda iba dvojtónové obrázky a zapisuje SVG, PDF, EPS alebo DXF, vďaka čomu je dobrou voľbou na skriptovanie veľkých dávok skenov.

V Adobe Illustratore nahradil Image Trace starší Live Trace v Illustratore CS6. Vložte PNG, otvorte Okno > Image Trace a začnite z predvoľby, napríklad Black and White Logo, 3 Colors alebo 16 Colors, potom v rozšírenej časti upravte Paths, Corners a Noise. Trasovanie ostáva živé, kým nekliknete na Expand, ktoré ho zmení na bežné upraviteľné cesty. Ak nemáte nainštalovaný ani jeden program, konvertor v prehliadači vykoná ten istý postup: zníženie farieb, nájdenie hrán, preloženie kriviek; konvertor obrázkov na SVG prijíma aj JPG, WebP a HEIC a namiesto SVG vie zapísať EPS, PDF alebo DXF.

Na webe je SVG odporúčaním W3C od roku 2001 a každý súčasný prehliadač ho vykreslí v značke <img>, ako pozadie CSS alebo priamo v HTML, kde sa jeho farby môžu dokonca meniť pri nabehnutí myšou. Vytrasované logo zvyčajne nahradí viacero veľkostí PNG pre retina displeje jedným malým súborom. Pre rezacie plottery je SVG formát, ktorý očakávajú Cricut Design Space a Silhouette Studio: každý vytrasovaný tvar sa stane rezanou cestou a viacfarebné trasovanie príde ako samostatné vrstvy, ktoré môžete rezať z vinylu rôznych farieb. Laserové rezačky a CNC softvér zvyčajne uprednostňujú DXF, ktoré z rovnakých nastavení trasovania vytvorí PNG do DXF.

Tlačiarne žiadajú vektorovú grafiku, pretože tlačový stroj, digitalizátor vyšívania či rezač nápisov potrebuje hrany, nie pixely, a vytrasované SVG to pri nálepkách, tričkách alebo banneri často splní. Stále je to aproximácia: krivky sú preložené odhady, farby sú spriemerované z pixelov a text je prevedený na obrysy. Preto sa pred trasovaním firemného loga spýtajte toho, kto ho vytvoril. Dizajnér alebo agentúra má takmer vždy originál AI, EPS, PDF alebo SVG s presnými krivkami, pomenovanými farbami a písmami a poslať ho im zaberie minútu. Trasovanie je správny nástroj, keď je originál stratený, keď logo prežilo iba na naskenovanom hlavičkovom papieri alebo keď je grafika vašou vlastnou kresbou.