PNG na SVG z gradientami: skąd biorą się pasy i jak zachować gradient
Gradient w PNG to tysiące kolorów. Większość konwerterów grupuje je w pasma. Jak zamiast tego odzyskać prawdziwy gradient SVG, które gradienty da się odzyskać i co zrobić do druku i cięcia.
Wgraj logo z miękkim przejściem z niebieskiego w fiolet do typowego narzędzia PNG na SVG, a dostaniesz stos płaskich pasów z twardymi krawędziami między nimi. Zwiększ liczbę kolorów, a pasy staną się węższe i liczniejsze. Nigdy nie staną się gradientem, bo narzędzie nie ma pojęcia, że patrzy na gradient.
Skąd biorą się pasy
Gradient w bitmapie to gładki ciąg tysięcy odrobinę różnych kolorów. Konwerter, który posteryzuje i trasuje, najpierw redukuje obraz do N kolorów, co tnie ten ciąg na N pasm, a potem obrysowuje każde pasmo jako osobny kształt. SVG jest technicznie skalowalny, ale projekt został zastąpiony mapą warstwicową. Każde dodatkowe pasmo to też kolejna ścieżka, kolejna granica, na której może prześwitywać włoskowata linia, i kolejna rzecz do wyczyszczenia w edytorze.
Czym jest prawdziwy gradient SVG
SVG ma elementy linearGradient i radialGradient: kierunek albo środek, kilka punktów koloru, a renderer gładko wypełnia kształt w dowolnym rozmiarze. Jeden kształt, jedno wypełnienie, kilka bajtów. Tak narysowałby to grafik i tego chcesz w pliku: edytowalne w Figmie albo Illustratorze, gładkie na ekranie 4K i na plakacie.
Jak svgize go odzyskuje
Silnik traktuje gradient jak hipotezę. Dla każdego obszaru sprawdza, czy piksele najlepiej tłumaczy płaski kolor, gradient liniowy, radialny czy eliptyczny, oceniając to względem zmierzonego szumu i kompresji źródła. Gdy wygrywa gradient, zostaje zapisany jako element gradientu ze swoimi punktami koloru. Gdy wygrywa płaski kolor, dostajesz płaski kolor. Nic nie jest cięte na pasma z zasady; decydują piksele.
- Gradienty liniowe w dowolnym kierunku, także pod kątem.
- Gradienty radialne i eliptyczne, do poświat, przycisków i kulistych rozbłysków.
- Gradienty wewnątrz kształtu, który ma też ostry obrys: krawędź jest wspólna z sąsiadem, wypełnienie jest gradientem.
Czego nie da się odzyskać
Gradient z kilkoma nawrotami koloru, gradient siatkowy albo miękkie fotograficzne cieniowanie nie mają pojedynczego elementu SVG, który by je opisał. Dla nich silnik przechodzi na gładkie warstwy tonalne w trybie Ilustracja: wygląda dobrze, skaluje się, ale to stos kształtów, nie jedno wypełnienie. Jeśli gradient ma znaczenie przy późniejszej edycji, poproś grafika albo generator o prostszą wersję z dwoma punktami koloru.
Druk, cięcie i haft
Druk cyfrowy i ekrany obsługują gradienty SVG wprost. Cięcie folii, grawerowanie laserem i haft nie: gradientu nie da się wyciąć ani wyszyć. Dla nich skonwertuj wersję projektu w płaskich kolorach albo ustaw w svgize limit kolorów, żeby gradient został celowo sprowadzony do kilku płaskich stopni, które maszyna obsłuży. Sitodruk jest gdzieś pośrodku; kilka płaskich stopni zwykle drukuje się na tkaninie lepiej niż prawdziwy gradient.
Sprawdzenie wyniku
Otwórz SVG w edytorze tekstu i wyszukaj „Gradient”. Jeśli wypełnienie to jeden element z dwoma albo trzema punktami koloru, gradient przetrwał. Jeśli zamiast tego widzisz dziesiątki ścieżek z odrobinę różnymi kolorami hex, masz pasy. Liczby ścieżek i kolorów pokazywane obok każdego wyniku svgize mówią to samo jeszcze przed pobraniem.