Cum convertiți PNG în SVG: logouri, iconițe și desene

Un PNG este o imagine raster: o grilă fixă de pixeli, fiecare cu o culoare și, opțional, o valoare de opacitate. Un logo de 500 × 500 px conține exact 250.000 de pătrățele și nimic altceva, așa că mărirea lui la mărimea unui afiș poate doar să facă fiecare pătrățel mai mare sau să încețoșeze spațiile dintre ele. Un SVG este o imagine vectorială, un fișier text care listează forme precum <path>, <circle> și <rect>, cu coordonate și culori de umplere. Un browser sau o mașină de tăiat redesenează formele la orice mărime este nevoie, de aceea un logo vectorial rămâne clar atât pe ecranul telefonului, cât și pe un banner de târg.

Trecerea de la vector la raster este simplă, pentru că programul de randare doar pictează formele în pixeli; SVG în PNG face exact asta într-o secundă. În sens invers nu există o scurtătură fără pierderi, pentru că grila de pixeli nu păstrează nicio informație despre formele care au produs-o. Ceva trebuie să se uite la pixeli și să ghicească unde începe și unde se termină fiecare formă. Pasul acesta de ghicire se numește trasare sau vectorizare, iar orice convertor PNG în SVG onest, de la Illustrator până la un program din linia de comandă, este în esență un trasator.

Unele convertoare sar peste partea grea. Ele scriu un fișier SVG valid, cu un singur element <image> în care PNG-ul original este încorporat ca text base64, ceea ce face fișierul cu aproximativ o treime mai mare decât PNG-ul. Rezultatul se deschide ca SVG și trece verificarea tipului de fișier, dar rămâne o imagine din pixeli într-un înveliș vectorial: dacă măriți, vedeți aceleași margini zimțate, iar o mașină de tăiat nu găsește trasee de urmat. Deschideți orice SVG într-un editor de text și căutați data:image/png; dacă șirul apare, nimic nu a fost vectorizat.

Trasarea merge bine la imaginile desenate de la început ca forme. Un logo exportat dintr-o aplicație de design, o pictogramă plată, un desen animat cu contur negru, o semnătură scanată sau un șablon constau toate dintr-un număr mic de culori pline, separate de margini clare. Trasatorul grupează fiecare culoare în regiuni, urmărește marginile lor și potrivește curbe netede de-a lungul lor, așa că SVG-ul ajunge aproape de formele desenate inițial de designer. Literele groase dintr-un logotip se trasează bine și ele, pentru că o literă mare este doar o altă formă umplută, iar fiecare glif devine un contur pe care îl puteți recolora sau redimensiona, dar nu îl mai puteți retasta ca text.

Fotografiile sunt cazul opus. Un portret sau o poză de produs are mii de tonuri ușor diferite care se amestecă între ele, iar formatul vectorial nu are o metodă eficientă de a le descrie. Dacă cereți 16 culori, obțineți o ilustrație posterizată, cu benzi vizibile; dacă cereți 64, obțineți zeci de mii de forme minuscule într-un fișier mult mai mare decât PNG-ul, care tot nu arată ca o fotografie. Gradientele line, umbrele și strălucirile se transformă în același fel în stive de benzi subțiri. Textul mic este a treia problemă: la 10–12 px, antialiasing-ul amestecă fiecare literă cu fundalul, iar trasatorul nu poate deosebi un „e” de un „o”.

Rezoluția contează mai mult decât orice setare. Trasatorul potrivește fiecare curbă pe treptele de pixeli de la marginea unui contur, iar cu cât treptele sunt mai fine, cu atât curba e mai fidelă. Dacă ați exportat singur PNG-ul din Figma, Canva, Photoshop sau dintr-o prezentare, exportați-l din nou la de două-trei ori mărimea de afișare; un logo de 1500–2000 px lățime oferă trasatorului suficient material. Nu măriți un PNG mic cu un instrument AI dinainte, decât dacă rezultatul arată curat la zoom 100 %, pentru că textura inventată a marginilor este trasată la fel de fidel ca marginile reale.

Apoi, simplificați fundalul. PNG-ul acceptă transparență completă, iar fundalul transparent este cazul cel mai ușor: fiecare pixel complet transparent este tratat ca spațiu gol, deci SVG-ul nu are un dreptunghi alb în spatele desenului. Dacă PNG-ul are un fundal plin, decupați strâns în jurul desenului; ghidul nostru despre cum decupați o imagine la un anumit format explică încadrarea exactă. Un fundal încărcat, de exemplu un logo fotografiat pe un tricou, trebuie eliminat sau acoperit cu o singură culoare plată înainte de trasare.

În final, reduceți numărul de culori înainte să o facă trasatorul în locul dumneavoastră. Ascundeți umbrele, strălucirile și suprapunerile de gradient din fișierul sursă și înlocuiți umplerea cu gradient cu culoarea de mijloc, dacă versiunea vectorială nu are nevoie de el. Numărați culorile pline rămase, inclusiv culoarea conturului, și notați numărul; este cea mai utilă valoare pe care o veți introduce la pasul următor. Dacă alegeți între un JPEG și un PNG cu același logo, luați PNG-ul, pentru că comprimarea JPEG adaugă zgomot în jurul fiecărei margini, așa cum explică JPG vs JPEG vs PNG.

Orice trasator pune aceleași trei întrebări, chiar dacă etichetele diferă. Prima este câte culori să păstreze. În convertorul PNG în SVG, Mod de culoare alege între Culoare, Tonuri de gri și Alb-negru, iar Număr de culori stabilește în câte grupuri sunt sortați pixelii, de la 2 la 64. Potriviți-l cu numărul notat. Dacă îl setați prea mare, trasatorul separă pixelii antialiasați de la margini în culori subțiri proprii, ceea ce se vede ca un halou slab în jurul fiecărei forme; dacă îl setați prea mic, două culori de brand se contopesc într-una.

A doua întrebare este cum se tratează marginile. Netezire rotunjește treptele lăsate de pixeli, iar Detaliu decide cât de mic poate fi un punct ca să devină totuși formă. Pagina PNG pornește de la Detaliu 70 și Netezire 40, ceea ce păstrează colțurile mici la un export curat. Reduceți Detaliu dacă apar praf și puncte rătăcite, măriți Netezire dacă curbele par ondulate și setați Curbe pe Linii drepte pentru logo-uri geometrice cu margini drepte sau pe Margini de pixeli pentru pixel art care trebuie să rămână în blocuri.

A treia întrebare se aplică doar trasării alb-negru: unde se trasează granița dintre cerneală și hârtie. Prag merge de la 1 la 254, cu 128 ca valoare implicită. Pixelii mai întunecați decât pragul devin negri, cei mai deschiși devin goi. Pentru o semnătură scrisă cu pix albastru subțire, ridicați-l spre 160–180 ca să supraviețuiască trăsăturile slabe; pentru un desen gros cu marker pe hârtie ușor gri, coborâți-l spre 100, ca textura hârtiei să nu devină puncte. Schimbați câte o setare pe rând și comparați, pentru că efectele se influențează reciproc.

Nu vă opriți la miniatură. Deschideți SVG-ul într-un browser și măriți la 400–800 % pe cea mai strânsă curbă, cum ar fi rotunjimea unei litere sau vârful unui colț. O trasare bună are arcuri netede și colțuri ascuțite acolo unde designul are colțuri; una slabă are unduiri, adâncituri și vârfuri rotunjite. Apoi priviți fișierul într-un editor vectorial precum Inkscape, Illustrator sau Figma și activați vizualizarea contururilor sau a nodurilor. Un logo simplu în două culori are de obicei nevoie de câteva sute de noduri; dacă al dumneavoastră are câteva mii, trasatorul a urmărit zgomot, iar traseele vor fi greu de editat sau de tăiat.

Mărimea fișierului este o verificare rapidă. Un SVG optimizat al unui logo plat are de obicei de la câțiva kiloocteți la câteva zeci de kiloocteți, adesea mai puțin decât PNG-ul de la care a pornit. Un fișier trasat de câteva ori mai mare decât PNG-ul sursă înseamnă de obicei prea multe culori, prea mult detaliu sau o fotografie care nu trebuia trasată. Lăsați activat Optimizează SVG, deoarece rotunjește coordonatele și îmbină traseele fără schimbări vizibile, iar la final măriți desenul la mărimea unui afiș și micșorați-l la mărimea unui favicon, ca să vă asigurați că se citește bine în ambele cazuri.

Varianta gratuită pentru desktop este Inkscape. Importați PNG-ul, selectați-l și deschideți Path > Trace Bitmap (Shift+Alt+B). Modurile cu o singură trecere, precum Brightness cutoff, produc un singur traseu negru, potrivit pentru desene în linii; modurile cu mai multe treceri trasează un număr stabilit de culori sau tonuri de gri ca straturi suprapuse. Trasarea alb-negru din Inkscape se bazează pe Potrace, o bibliotecă de trasare lansată de Peter Selinger în 2001. Potrace însuși este un program din linia de comandă care citește PBM, PGM, PPM sau BMP, nu PNG, lucrează doar cu imagini în două tonuri și scrie SVG, PDF, EPS sau DXF, ceea ce îl face o alegere bună pentru automatizarea unor loturi mari de scanări.

În Adobe Illustrator, Image Trace a înlocuit vechiul Live Trace din Illustrator CS6. Plasați PNG-ul, deschideți Window > Image Trace și porniți de la un preset precum Black and White Logo, 3 Colors sau 16 Colors, apoi ajustați Paths, Corners și Noise în secțiunea avansată. Trasarea rămâne activă până când faceți clic pe Expand, care o transformă în trasee obișnuite, editabile. Dacă nu aveți instalat niciunul dintre programe, un convertor din browser parcurge același proces de reducere a culorilor, găsire a marginilor și potrivire a curbelor; convertorul de imagini în SVG acceptă și JPG, WebP și HEIC și poate scrie EPS, PDF sau DXF în loc de SVG.

Pe web, SVG este o recomandare W3C din 2001, iar toate browserele actuale îl afișează într-o etichetă <img>, ca fundal CSS sau inline în HTML, unde culorile sale pot chiar să se schimbe la trecerea cursorului. Un logo trasat înlocuiește de obicei mai multe mărimi de PNG pentru ecrane retina cu un singur fișier mic. Pentru mașinile de tăiat, SVG este formatul așteptat de Cricut Design Space și Silhouette Studio: fiecare formă trasată devine un traseu de tăiere, iar o trasare multicoloră ajunge ca straturi separate, pe care le puteți tăia din vinil de culori diferite. Mașinile de tăiat cu laser și software-ul CNC preferă de obicei DXF, pe care PNG în DXF îl produce cu aceleași setări de trasare.

Tipografiile cer grafică vectorială pentru că o mașină de tipar, un digitizator de broderie sau un plotter de tăiat au nevoie de margini, nu de pixeli, iar un SVG trasat satisface adesea această cerință pentru abțibilduri, tricouri sau un banner. Rămâne totuși o aproximare: curbele sunt ghiciri potrivite, culorile sunt medii calculate din pixeli, iar textul este transformat în contururi. De aceea, înainte să trasați logo-ul unei firme, întrebați pe cine l-a făcut. Un designer sau o agenție are aproape întotdeauna originalul AI, EPS, PDF sau SVG, cu curbe exacte, culori denumite și fonturi, iar trimiterea lui durează un minut. Trasarea este instrumentul potrivit când originalul s-a pierdut, când logo-ul există doar pe un antet scanat sau când desenul este al dumneavoastră.