PerfectVector
Autor: Brian Aum

Czym jest wektoryzacja obrazu i kiedy warto jej użyć?

Dowiedz się, jak wektoryzacja zmienia piksele w edytowalne ścieżki SVG, kiedy trasowanie pomaga i kiedy lepiej wybrać raster w wysokiej rozdzielczości.

7 min czytania
Na tej stronie

Jeśli zdarzyło Ci się powiększyć logo i zobaczyć zamiast niego rozmyte kwadraty, znasz już problem, który rozwiązuje wektoryzacja.

Raster a wektor

Obraz rastrowy, taki jak PNG, JPG czy GIF, przechowuje próbki obrazu na siatce pikseli. Ma stałe wymiary w pikselach: po odpowiednio dużym powiększeniu widać rozmycie lub samą siatkę. Na przykład specyfikacja PNG organizacji W3C definiuje PNG jako format rastrowy zbudowany z linii skanowania i pikseli. Zobacz standard PNG 3.

Stary plik .bmp to przykład rastra, którego porządkowanie ma własne pułapki. Skorzystaj z procedury wektoryzacji obrazu BMP, aby zachować celowo ostre krawędzie, nie zamieniając każdej wady starego pliku w ścieżkę.

W przypadku grafiki zapisanej jako AVIF zacznij od konwertera AVIF do SVG i sprawdź wynikowe ścieżki. Format źródłowy zmienia sposób otwierania pliku, ale nie decyduje o tym, czy grafika nadaje się do trasowania.

Obraz wektorowy może opisywać geometrię za pomocą instrukcji, takich jak „narysuj krzywą stąd dotąd i wypełnij wnętrze na czerwono”. Takie elementy można renderować w różnych rozmiarach bez pikselizacji typowej dla rastra. Niektóre kontenery wektorowe mogą też osadzać obrazy rastrowe, więc samo rozszerzenie .svg nie dowodzi, że każdy widoczny element jest wektorowy. (W3C SVG 2; osadzona zawartość SVG)

To najważniejsza różnica: szczegóły rastra są związane z siatką pikseli; geometria wektorowa jest niezależna od rozdzielczości.

Ta sama żółta błyskawica powiększona jako PNG z widocznymi pikselami oraz jako gładka ścieżka SVG z edytowalnymi punktami kotwiczenia
Przy tym samym powiększeniu krawędź rastra ujawnia siatkę pikseli, a krawędź wektora nadal wyznacza edytowalna ścieżka.

Co oznacza „wektoryzacja”

Wektoryzacja, nazywana także trasowaniem obrazu, polega na odtworzeniu obrazu rastrowego w postaci kształtów wektorowych. Powstaje plik wektorowy, w którym każdy obszar koloru z oryginału staje się jedną lub kilkoma ścieżkami z wypełnieniem.

Dobrze wykonany wynik:

  • Pozwala skalować odtworzone elementy wektorowe bez pikselizacji rastra
  • Umożliwia edycję poszczególnych kształtów w narzędziach takich jak Illustrator, Figma, Inkscape lub Affinity Designer
  • Może zajmować mniej miejsca niż raster w przypadku prostej grafiki, zależnie od złożoności ścieżek i efektów
  • Nadaje się do procesów wymagających ścieżek lub edytowalnych kształtów, po sprawdzeniu wymagań dotyczących plików

Dlaczego projektanci wektoryzują

Oto kilka najczęstszych powodów, z którymi się spotykamy:

  • Porządkowanie wygenerowanej grafiki. Obecna dokumentacja API obrazów OpenAI i Stability wymienia formaty rastrowe, takie jak PNG, JPEG i WebP. Jeśli dalsza praca wymaga edytowalnych ścieżek, takie wyniki trzeba zwektoryzować lub ręcznie przerysować. (OpenAI Images API; Stability AI API; jak wektoryzować grafikę AI do druku)
  • Przywracanie starych logo. Wiele małych firm ma tylko JPG oryginalnego logo. Wektoryzacja daje czysty SVG, który można skalować do współczesnych zastosowań.
  • Druk i produkty z nadrukiem. Źródło wektorowe przydaje się do skalowalnych logo i płaskich grafik, ale wielu wykonawców akceptuje też rastry w wysokiej rozdzielczości. Stosuj specyfikację konkretnego produktu u wybranego wykonawcy; Printful na przykład zaleca PNG lub JPEG dla większości produktów z nadrukiem. (Wytyczne Printful dotyczące plików)
  • Cięcie i wytwarzanie. Procesy cięcia mogą używać kształtów wektorowych jako warstw lub geometrii toru narzędzia, natomiast grawerowanie rastrowe i druk z późniejszym wycinaniem nie zawsze wymagają wektoryzacji. Cricut opisuje SVG i DXF jako importy wektorowe z warstwami, a formaty rastrowe jako obrazy z jedną warstwą. (Instrukcja importu Cricut; przygotowanie SVG do Cricut; konwersja obrazu do cięcia laserowego; wersja do druku 3D)

Najtrudniejsza część: możliwość edycji

Utworzenie jakiegokolwiek pliku wektorowego nie jest tym samym co utworzenie pliku przydatnego w konkretnym zadaniu. (Zobacz porównanie narzędzi do wektoryzacji AI.)

Automatyczne narzędzia odwzorowują cechy rastra za pomocą ścieżek wektorowych. Zależnie od źródła, algorytmu i ustawień mogą powstać:

  • Setki lub tysiące punktów kotwiczenia na jeden kształt
  • Krzywe, które falują, odwzorowując szum zamiast tworzyć gładkie łuki
  • Jeden widoczny kształt podzielony na wiele nakładających się fragmentów

Technicznie taki wynik nadal może być wektorowy, ale jego edycja bywa niewygodna. Ustawienia Image Trace w Adobe wprost określają kompromis między dopasowaniem ścieżek, narożnikami, szumem, kolorami i złożonością, a dokumentacja Potrace opisuje dopasowanie krzywych do obrysów bitmapy na podstawie wielokątów. (Opcje Adobe Image Trace; publikacja o Potrace)

Celem dobrego narzędzia do wektoryzacji jest uzyskanie ścieżek przypominających to, co projektant narysowałby od początku: mniej węzłów, czyste krzywe i jeden kształt na każdy widoczny obszar.

Gdzie pojawia się AI

Klasyczne narzędzia, takie jak Potrace, korzystają z udokumentowanych, deterministycznych etapów wyznaczania i optymalizacji ścieżek na podstawie obrysów bitmapy. Nowoczesne produkty mogą stosować inne algorytmy lub wyuczone modele, a ich zachowanie zależy od produktu i danych wejściowych.

W praktyce liczy się to, czy wynik zachowuje zamierzony zarys i kolory oraz ma sensowne ścieżki i warstwy, a nie sama etykieta „AI”. Sprawdź to samo źródło, przeanalizuj SVG i porównaj liczbę węzłów oraz wygodę edycji.

Wokół tego celu powstał PerfectVector: odtwarzania grafiki rastrowej w postaci edytowalnych kształtów wektorowych. Sprawdzaj każdy wynik względem źródła i porównuj jego ścieżki z inną metodą, gdy ważna jest wierność lub ryzyko produkcyjne.

Kiedy wektoryzować, a kiedy nie

Wektoryzacja sprawdza się najlepiej w przypadku:

  • Logo i logotypów
  • Ikon i ilustracji
  • Stylizowanych grafik z wyraźnymi obszarami koloru
  • Odręcznych rysunków liniowych

Gorzej radzi sobie ze zdjęciami złożonych scen. Zdjęcie lasu ma tak wiele odrębnych obszarów koloru i gradientów, że jego wektorowe odwzorowanie byłoby albo ogromne (miliony ścieżek), albo stratne. Zdjęcia zazwyczaj warto pozostawić w formacie rastrowym.

Wypróbuj

Jeśli masz raster, który musi stać się wektorem, przepuść PNG lub JPG przez konwerter i sprawdź w podglądzie odtworzony zarys, kolory i ścieżki. Wektoryzacja i podgląd są bezpłatne; jeden kredyt odblokowuje SVG. W przypadku grafiki wygenerowanej przez AI zobacz jak wektoryzować grafikę AI do druku.

FAQ

Czy wektoryzacja i trasowanie obrazu oznaczają to samo? Tak. „Trasowanie obrazu” to inna nazwa wektoryzacji: odtwarzania rastra w postaci edytowalnych kształtów wektorowych.

Jakie formaty obrazów mogę wektoryzować? Typowe formaty wejściowe to PNG i JPG; obsługa WebP, GIF, TIFF i innych formatów zależy od narzędzia. Użyj najczystszego dostępnego źródła, a następnie sprawdź odtworzony zarys, kolory i ścieżki. (Jak przekonwertować PNG do SVG bez utraty jakości.)

Czy mogę zwektoryzować fotografię? Zazwyczaj lepiej tego nie robić. Zdjęcia mają zbyt wiele gradientów i obszarów koloru, aby stać się czystymi kształtami. Wynikiem będzie ogromny plik lub efekt posteryzacji. Wektoryzacja jest przeznaczona do logo, ikon, ilustracji i grafiki liniowej.

W czym mogę potem otworzyć SVG? Wiele narzędzi obsługujących wektory, w tym Adobe Illustrator, Figma, Sketch, Inkscape, Affinity Designer i Canva, pozwala pracować z SVG. Obsługa poszczególnych funkcji może się różnić, więc sprawdź plik w konkretnej aplikacji i wersji, której chcesz używać.

Czy to bezpłatne? Wektoryzacja i podgląd są bezpłatne; jeden kredyt odblokowuje gotowy SVG. Przed odblokowaniem użyj wbudowanego edytora, aby sprawdzić, czy kolory i ścieżki pasują do Twojego procesu pracy.

Źródła

  1. W3C — specyfikacja Portable Network Graphics (PNG), wydanie trzecie — Aktualny standard reprezentacji rastrowej i bezstratnego kodowania PNG.
  2. W3C — Scalable Vector Graphics (SVG) 2 — Standard definiujący geometrię, ścieżki, malowanie i renderowanie SVG.
  3. Adobe Illustrator — opcje panelu Image Trace — Oficjalne ustawienia trasowania pokazujące kompromis między wiernością a złożonością.
  4. Selinger — Potrace: algorytm trasowania oparty na wielokątach — Pierwotny opis techniczny klasycznego algorytmu konwersji bitmap na wektory.
  5. Cricut — importowanie obrazów do Design Space — Oficjalny opis importu rastrów i wektorów oraz zachowania warstw w procesie cięcia.
  6. Printful — jak przygotować plik do druku? — Wytyczne wykonawcy pokazujące, że wiele procesów druku akceptuje pliki rastrowe.

Masz płaską grafikę rastrową, która potrzebuje edytowalnych ścieżek? Przepuść ją przez PerfectVector, porównaj podgląd ze źródłem i odblokuj SVG dopiero wtedy, gdy jego kształty i układ węzłów pasują do kolejnego narzędzia. Pozostaw zdjęcia w formacie rastrowym, chyba że celowo chcesz uzyskać stylizowane odwzorowanie.

Więcej z bloga

PerfectVector

Zamień obraz w
czyste, edytowalne ścieżki wektorowe

Bez karty kredytowej