Zamień ikony PNG na SVG, aby stworzyć spójny zestaw UI

Nie konwertuj całego folderu za jednym razem. Zacznij od małej grupy obejmującej najprostszą ikonę, ikonę z największą liczbą szczegółów, kształt z krzywiznami i dowolną ikonę z wycięciem. Na tej próbce ustal zasady dla SVG, a następnie zastosuj je do reszty zestawu. Dzięki temu wychwycisz nietrafione decyzje dotyczące wektoryzacji, zanim powielisz je w dziesiątkach plików.

Sama konwersja to tylko jeden z etapów. Użyteczny zestaw UI wymaga też wspólnego układu współrzędnych, spójnej wielkości optycznej, przewidywalnego zachowania kolorów, edytowalnych ścieżek i sprawdzenia plików w produkcie, który będzie korzystać z ikon.

Proces w skrócie

1. Zrób przegląd zestawu PNG i znajdź duplikaty lub brakujące pliki źródłowe.
2. Wybierz reprezentatywne ikony i ustal wspólną siatkę, odstępy od krawędzi, model wypełnień lub obrysów oraz zasady kolorów.
3. Zamień przykładowe ikony na rzeczywiste ścieżki.
4. Sprawdź sylwetkę, węzły, przestrzeń negatywową i obszary kolorów.
5. Ujednolić zestaw w jednym edytorze grafiki wektorowej, a następnie skonwertuj i sprawdź pozostałe ikony.
6. Przetestuj wyeksportowane pliki SVG w docelowym interfejsie i procesie przetwarzania zasobów.

Zdecyduj, które ikony PNG warto zamienić na SVG

Płaskie ikony z wyraźnymi granicami dobrze nadają się do wektoryzacji. Inne obrazy wymagają innego podejścia. Uporządkuj folder, zanim otworzysz konwerter.

Jeśli jedynym zachowanym źródłem jest kontener ikon zamiast pliku PNG, najpierw odzyskaj grafikę, korzystając z odpowiedniej procedury konwersji ICO na SVG lub konwersji ICNS na SVG. Następnie ujednolić uzyskaną grafikę według tych samych zasad zestawu UI opisanych poniżej.

Nazwa pliku z rozszerzeniem SVG nie dowodzi, że piksele zostały zamienione na ścieżki wektorowe. Format może zgodnie ze specyfikacją zawierać osadzony obraz rastrowy w elemencie <image>, co wyjaśnia specyfikacja osadzonej zawartości SVG. Jeśli wyeksportowany plik nadal zaznacza się jako jeden prostokątny obraz lub przy dużym powiększeniu widać w nim piksele, przeprowadź kontrolę osadzonego obrazu rastrowego, zanim dodasz go do zestawu.

Ustal zasady zestawu UI przed wektoryzacją

Folder ikon, z których każda osobno wygląda poprawnie, nadal może być niespójny jako całość. Najpierw spisz zasady zestawu, nawet jeśli oryginalne pliki PNG jeszcze ich nie spełniają.

Wybierz jeden układ współrzędnych

Używaj jednego viewBox dla ikon, które mają współdzielić rozmiar komponentu. Wartości nie muszą wynosić 24 na 24 ani 16 na 16; powinny pasować do Twojego systemu. SVG odwzorowuje prostokąt viewBox w wyświetlanym obszarze, więc identyczne wymiary zewnętrzne pomagają tylko wtedy, gdy grafika jest w nich rozmieszczona w spójny sposób. To odwzorowanie definiuje specyfikacja układów współrzędnych SVG 2.

Zapisz:

• wspólny viewBox;
• docelowy środek wizualny i linię bazową;
• minimalne odstępy wewnętrzne;
• elementy, które mogą celowo wykraczać poza standardowe granice optyczne.

Wybierz model wypełnień lub obrysów

Zdecyduj, czy rodzina ikon będzie zbudowana z wypełnionych sylwetek, edytowalnych obrysów czy udokumentowanego połączenia obu modeli. Zestaw ikon konturowych oparty na obrysach wymaga spójnych zakończeń, łączeń i wizualnej grubości. Zestaw oparty na wypełnieniach wymaga spójnej przestrzeni negatywowej i sposobu wykończenia krawędzi. Wektoryzacja może zamienić cienki obrys w zamknięty kontur, dlatego sprawdzaj geometrię, zamiast polegać wyłącznie na podglądzie.

Zdecyduj, jak będą kontrolowane kolory

W systemie jednokolorowym stosuj spójną regułę określania koloru, którą docelowe środowisko może powiązać z tokenem koloru ikony. Dla ikon wielokolorowych określ dozwoloną paletę i obszary, które mogą zmieniać kolor. Nie zachowuj drobnych obszarów o niemal identycznych kolorach powstałych wskutek wygładzania krawędzi, chyba że pełnią widoczną funkcję.

Najpierw skonwertuj reprezentatywną próbkę

Wybierz od czterech do sześciu ikon, które ujawnią trudne przypadki. Uwzględnij okrąg lub łuk, linię ukośną, niewielkie zamknięte światło lub otwór oraz ikonę o największym zagęszczeniu elementów w rodzinie. Jeśli zestaw używa wielu kolorów, uwzględnij też jedną taką ikonę.

1. Przygotuj pliki PNG

Użyj najczystszego dostępnego eksportu. Usuń przypadkowe prostokąty tła, stosuj spójne kadrowanie i nie powiększaj małego, rozmytego źródła tylko po to, by uzyskać więcej pikseli. Poradnik przygotowania źródeł do konwersji PNG na SVG bez utraty jakości omawia szczegóły istotne dla wektoryzacji.

Zachowaj nietkniętą kopię każdego oryginału. Łatwiej ocenisz poprawki, gdy porównasz SVG ze źródłem, zamiast polegać na pamięci.

2. Przeprowadź wektoryzację przykładowych ikon

Użyj automatycznego wektoryzatora lub narzędzia do wektoryzacji w swoim programie graficznym. Obecna funkcja Image Trace w Illustratorze udostępnia ustawienia kolorów, ścieżek, narożników i szumu. Obecna funkcja Vectorize w Figmie oferuje tryby kolorów po wektoryzacji, a jej dokumentacja zaznacza, że złożone obrazy lub obrazy o niskiej rozdzielczości mogą nie nadawać się do skutecznej wektoryzacji (Adobe Image Trace; Figma Vectorize).

Jeśli chcesz pracować w przeglądarce, prześlij próbkę do konwertera PNG na SVG w PerfectVector. Porównaj podgląd z oryginałem, sprawdź kształty i obszary kolorów, a następnie pobierz SVG, który chcesz ujednolicić w edytorze grafiki wektorowej. Najpierw przetwórz reprezentatywną grupę, zanim zdecydujesz się na resztę folderu.

Jeśli Figma jest głównym edytorem Twojego zestawu, porównanie pracy z Figma Vectorize i zewnętrznymi plikami SVG pomoże Ci zestawić oba podejścia na tej samej próbce. Oceń kształty po imporcie, w tym otwory i obszary kolorów, które musisz edytować.

3. Sprawdź ścieżki, nie tylko podgląd

Otwórz każdy wynik w edytorze grafiki wektorowej i zaznacz kształty. Ścieżki SVG składają się z poleceń i współrzędnych, w tym odcinków linii i krzywych zdefiniowanych w specyfikacji ścieżek SVG 2. Potrzebujesz wystarczającej liczby węzłów, by zachować sylwetkę; nie ma jednej uniwersalnej liczby docelowej.

Zwróć uwagę na:

• gęste ciągi węzłów wzdłuż nieskomplikowanej krzywej;
• przypadkowe drobinki lub prostokąty tła;
• nakładające się kopie tej samej krawędzi;
• drobne fragmenty kolorów powstałe wskutek wygładzania krawędzi;
• otwory lub zamknięte światła, które zostały wypełnione podczas wektoryzacji;
• jeden prostokąt rastrowy zamiast ścieżek, które można zaznaczać.

Jeśli prosty kształt tonie w punktach, skorzystaj z diagnostyki nadmiernej liczby węzłów, zanim go uprościsz. Zbyt intensywne porządkowanie może przesunąć narożniki i zamknąć małe przestrzenie, dlatego porównuj edytowaną ścieżkę z PNG.

Ujednolić ikony jako jedną rodzinę

Gdy struktura przykładowych wyników wektoryzacji jest już poprawna, umieść je na wspólnej siatce i oceń razem. To właśnie na tym etapie zestaw staje się systemem.

Przegląd całego zestawu

Sprawdź zestaw w rzeczywistym rozmiarze używanym w interfejsie oraz przy większym powiększeniu podczas edycji:

Korekta optyczna jest dopuszczalna. Okrąg może wymagać niewielkiego wyjścia poza prostokąt mieszczący kwadrat, aby oba kształty wydawały się tej samej wielkości. Zasadą jest spójny odbiór wizualny oparty na udokumentowanej siatce, a nie wciskanie każdego kształtu w identyczne granice geometryczne. Proces tworzenia kart wizualnego planu dnia do druku stosuje to rozróżnienie do pól na ilustracje, osobnych etykiet i strony PDF o określonych wymiarach.

Jeśli zestaw ilustracji codziennych czynności wymaga edycji kształtów przed rozplanowaniem kart, użyj konwertera grafik do pomocy wizualnych na jednym reprezentatywnym rysunku. Zachowaj etykiety osobno i sprawdź, czy skonwertowana ilustracja nadal przekazuje zamierzone znaczenie.

Jak wygląda to w PerfectVector

PerfectVector pasuje do etapu wektoryzacji pomiędzy przygotowaniem źródeł a ujednoliceniem zestawu. Użyj go, aby odtworzyć reprezentatywną próbkę PNG jako edytowalne kształty wektorowe, a następnie oceń wynik według kryteriów istotnych dla tego zestawu:

1. Czy każda ikona zachowuje swoją sylwetkę i przestrzeń negatywową?
2. Czy możesz zaznaczać wybrane obszary i zmieniać ich kolory?
3. Czy krzywe mają liczbę węzłów, która pozwala wygodnie je edytować?
4. Czy wynik łatwiej ujednolicić niż po ręcznej wektoryzacji lub użyciu narzędzia wbudowanego w aplikację?

Jeśli próbka spełnia kryteria, skonwertuj pozostałe odpowiednie pliki PNG i przenieś je do tego samego pliku głównego, aby ocenić cały zestaw. Jeśli nie, zmień źródło lub metodę wektoryzacji, zanim przetworzysz kolejne ikony. PerfectVector nie zastępuje decyzji o wyrównaniu optycznym i nazewnictwie, które należą do systemu projektowego.

Porządkuj pliki bez utraty źródeł

Zachowaj dwie warstwy plików:

• Archiwum źródeł: nietknięte pliki PNG, wszelkie oryginalne pliki projektowe i notatki o pochodzeniu.
• Edytowalny plik główny: ujednolicone ikony wektorowe na wspólnej siatce.
• Eksporty do przekazania: zoptymalizowane pliki SVG używane przez produkt.

Edytuj kształty w pliku głównym, a następnie ponownie generuj pliki do przekazania. Unikaj ręcznej edycji osobnych eksportów, ponieważ poprawki w poszczególnych kopiach zaczną się rozchodzić. Jeśli SVG wymaga zmiany kolorów, kształtu lub obszaru roboczego, skorzystaj z procedury edycji SVG i przenieś poprawioną geometrię z powrotem do głównego zestawu.

Jeśli docelowo używasz ikon wielokrotnego użytku w aplikacji internetowej, po zatwierdzeniu grafiki zastosuj procedurę tworzenia arkusza symboli SVG. Obejmuje ona sprawdzenie identyfikatorów symboli, zagnieżdżonych odwołań, granic współrzędnych, zasad wypełnień i obrysów oraz nazw instancji, zanim zestaw trafi do aplikacji. Jeśli interfejs rysuje ikony na canvas, przenieś ścieżki SVG do canvas za pomocą Path2D i porównaj transformację współrzędnych, kolory, otwory oraz rozdzielczość bufora rastrowego z głównym plikiem SVG.

Jeśli biblioteka projektowa ma trafić do Penpot, wstaw przykładowy SVG na obszar roboczy i przetestuj jeden obszar koloru oraz jeden kontur, zanim dodasz resztę zestawu. Poradnik importowania SVG do Penpot rozróżnia import pliku projektu od wstawiania grafiki i wyjaśnia, jak sprawdzać natywne kształty, surową zawartość SVG oraz edytowalne etykiety. Dzięki temu wykryjesz ikonę, która wygląda poprawnie, ale nie pozwala na edycję potrzebną w zestawie.

Przed przekazaniem przetestuj kilka ikon w każdym istotnym środowisku: bibliotece projektowej, komponencie aplikacji oraz na każdym etapie budowania lub optymalizacji. Sprawdź stany nieaktywne i warianty z odwróconymi kolorami, jeśli system ich używa. Plik o poprawnej strukturze nadal może nie pasować do zestawu, jeśli założenia dotyczące jego kolorów lub rozmiaru nie odpowiadają komponentowi. Jeśli środowiskiem docelowym jest Android, użyj listy kontrolnej importu PNG do VectorDrawable, aby sprawdzić rozmiar obszaru wyświetlania, wypełnienia, złożoność ścieżek i obsługę przez importer, zanim zasób trafi do aplikacji. W projektach Godot użyj listy kontrolnej importu SVG do Godot, aby wybrać typ importu tekstury i sprawdzić rozmiar obrazu rastrowego, nadpróbkowanie oraz obsługiwane elementy grafiki. W projektach Unity użyj listy kontrolnej importu SVG do Unity, aby wybrać importer zgodny z edytorem i sprawdzić docelowe użycie w UI Toolkit lub jako sprite.

W projektach SwiftUI sprawdź procedurę pracy z SVG w katalogu zasobów i podczas renderowania, aby sprawdzić zasób obrazu wskazywany przez nazwę, zachowanie kolorów w trybie oryginalnym lub szablonowym oraz końcowy rozmiar wyświetlania.

Lista kontrolna przekazania zestawu UI

• Każda zwektoryzowana ikona powstała z najczystszego dostępnego źródła.
• Ikony współdzielą udokumentowany viewBox, odstępy od krawędzi i zasady wyrównania.
• Wielkość optyczna i wizualna grubość są spójne w rzeczywistym rozmiarze UI.
• Ikony wypełnione oraz ikony oparte na obrysach są zgodne z modelem określonym w systemie.
• Obszary kolorów są przewidywalnie przypisane do zatwierdzonej palety lub reguły tokenów.
• Krzywe mają wystarczającą liczbę węzłów, by wiernie oddawać kształt, bez wyraźnego nadmiaru punktów na ścieżkach.
• Żaden SVG nie zawiera przypadkowo osadzonego obrazu rastrowego, prostokąta tła ani powielonej krawędzi.
• Nazwy plików i komponentów są unikatowe i stałe.
• Wyeksportowany zestaw został przetestowany po standardowym etapie optymalizacji produktu.
• Archiwum źródeł, edytowalny plik główny i pliki do przekazania są przechowywane osobno.

Najczęściej zadawane pytania

Czy mogę zbiorczo skonwertować wszystkie ikony PNG, zanim je uporządkuję? Możesz, ale bezpieczniej zacząć od reprezentatywnej próbki. Skonwertuj kilka ikon obejmujących najtrudniejsze kształty w zestawie, ustal siatkę i zasady ścieżek, a dopiero potem przetwórz resztę. W przeciwnym razie jedna nietrafiona decyzja podczas wektoryzacji może wymusić powtarzanie tych samych poprawek w całym folderze.

Czy każda ikona SVG powinna używać tego samego viewBox? Ikony współdzielące jeden komponent UI zwykle zyskują na wspólnym viewBox, ale grafika wewnątrz niego może wymagać korekty optycznej. Zachowaj spójny układ współrzędnych, dopuszczając jednocześnie udokumentowane wyjście poza granice lub zmiany odstępów dla okręgów, spiczastych kształtów albo ikon o wyjątkowo dużym zagęszczeniu elementów.

Ile węzłów powinna mieć ikona UI? Nie ma jednej uniwersalnej liczby. Używaj najmniejszej liczby węzłów, która zachowuje zamierzoną sylwetkę, narożniki i przestrzeń negatywową. Porównuj ikony o podobnej złożoności i sprawdzaj każdą nieskomplikowaną krzywą zawierającą gęsty ciąg punktów.

Czy zachować ikony PNG po ukończeniu zestawu SVG? Tak. Zachowaj oryginalne pliki PNG i wszelkie wcześniejsze źródła projektu w archiwum. Dokumentują pochodzenie i stanowią wizualny punkt odniesienia, gdy trzeba powtórzyć wektoryzację. Do edycji używaj ujednoliconego głównego pliku grafiki wektorowej i generuj z niego pliki SVG do przekazania.

Źródła

1. W3C — SVG Coordinate Systems, Transformations and Units — Definiuje obszary wyświetlania SVG, układy współrzędnych, viewBox i sposób odwzorowania grafiki w wyświetlanym obszarze.
2. W3C — SVG Paths — Definiuje polecenia linii i krzywych, które tworzą edytowalną geometrię ścieżek SVG.
3. W3C — SVG Embedded Content — Potwierdza, że SVG może zawierać obraz rastrowy zamiast ścieżek wektorowych.
4. Adobe Illustrator — Vectorize images using Image Trace — Dokumentuje obecny proces wektoryzacji obrazów rastrowych i uzyskiwanie edytowalnych ścieżek.
5. Figma Learn — Convert static images to vector layers — Dokumentuje obecny proces pracy z funkcją Vectorize w Figmie, tryby kolorów i ograniczenia obrazów źródłowych.

---

Zacznij od kilku najtrudniejszych ikon, nie od całego folderu. Skonwertuj przykładowe pliki PNG na SVG, sprawdź ich ścieżki i obszary kolorów, a następnie ujednolić najlepszy wynik według zasad swojego zestawu UI, zanim zastosujesz ten proces na większą skalę.