Jak zamienić PNG na SVG: wektoryzacja logo i ikon

PNG to obraz rastrowy: stała siatka pikseli, z których każdy ma kolor i opcjonalnie wartość przezroczystości. Logo 500 × 500 px zawiera dokładnie 250 000 takich kwadratów i nic więcej, więc powiększenie go do rozmiaru plakatu może tylko powiększyć każdy kwadrat albo rozmyć przejścia między nimi. SVG to obraz wektorowy, czyli plik tekstowy z listą kształtów, takich jak <path>, <circle> i <rect>, wraz ze współrzędnymi i kolorami wypełnienia. Przeglądarka lub ploter tnący rysuje te kształty od nowa w dowolnym potrzebnym rozmiarze, dlatego logo wektorowe jest ostre zarówno na ekranie telefonu, jak i na banerze targowym.

Przejście z wektora do rastra jest proste, bo program po prostu rysuje kształty w pikselach; SVG na PNG robi to w sekundę. W drugą stronę nie ma bezstratnego skrótu, ponieważ siatka pikseli nie zawiera informacji o kształtach, z których powstała. Ktoś musi przeanalizować piksele i odgadnąć, gdzie każdy kształt się zaczyna i kończy. Ten etap nazywa się trasowaniem lub wektoryzacją, a każdy uczciwy konwerter PNG na SVG, od Illustratora po program w wierszu poleceń, jest w gruncie rzeczy trasownikiem.

Niektóre konwertery pomijają trudną część. Zapisują poprawny plik SVG z jednym elementem <image>, w którym oryginalny PNG jest osadzony jako tekst base64, przez co plik jest też o około jedną trzecią większy od PNG. Wynik otwiera się jako SVG i przechodzi kontrolę typu pliku, ale nadal jest obrazem pikselowym w wektorowym opakowaniu: po powiększeniu widać te same poszarpane krawędzie, a ploter tnący nie znajduje ścieżek do prowadzenia noża. Otwórz dowolny SVG w edytorze tekstu i wyszukaj data:image/png; jeśli ten ciąg tam jest, nic nie zostało zwektoryzowane.

Wektoryzacja najlepiej sprawdza się przy obrazach, które od początku były rysowane jako kształty. Logo wyeksportowane z programu graficznego, płaska ikona, kreskówka z czarnym konturem, zeskanowany podpis czy szablon składają się z kilku jednolitych kolorów oddzielonych wyraźnymi krawędziami. Trasownik grupuje każdy kolor w obszary, podąża za ich granicami i dopasowuje do nich gładkie krzywe, więc SVG jest zbliżony do kształtów, które pierwotnie narysował projektant. Pogrubione litery w logotypie też dobrze się wektoryzują, bo duża litera to po prostu kolejny wypełniony kształt, a każdy znak staje się konturem, który można przekolorować lub przeskalować, ale nie da się go już edytować jako tekstu.

Fotografie to przypadek odwrotny. Portret czy zdjęcie produktu ma tysiące subtelnie różniących się tonów płynnie przechodzących w siebie, a format wektorowy nie ma wydajnego sposobu, by to opisać. Jeśli poprosisz trasownik o 16 kolorów, dostaniesz splakatyzowaną ilustrację z widocznymi pasmami; przy 64 dostaniesz dziesiątki tysięcy drobnych kształtów w pliku znacznie większym niż PNG, który nadal nie wygląda jak zdjęcie. Miękkie gradienty, cienie i poświaty zamieniają się w podobny sposób w stosy cienkich pasów. Trzecim kłopotliwym przypadkiem jest mały tekst: przy 10–12 px antyaliasing zlewa każdą literę z tłem, a trasownik nie odróżni „e” od „o”.

Rozdzielczość ma większe znaczenie niż jakiekolwiek ustawienie. Trasownik dopasowuje każdą krzywą do schodków pikseli wzdłuż krawędzi, a im drobniejsze schodki, tym wierniejsza krzywa. Jeśli sam wyeksportowałeś PNG z Figmy, Canvy, Photoshopa lub prezentacji, wyeksportuj go ponownie w rozmiarze dwu- lub trzykrotnie większym od wyświetlanego; logo o szerokości 1500–2000 px daje trasownikowi mnóstwo materiału. Nie powiększaj małego PNG narzędziem AI, chyba że wynik wygląda czysto przy powiększeniu 100 %, bo wymyślona faktura krawędzi jest wektoryzowana równie wiernie jak prawdziwe krawędzie.

Następnie uprość tło. PNG obsługuje pełną przezroczystość, a przezroczyste tło to najłatwiejszy przypadek: każdy w pełni przezroczysty piksel jest traktowany jako puste miejsce, więc SVG nie ma białego prostokąta za grafiką. Jeśli PNG ma jednolite tło, najpierw przytnij obraz ciasno wokół grafiki; nasz poradnik jak przyciąć zdjęcie do proporcji opisuje dokładne kadrowanie. Tło pełne szczegółów, na przykład logo sfotografowane na koszulce, należy usunąć lub zamalować jednym jednolitym kolorem przed wektoryzacją.

Na koniec zmniejsz liczbę kolorów, zanim zrobi to za Ciebie trasownik. Ukryj cienie, poświaty i nakładki gradientowe w pliku źródłowym, a wypełnienie gradientem zastąp jego środkowym kolorem, jeśli wersja wektorowa go nie potrzebuje. Policz pozostałe jednolite kolory razem z kolorem konturu i zapisz liczbę; to najprzydatniejsza wartość, jaką wpiszesz w następnym kroku. Jeśli wybierasz między JPEG a PNG tego samego logo, weź PNG, ponieważ kompresja JPEG dodaje szum wokół każdej krawędzi, co opisano w artykule JPG, JPEG i PNG: różnice.

Każdy trasownik zadaje te same trzy pytania, nawet jeśli etykiety się różnią. Pierwsze dotyczy tego, ile kolorów zachować. W konwerterze PNG na SVG Tryb kolorów pozwala wybrać między Kolor, Skala szarości i Czarno-biały, a Liczba kolorów określa, na ile grup sortowane są piksele, od 2 do 64. Dopasuj ją do zapisanej wcześniej liczby. Zbyt wysoka wartość sprawia, że trasownik wydziela piksele wygładzonych krawędzi jako własne cienkie kolory, co widać jako delikatną obwódkę wokół każdego kształtu; zbyt niska łączy dwa kolory marki w jeden.

Drugie pytanie dotyczy traktowania krawędzi. Wygładzanie zaokrągla schodki pozostawione przez piksele, a Szczegółowość decyduje, jak mała plamka może jeszcze stać się kształtem. Strona PNG zaczyna od Szczegółowość 70 i Wygładzanie 40, co zachowuje małe narożniki w czystym eksporcie. Obniż Szczegółowość, jeśli pojawia się kurz i zbłąkane kropki, zwiększ Wygładzanie, jeśli krzywe są sfalowane, a Krzywe ustaw na Proste linie dla logo geometrycznych o prostych krawędziach albo na Krawędzie pikseli dla pixel artu, który ma pozostać kanciasty.

Trzecie pytanie dotyczy tylko wektoryzacji czarno-białej: gdzie poprowadzić granicę między tuszem a papierem. Próg przyjmuje wartości od 1 do 254, domyślnie 128. Piksele ciemniejsze niż próg stają się czarne, jaśniejsze są puste. Dla podpisu cienkim niebieskim długopisem podnieś go w stronę 160–180, aby słabe kreski przetrwały; dla grubego rysunku markerem na lekko szarym papierze obniż go w stronę 100, by faktura papieru nie zamieniła się w plamki. Zmieniaj jedno ustawienie naraz i porównuj, bo wpływają na siebie nawzajem.

Nie poprzestawaj na miniaturze. Otwórz SVG w przeglądarce i powiększ do 400–800 % najtrudniejszą krzywą, na przykład brzuszek litery lub czubek szpica. Dobra wektoryzacja pokazuje gładkie łuki i ostre narożniki tam, gdzie projekt je ma; słaba pokazuje falowania, wgniecenia i zaokrąglone końcówki. Następnie obejrzyj plik w edytorze wektorowym, takim jak Inkscape, Illustrator lub Figma, i włącz widok konturów lub węzłów. Proste dwukolorowe logo zwykle potrzebuje kilkuset węzłów; jeśli u Ciebie jest ich kilka tysięcy, trasownik podążał za szumem, a edycja lub cięcie takich ścieżek będzie uciążliwe.

Rozmiar pliku to szybki test poprawności. Zoptymalizowany SVG płaskiego logo ma zwykle od kilku do kilkudziesięciu kilobajtów, często mniej niż PNG, z którego powstał. Plik po wektoryzacji kilka razy większy od źródłowego PNG zwykle oznacza zbyt wiele kolorów, zbyt dużą szczegółowość albo zdjęcie, którego nie należało wektoryzować. Zostaw włączoną opcję Optymalizuj SVG, ponieważ zaokrągla współrzędne i łączy ścieżki bez widocznej zmiany, a na koniec przeskaluj grafikę do rozmiaru plakatu i do rozmiaru favikony, aby sprawdzić, czy dobrze wygląda w obu.

Darmową opcją na komputer jest Inkscape. Zaimportuj PNG, zaznacz go i otwórz Path > Trace Bitmap (Shift+Alt+B). Tryby pojedynczego skanu, takie jak Brightness cutoff, tworzą jedną czarną ścieżkę, co pasuje do rysunków kreskowych; tryby wielokrotnego skanu wektoryzują zadaną liczbę kolorów lub szarości jako warstwy ułożone jedna na drugiej. Czarno-biała wektoryzacja w Inkscape opiera się na Potrace, bibliotece trasującej wydanej przez Petera Selingera w 2001 roku. Sam Potrace to program w wierszu poleceń, który czyta PBM, PGM, PPM lub BMP zamiast PNG, obsługuje tylko obrazy dwutonowe i zapisuje SVG, PDF, EPS lub DXF, co czyni go dobrym wyborem do skryptowego przetwarzania dużych partii skanów.

W Adobe Illustrator funkcja Image Trace zastąpiła starszy Live Trace w Illustratorze CS6. Umieść PNG, otwórz Window > Image Trace i zacznij od ustawienia wstępnego, takiego jak Black and White Logo, 3 Colors lub 16 Colors, a potem dostosuj Paths, Corners i Noise w sekcji zaawansowanej. Wektoryzacja pozostaje aktywna, dopóki nie klikniesz Expand, co zamienia ją w zwykłe edytowalne ścieżki. Jeśli nie masz zainstalowanego żadnego z tych programów, konwerter w przeglądarce wykonuje ten sam proces: redukcję kolorów, wykrywanie krawędzi i dopasowanie krzywych; konwerter obrazu do SVG przyjmuje także JPG, WebP i HEIC i może zapisywać EPS, PDF lub DXF zamiast SVG.

W sieci SVG jest rekomendacją W3C od 2001 roku, a każda aktualna przeglądarka wyświetla go w znaczniku <img>, jako tło CSS lub bezpośrednio w HTML, gdzie jego kolory mogą się nawet zmieniać po najechaniu kursorem. Zwektoryzowane logo zwykle zastępuje kilka rozmiarów PNG dla ekranów retina jednym małym plikiem. Dla ploterów tnących SVG jest formatem oczekiwanym przez Cricut Design Space i Silhouette Studio: każdy zwektoryzowany kształt staje się ścieżką cięcia, a wielokolorowa wektoryzacja trafia jako osobne warstwy, które można wyciąć z folii w różnych kolorach. Wycinarki laserowe i oprogramowanie CNC zwykle wolą DXF, który PNG na DXF tworzy z tych samych ustawień wektoryzacji.

Drukarnie proszą o grafikę wektorową, ponieważ prasa, digitizer haftu czy ploter do znaków potrzebują krawędzi, a nie pikseli, i zwektoryzowany SVG często to spełnia przy naklejkach, koszulkach lub banerze. To nadal przybliżenie: krzywe są dopasowanymi domysłami, kolory są uśrednione z pikseli, a tekst jest zamieniony na kontury. Dlatego zanim zwektoryzujesz logo firmy, zapytaj osobę, która je stworzyła. Projektant lub agencja prawie zawsze ma oryginalny plik AI, EPS, PDF lub SVG z dokładnymi krzywymi, nazwanymi kolorami i czcionkami, a wysłanie go zajmuje im minutę. Wektoryzacja to właściwe narzędzie, gdy oryginał zaginął, gdy logo przetrwało tylko na zeskanowanym papierze firmowym albo gdy grafika jest Twoim własnym rysunkiem.