Posteryzacja i trasowanie: dlaczego konwerter oddał ci brzydki SVG
Większość narzędzi obraz-na-SVG posteryzuje i trasuje. Co to robi z gradientami, krawędziami i liczbą węzłów, i jak działa rekonstrukcja.
Wejdź na dowolną stronę „PNG na SVG”, wgraj logo z delikatnym gradientem, a dostaniesz pasy. Wgraj czystą ikonę, a dostaniesz więcej węzłów niż na schemacie warszawskiego metra. Narzędzia różnią się wyglądem, ale pod spodem prawie wszystkie robią to samo: najpierw posteryzują, potem trasują.
Przepis
- Zredukuj obraz do N kolorów, zwykle przez grupowanie pikseli.
- Dla każdego koloru znajdź spójne plamy pikseli.
- Obrysuj każdą plamę łamaną, potem zamień łamaną na krzywe.
- Ułóż wszystko warstwami i zapisz do pliku.
Jest szybki, prosty w implementacji i dokładnie taki sam jak w tracerach z początku lat dwutysięcznych. Jego wady wynikają z samej metody, żadna regulacja suwaków ich nie usunie.
Wada pierwsza: gradient zamienia się w pasy
Gradient to tysiące odrobinę różnych kolorów. Wrzucenie ich do N koszyków daje N płaskich pasm z twardymi krawędziami między nimi. Większe N daje węższe pasma i więcej ścieżek, ale nigdy nie daje gradientu.
Wada druga: dwa kolory, dwie krawędzie
Każdy kolor jest obrysowywany osobno, więc granica między czerwienią a granatem powstaje dwa razy: raz od strony czerwieni, raz od strony granatu. Te dwa obrysy nigdy nie pokrywają się dokładnie. Tam, gdzie zachodzą na siebie, widać ciemny szew, a tam, gdzie się mijają, prześwituje cienka linia tła. Ploter tnący wytnie obie linie.
Wada trzecia: pikselom wierzy się bezkrytycznie
Bloki kompresji JPEG, antyaliasing i szum z generatora to dla tracera zwyczajne piksele, więc obrysowuje je z pełną wiernością. Wychodzą schodkowe krawędzie, drobne wysepki koloru i tysiące węzłów w kształcie, który grafik narysowałby dwudziestoma.
Jak działa rekonstrukcja
svgize zaczyna z drugiej strony i pyta: jaki projekt, złożony z płaskich wypełnień, gradientów i czystych krzywych, dałby te piksele, jeśli uwzględnić, jak obraz został zdegradowany? Najpierw mierzy rozmycie, jakość JPEG i szum. Potem sprawdza hipotezy gradientów na pikselach i zostawia te, które je tłumaczą. Każdemu pikselowi przypisuje kształt, do którego należy, więc granica między dwoma kolorami jest jedną krzywą, wspólną dla obu stron. Tę krzywą dopasowuje z dokładnością do ułamka piksela, znajduje narożniki i wygładza fragmenty, w których faluje samo źródło.
Różnicę widać w trzech liczbach obok każdego wyniku: ścieżki, kolory i rozmiar pliku. Czyste logo to kilka ścieżek, kilka kolorów i kilka kilobajtów.