Dlaczego Twój SVG wygląda na spikselizowany i jak to naprawić

SVG powinien zachowywać ostrość przy skalowaniu, więc jeśli mimo to widzisz krawędzie z wyraźnymi pikselami, zacznij od trzech częstych przyczyn. Plik może zawierać rzeczywiste piksele, aplikacja może rasteryzować jego podgląd lub import albo prawdziwa grafika wektorowa może po prostu wyglądać nieostro na małej siatce pikseli. Każda przyczyna wymaga innego rozwiązania, a krótka diagnoza pozwoli Ci ustalić, z którą masz do czynienia. Jednej rzeczy ten wpis nie dotyczy: logo w formacie PNG lub JPG, które pikselizuje się po powiększeniu. Taki plik nigdy nie był SVG, a ten problem ma własne rozwiązanie.

Przyczyna 1: wewnątrz Twojego SVG są piksele

To pułapka osadzonego obrazu. SVG jest formatem kontenerowym, a specyfikacja SVG 2 pozwala elementowi <image> osadzać zawartość rastrową lub się do niej odwoływać. Jeśli potrzebujesz odróżnić podlinkowany PNG od osadzonych danych lub zagnieżdżonego SVG, skorzystaj z audytu SVG o mieszanej zawartości. Narzędzia mogą wykorzystywać tę możliwość na kilka sposobów:

• Pozorne konwersje. Niektóre narzędzia „PNG do SVG” w ogóle nie wykonują wektoryzacji. Umieszczają bitmapę w znaczniku <image> i zwracają ją z rozszerzeniem .svg. Skaluje się dokładnie tak samo źle jak oryginalny PNG, bo jest oryginalnym PNG.
• Eksporty, które rasteryzują trudne elementy. Aplikacje projektowe eksportują jako ścieżki to, co potrafią, i po cichu rasteryzują resztę: cienie, rozmycia, siatki gradientów, wypełnienia obrazem. Właśnie tak logo pozostaje ostre wszędzie poza jednym zakrzywieniem lub efektem — to ta sama zagadka „częściowej pikselizacji”, która wypełnia fora dla projektantów.
• Zdjęcia. Fotografii nie da się zamienić w wyraźne ścieżki wektorowe, więc narzędzia „konwertujące” zdjęcia do SVG często je po prostu osadzają albo tworzą przybliżenie z efektem posteryzacji. Narzędzia do map robią to nawet celowo w warstwach cieniowania, co jest uzasadnione, ponieważ cieniowanie z natury ma ciągłe przejścia tonalne.
• Formaty kontenerowe. Plik może zawierać dane wektorowe, które jedna aplikacja odczytuje, a inna nie. Gdy aplikacja trafia na dane, których nie rozumie, korzysta z zapisanego w pliku podglądu rastrowego. Wtedy w jednym programie widzisz piksele, a w innym ostrą grafikę wektorową.

Jak to potwierdzić: otwórz plik .svg w dowolnym edytorze tekstu i wyszukaj <image. Winowajcą jest blok danych base64. W Inkscape lub Illustratorze kliknij rozmyty fragment: jeśli zaznaczony zostaje jeden prostokątny obiekt „obrazu” zamiast ścieżek, odpowiedź jest taka sama. To ten sam test, który wykrywa pozorne SVG z narzędzi AI i eksporterów, a zajmuje mniej niż minutę.

Rozwiązanie: piksele muszą stać się ścieżkami, czyli zawartość rastrową trzeba rzeczywiście zwektoryzować. Przepuść oryginalny obraz (lub ten osadzony) przez prawdziwą konwersję obrazu na grafikę wektorową i zastąp element <image> wynikiem wektoryzacji. Jeśli osadzona zawartość jest fotografią, wektoryzacja ma swoje ograniczenia; czasami uczciwym rozwiązaniem jest zaakceptowanie obrazu rastrowego tam, gdzie jest on właściwym wyborem.

Wskazówka w samym pliku

Przyczyna 2: plik jest poprawny, ale program go rasteryzuje

Jeśli przeglądarka internetowa lub Inkscape pokazuje ostre ścieżki, a w jednej aplikacji widzisz pikselizację, przestań edytować plik. Problem leży w sposobie importowania lub wyświetlania podglądu w tej aplikacji:

• Niektóre mechanizmy importu w aplikacjach rasteryzują SVG do rozmiaru importu lub podglądu. Jeśli później powiększysz taki obraz zapisany w pamięci podręcznej, powiększasz bitmapę. Rozwiązaniem po stronie aplikacji jest importowanie lub renderowanie w docelowej rozdzielczości.
• After Effects może stale rasteryzować warstwy wektorowe podczas ich transformacji; Adobe opisuje przełącznik Continuously Rasterize dla warstw wektorowych. Jeśli tylko podgląd kompozycji wygląda nieostro, sprawdź rozdzielczość podglądu i przełącznik warstwy, zanim zmienisz SVG.
• Illustrator może celowo wyświetlać grafikę w trybie Pixel Preview. Wyłącz View > Pixel Preview (podgląd pikseli), zanim uznasz, że sama ścieżka jest spikselizowana.
• Miniatury i podglądy. Miniatury w menedżerze plików i szybkie podglądy to rasteryzacje w niskiej rozdzielczości. Nic nie mówią o samym pliku.

Uniwersalny test: otwórz ten sam plik w przeglądarce internetowej lub Inkscape. Jeśli tam jest ostry, Twój SVG jest poprawny, a rozwiązanie znajdziesz w ustawieniach importu lub podglądu drugiej aplikacji.

W przypadku zasobów do gier sprawdź proces importu i rasteryzacji SVG w Godot lub sposób importowania SVG do Unity odpowiedni dla Twojego edytora i systemu UI, zanim założysz, że źródło nie zawiera ścieżek wektorowych.

Przyczyna 3: prawdziwa grafika wektorowa jest nieostra w małych rozmiarach

Ikony mają zwykle od 16 do 24 pikseli, a przy takim rozmiarze matematycznie idealna krzywa musi dopasować się do zgrubnej siatki pikseli. Antyaliasing nadaje pikselom na krawędzi odcienie szarości, przez co efekt wygląda na „lekko rozmyty”, zwłaszcza przy cienkich obrysach i pozycjach wypadających na połówkach pikseli. Po powiększeniu widać idealnie ostre krawędzie wektorowe — dzięki temu wiesz, że nie jest to pułapka osadzonego obrazu.

Rozwiązania leżą po stronie projektu: wyrównaj poziome i pionowe krawędzie do pełnych pikseli w docelowym rozmiarze, ustawiaj szerokości obrysów na wartości wyrażone pełną liczbą pikseli i wybieraj zestawy ikon zaprojektowane dla rozmiaru, którego używasz. Dane ścieżek o bardzo dużej precyzji, pochodzące z eksportu narzędzi projektowych, mogą nasilać rozmycie w małych rozmiarach; uproszczone ścieżki renderują się bardziej przewidywalnie.

Przyczyny i rozwiązania w skrócie

Jak nie dopuścić pikseli do swoich SVG

Zapobieganie sprowadza się głównie do momentu konwersji lub eksportu. Zanim zaczniesz polegać na dowolnym SVG, sprawdź go raz w edytorze tekstu: elementy <path> są w porządku; bloki danych <image> nie są grafiką wektorową. Gdy konwertujesz obraz, używaj konwertera, który tworzy ścieżki zamiast tylko opakowywać obraz, i potwierdź wynik, zaznaczając poszczególne kształty. Gdy eksportujesz z narzędzia projektowego, najpierw spłaszcz efekty lub rozwiń je do ścieżek, ponieważ wszystko, czego eksporter nie potrafi zapisać jako grafiki wektorowej, trafi do pliku jako piksele. Pamiętaj też, czym właściwie jest SVG: rozszerzenie obiecuje format, a nie zawartość.

Jak wygląda to w PerfectVector

PerfectVector pozwala uniknąć tej pułapki: wektoryzuje Twój obraz do prawdziwych ścieżek i nigdy nie umieszcza samej bitmapy w kontenerze SVG. Prześlij PNG lub JPG, a otrzymasz kształty, które możesz zaznaczać, zmieniać im kolory i dowolnie powiększać. Każdy kolor stanowi osobny edytowalny obiekt, a w całym pliku nie ma ani jednego elementu <image>. Jeśli właśnie odkrywasz, że Twój „SVG” był przebraną bitmapą, poprawnie przekonwertuj oryginalny obraz i wykonaj ten sam test w edytorze tekstu na pliku wynikowym. Zobaczenie tej różnicy choć raz to najszybszy sposób, by już nigdy nie wpaść w tę pułapkę. Pierwsze konwersje są bezpłatne, bez podawania karty kredytowej.

Osadzony obraz po powiększeniu

Prawdziwa grafika wektorowa po powiększeniu

Najczęściej zadawane pytania

Dlaczego mój SVG wygląda na spikselizowany po powiększeniu? Samo powiększenie nie dowodzi, że SVG zawiera piksele, ponieważ niektóre aplikacje rasteryzują swoje podglądy. Otwórz plik w przeglądarce internetowej lub Inkscape, a następnie sprawdź jego kod źródłowy pod kątem elementu <image> albo zaznacz rozmyty obszar i sprawdź, czy jest prostokątnym obiektem obrazu. Jeśli te testy potwierdzą osadzoną zawartość rastrową, zwektoryzuj ją i zastąp element obrazu.

Jak sprawdzić, czy mój SVG zawiera osadzony obraz? Otwórz go w dowolnym edytorze tekstu i wyszukaj <image. Długi ciąg data:image/png;base64 oznacza bitmapę osadzoną w pliku. Możesz też kliknąć rozmyty obszar w Inkscape lub Illustratorze: jeśli zaznacza się jako jeden prostokątny obiekt obrazu zamiast ścieżek, jest osadzony.

Dlaczego mój SVG jest spikselizowany w jednej aplikacji, ale wygląda dobrze w przeglądarce? Aplikacja go rasteryzuje. Silniki gier rasteryzują SVG do rozmiaru importu, podglądy After Effects rasteryzują je w rozdzielczości kompozycji, a niektóre aplikacje domyślnie renderują osadzone obrazy z interpolacją dającą efekt widocznych pikseli. Jeśli przeglądarka internetowa lub Inkscape pokazuje ostrą grafikę, plik jest poprawny; dostosuj ustawienia aplikacji.

Czy mogę naprawić SVG zawierający osadzony obraz? Tak. Weź oryginalny obraz rastrowy (lub wyodrębnij ten osadzony) i przepuść go przez prawdziwe narzędzie do wektoryzacji, a następnie użyj wyniku zamiast elementu obrazu. Jeśli osadzona zawartość jest zdjęciem, spodziewaj się stylizowanego przybliżenia wektorowego zamiast wiernej kopii, ponieważ zdjęć nie da się sprowadzić do wyraźnych ścieżek wektorowych.

Dlaczego moje ikony SVG wyglądają na rozmyte w małych rozmiarach? Zwykle jest to nieostrość wynikająca z siatki pikseli, a nie osadzony obraz. Przy rozmiarze od 16 do 24 pikseli antyaliasing zamienia niewyrównane krawędzie w szare piksele. Wyrównaj krawędzie i szerokości obrysów do pełnych pikseli w docelowym rozmiarze, a ikony staną się ostrzejsze. Powiększ je, by potwierdzić, że same ścieżki są ostre.

Czy konwersja PNG do SVG zawsze daje prawdziwą grafikę wektorową? Nie. Niektóre narzędzia rzeczywiście wektoryzują obraz do ścieżek, a inne tylko umieszczają PNG w kontenerze SVG. Wynik zachowuje ostrość przy skalowaniu wyłącznie w pierwszym przypadku. Sprawdzaj każdy przekonwertowany plik pod kątem znaczników image i wybieraj konwerter, który daje w wyniku edytowalne kształty.

Źródła

1. W3C: SVG 2 embedded content — Definiuje element SVG <image> i zawartość rastrową wewnątrz dokumentu SVG.
2. Adobe Illustrator: Viewing artwork — Opisuje Pixel Preview i inne tryby wyświetlania.
3. Adobe After Effects: Layers — Opisuje przełącznik Continuously Rasterize dla warstw wektorowych.
4. Adobe Illustrator: Create pixel-perfect art — Wyjaśnia wyrównywanie do siatki pikseli w grafikach o małych rozmiarach.

Masz podejrzenia co do pliku, nad którym pracujesz? Wykonaj test powiększenia, a następnie przekonwertuj oryginalny obraz na prawdziwy SVG oparty na ścieżkach i porównaj. Piksele się ukrywają; ścieżki nie.