Z PNG do Android VectorDrawable: lista kontrolna importu

Android Studio nie tworzy ścieżek wektorowych na podstawie pikseli PNG. Narzędzie Vector Asset Studio importuje pliki SVG lub PSD i konwertuje obsługiwaną geometrię na XML VectorDrawable. Dlatego niezawodny proces pracy z PNG składa się z dwóch etapów: najpierw przekształcasz piksele w rzeczywisty plik SVG, a następnie importujesz ten SVG do Android Studio.

Konwerter przekształcający PNG bezpośrednio w VectorDrawable może łączyć oba etapy. Może to być wygodne rozwiązanie dla prostej ikony, ale nadal wymaga tych samych kontroli. Upewnij się, że wynik zawiera ścieżki, odpowiada źródłu, używa zamierzonego obszaru współrzędnych i nie korzysta z funkcji, których importer Androida nie potrafi odwzorować.

W przypadku interfejsu we Flutterze skorzystaj z procesu pracy z zasobami SVG we Flutterze. Opisuje on deklarowanie i renderowanie SVG za pomocą flutter_svg zamiast konwertowania go na natywny XML Android VectorDrawable.

W projekcie .NET MAUI skorzystaj z listy kontrolnej zasobów graficznych MAUI, aby sprawdzić źródło, wynik kompilacji i rozmiar wyświetlania. Zanim zastosujesz kroki importu do natywnego Android VectorDrawable, przejdź przez proces przetwarzania obrazów właściwy dla tego projektu.

Proces w skrócie

1. Zacznij od czystego PNG o charakterze ikony, a nie od fotografii czy tekstury.
2. Przeprowadź wektoryzację do SVG i upewnij się, że plik zawiera edytowalne ścieżki, a nie osadzony PNG.
3. Usuń przypadkowe kształty i ogranicz nadmiar węzłów, nie zmieniając sylwetki.
4. Zaimportuj SVG za pomocą Vector Asset Studio w Android Studio.
5. Sprawdź w wygenerowanym XML obszar współrzędnych, ścieżki, wypełnienia, obrysy, gradienty i działanie przycinania.
6. Przetestuj zasób drawable w jego rzeczywistym rozmiarze na najstarszej wersji Androida obsługiwanej przez Twoją aplikację.

Wybierz między bezpośrednim konwerterem a ścieżką przez SVG

Obie ścieżki prowadzą do tego samego celu, ale dają dostęp do różnych punktów kontroli.

Ścieżkę z pośrednim plikiem SVG zwykle łatwiej skontrolować. Możesz porównać wynik wektoryzacji z PNG, sprawdzić poszczególne kształty, naprawić otwory i uporządkować ścieżki, zanim Android Studio ponownie przekształci plik.

Bezpośrednie konwertery nie są z założenia złym rozwiązaniem. Na przykład SVG2Vector obecnie reklamuje konwersję PNG do VectorDrawable obok obsługi SVG i innych formatów wejściowych. Potraktuj jego XML jako wersję do sprawdzenia: obejrzyj podgląd w Android Studio, sprawdź ścieżki i wykonaj te same kontrole na urządzeniach, które opisano poniżej (SVG2Vector).

Etap 1: przekształć PNG w rzeczywiste ścieżki SVG

Zacznij od najczystszego dostępnego źródła. Płaskie ikony z wyraźnymi krawędziami i ograniczoną paletą dobrze nadają się do wektoryzacji. Fotografie, miękkie cienie, poświaty i tekstury mogą wygenerować mnóstwo drobnych kształtów, nie dając przy tym użytecznego zasobu dla Androida.

Użyj oryginalnej rozdzielczości PNG. Powiększenie rozmytej ikony dodaje piksele, ale nie odtwarza brakujących informacji o krawędziach. Usuń przypadkowy prostokąt tła i przed wektoryzacją zdecyduj, czy docelowy zasób ma być monochromatyczny, wielokolorowy czy oparty na gradientach.

Przeprowadź wektoryzację pikseli

Prześlij źródło do konwertera PNG na SVG PerfectVector lub użyj innego narzędzia do wektoryzacji, które pozwala sprawdzić wynik. Jeśli źródło znajduje się na telefonie i najpierw potrzebujesz standardowego SVG, skorzystaj z procesu tworzenia SVG na telefonie z Androidem. Porównaj SVG z PNG w docelowym rozmiarze interfejsu, a następnie otwórz go w edytorze grafiki wektorowej i zaznacz kształty.

Sprawdź, czy:

• kontur zewnętrzny jest czysty;
• otwory i puste przestrzenie są zachowane;
• liczba obszarów kolorystycznych jest zgodna z oczekiwaniami;
• nie ma przypadkowych drobinek ani prostokątnego tła;
• krzywe są płynne i nie zawierają gęstych łańcuchów punktów;
• viewBox prawidłowo obejmuje grafikę.

Rozszerzenie .svg nie dowodzi, że przeprowadzono wektoryzację. SVG może zawierać obraz rastrowy za pośrednictwem elementu <image>, zgodnie ze specyfikacją osadzanej zawartości W3C. Jeśli grafika zaznacza się jako jeden prostokąt lub przy dużym powiększeniu widać piksele, skorzystaj z diagnostyki osadzonego obrazu rastrowego, zanim przejdziesz do Android Studio.

Upraszczaj tylko tam, gdzie to pomaga

Złożoność ścieżek ma znaczenie, ponieważ Android musi odczytać i narysować wygenerowaną geometrię. Nie istnieje uniwersalna docelowa liczba węzłów. Prosta krzywa z dziesiątkami ciasno rozmieszczonych punktów wymaga sprawdzenia; nieregularna krawędź ilustracji może faktycznie potrzebować ich więcej.

Usuwaj odizolowane fragmenty i upraszczaj wyraźnie nadmiarowe łańcuchy punktów, porównując wynik ze źródłem. Jeśli porządkowanie zmienia narożniki lub zamyka małe otwory, cofnij je. Poradnik o SVG ze zbyt dużą liczbą węzłów wyjaśnia, jak odróżnić przydatne szczegóły od nadmiarowych elementów ścieżek.

Dwie konwersje, trzy kontrole

Etap 2: zaimportuj SVG do Android Studio

Obecny proces pracy z Vector Asset Studio w Androidzie pozwala wybrać lokalny plik SVG lub PSD, obejrzeć jego podgląd i wygenerować wektorowy zasób drawable w formacie XML (Android Developers).

1. W oknie Project kliknij prawym przyciskiem myszy folder res.
2. Wybierz New > Vector Asset.
3. Wybierz Local file (SVG, PSD) jako typ zasobu.
4. Wskaż SVG i sprawdź podgląd pod kątem błędów lub widocznych zmian.
5. Ustaw nazwę zasobu i docelowy rozmiar.
6. Kliknij Next, potwierdź lokalizację docelową i wybierz Finish.

Wygenerowany zasób powinien znaleźć się wśród zasobów drawable aplikacji jako XML. Zachowaj sprawdzony SVG jako edytowalny plik źródłowy. Jeśli później trzeba będzie zmienić wygląd zasobu, edytuj SVG i ponownie wygeneruj drawable, zamiast ręcznie utrzymywać dwie niezależne wersje.

Co zostaje zachowane podczas importu SVG do VectorDrawable?

VectorDrawable nie jest pełnym mechanizmem renderowania SVG. Vector Asset Studio obsługuje określony podzbiór funkcji, więc SVG może wyglądać poprawnie w przeglądarce, a mimo to zmienić się podczas importu.

Te ograniczenia pochodzą z aktualnej tabeli zgodności Vector Asset Studio. Dokumentacja importera podaje również, że obsługiwane są tylko obrysy wyśrodkowane. Jeśli źródło używa obrysu wewnętrznego lub zewnętrznego, przed importem zamień go na kształt z wypełnieniem albo przerysuj krawędź.

Gradienty wymagają dodatkowej kontroli wersji. Dokumentacja API VectorDrawable opisuje wartości gradientu lub listy kolorów zależnych od stanu dla fillColor i strokeColor od poziomu API 24. Opisuje również opcje evenOdd i nonZero dla fillType od poziomu API 24 (VectorDrawable API reference). Jeśli Twoja aplikacja obsługuje starsze wersje, przetestuj dokładny mechanizm zgodności używany w Twojej kompilacji, zamiast zakładać, że podgląd w Android Studio rozstrzyga sprawę.

Przeczytaj wygenerowany XML, zanim go zaakceptujesz

Nie musisz ręcznie pisać XML VectorDrawable, ale szybki przegląd struktury pozwala wychwycić wiele problemów z importem.

Szerokość, wysokość i obszar współrzędnych

Główny element <vector> oddziela rozmiar wyświetlania od współrzędnych rysowania:

• android:width i android:height określają domyślne wymiary zasobu drawable, zwykle w dp;
• android:viewportWidth i android:viewportHeight definiują przestrzeń współrzędnych używaną przez ścieżki.

Zmiana samej szerokości i wysokości skaluje tę samą geometrię. Zmiana obszaru współrzędnych wpływa na to, jak współrzędne ścieżek są odwzorowywane w obszarze wyświetlania. Jeśli ikona wygląda na przyciętą, ma nadmierne marginesy lub jest rozciągnięta, porównaj te cztery wartości z viewBox pliku SVG i docelowym rozmiarem zasobu.

Ścieżki i ich wygląd

Każdy element <path> zawiera android:pathData, którego polecenia stosują tę samą ogólną składnię ścieżek co atrybut d w SVG. Sprawdź fillColor, strokeColor, strokeWidth, zakończenia linii, połączenia linii i fillType, jeśli występują.

Nie optymalizuj pliku przez usuwanie nieznanych poleceń ścieżek. Najpierw porównaj podgląd ze źródłem, a następnie uprość kształt w głównym pliku SVG, gdzie łatwiej go sprawdzić.

Grupy i przycinanie

Grupy mogą zawierać wartości przesunięcia, skali, obrotu i punktu obrotu. Element <clip-path> ogranicza widoczną geometrię. Jeśli wynik jest przesunięty lub zamaskowany obszar znika, sprawdź hierarchię grup i porównaj ją z transformacjami oraz strukturą przycinania w źródłowym SVG.

Przetestuj drawable tam, gdzie będzie używany w aplikacji

Podgląd importu potwierdza, że Android Studio odczytało plik. Nie potwierdza jednak, że zasób działa poprawnie podczas działania aplikacji.

Skorzystaj z tej listy kontrolnej odbioru:

• Drawable odpowiada zamierzonej sylwetce PNG w normalnym rozmiarze interfejsu.
• Otwory, światła wewnętrzne i nakładające się obszary pozostają poprawne.
• Jednolite wypełnienia i obrysy mają zamierzone kolory.
• Gradienty renderują się poprawnie na najstarszej obsługiwanej wersji Androida.
• Obszar współrzędnych zachowuje zamierzone marginesy i proporcje.
• Ikona pozostaje czytelna w jasnym i ciemnym motywie, w stanie nieaktywnym oraz po zastosowaniu barwienia używanego przez aplikację.
• XML nie zawiera przypadkowych fragmentów ani wyraźnie nadmiarowych danych ścieżek.
• Zasób został przetestowany w rzeczywistym komponencie, a nie tylko w podglądzie importu.
• Oryginalny PNG i edytowalny główny plik SVG pozostają zarchiwizowane.

Przetestuj zasób w rzeczywistym rozmiarze określonym w dp na co najmniej jednym emulatorze lub urządzeniu odpowiadającym najstarszej obsługiwanej wersji. Sprawdź też każdy stan lub motyw, który zmienia barwienie. Technicznie poprawna ścieżka nadal może nie pasować, jeśli jej marginesy, ciężar wizualny lub założenia kolorystyczne różnią się od pozostałych ikon w zestawie.

Jeśli konwertujesz całą rodzinę ikon, najpierw zastosuj ten proces do reprezentatywnej próbki. Proces konwersji ikon do zestawu UI obejmuje wspólne obszary współrzędnych, rozmiar optyczny, zachowanie kolorów i kontrolę całego zestawu przed przekazaniem.

Kiedy zachować PNG

VectorDrawable najlepiej sprawdza się w przypadku prostych ikon i ilustracji. Wytyczne Androida ostrzegają, że szczegółowa grafika, w tym wiele obrazów wyświetlanych przy uruchamianiu aplikacji, może lepiej sprawdzać się jako zasoby rastrowe. Wskazują też, że początkowy koszt wczytania wektorowego zasobu drawable może być wyższy niż koszt wczytania obrazu rastrowego, i zalecają utrzymywanie zasobów wektorowych w rozmiarze 200 na 200 dp lub mniejszym, aby uniknąć długiego czasu rysowania (Android Developers).

Zachowaj obraz rastrowy lub przeprojektuj grafikę, jeśli jej wygląd opiera się na:

• szczegółach fotograficznych;
• miękkiej teksturze, rozmyciu lub złożonych cieniach;
• wielu drobnych obszarach kolorystycznych;
• nieobsługiwanym efekcie, który decyduje o wyglądzie;
• geometrii tak gęstej, że XML staje się trudny do sprawdzania i utrzymywania.

Celem nie jest zastąpienie każdego PNG. Chodzi o używanie VectorDrawable tam, gdzie skalowalna geometria ścieżek sprawia, że zasób Androida jest mniejszy, czytelniejszy lub łatwiejszy do dostosowania do motywu, bez zamieniania szczegółowego obrazu w kosztowną stertę ścieżek.

Jak wygląda to z PerfectVector

PerfectVector obsługuje pierwszą konwersję. W przypadku odpowiedniej ikony przekształć PNG w SVG, porównaj kształty uzyskane przez wektoryzację ze źródłem i pobierz SVG, który chcesz zachować jako edytowalny plik główny. Następnie zaimportuj ten plik przez Vector Asset Studio i sprawdź wygenerowany XML.

Oceń wynik na każdym etapie:

1. Czy wektoryzacja zachowała sylwetkę i otwory źródła?
2. Czy kształty SVG są edytowalne i nie zawierają osadzonego obrazu rastrowego?
3. Czy Android Studio importuje wymagane wypełnienia, gradienty, elementy przycinające i transformacje?
4. Czy drawable renderuje się poprawnie w rzeczywistym rozmiarze i na minimalnym obsługiwanym poziomie API?

Czysty SVG ułatwia przejście między etapami, ale nie sprawia, że nieobsługiwane funkcje Androida zaczynają działać. Uprość projekt lub zachowaj PNG, jeśli format docelowy nie potrafi wiernie odtworzyć wyglądu.

Najczęściej zadawane pytania

Czy Android Studio może przekształcić PNG bezpośrednio w VectorDrawable? Nie. Obecne Vector Asset Studio importuje lokalne pliki SVG lub PSD, a nie pliki PNG. Najpierw przeprowadź wektoryzację PNG do rzeczywistego SVG albo użyj bezpośredniego konwertera i sprawdź wynikowy XML w Android Studio.

Czy SVG zawsze jest rzeczywistą grafiką wektorową? Nie. SVG może osadzać obraz rastrowy za pomocą elementu image. Otwórz plik w edytorze grafiki wektorowej lub sprawdź jego kod i przed importem upewnij się, że właściwa grafika składa się ze ścieżek lub innych kształtów wektorowych.

Czy gradienty SVG działają w Android VectorDrawable? Vector Asset Studio obsługuje gradienty liniowe, radialne i kątowe, ale ich działanie w aplikacji zależy od wygenerowanego XML i przyjętej strategii obsługi wersji Androida. Dokumentacja API VectorDrawable opisuje gradientowe kolory wypełnienia i obrysu od poziomu API 24, więc przetestuj zasób na najstarszej wersji obsługiwanej przez Twoją aplikację.

Dlaczego otwory, maski lub tekst zmieniły się po imporcie? Importer obsługuje ograniczony podzbiór SVG. Reguły wypełnienia wymagają testowania z uwzględnieniem wersji, przycinanie ma ograniczenia, a tekst nie jest obsługiwany. Zamień potrzebny tekst na kontury, uprość struktury przycinania i porównaj podgląd Androida z SVG, zanim zaakceptujesz drawable.

Czy każdy PNG w aplikacji na Androida powinien zostać zamieniony na XML VectorDrawable? Nie. Najlepiej nadają się do tego proste ikony i ilustracje. Zachowaj fotografie, obrazy z dużą ilością tekstur, złożone efekty i nadmiernie szczegółową grafikę jako zasoby rastrowe, chyba że świadome przerysowanie pozwoli uzyskać prostszą geometrię ścieżek.

Źródła

1. Android Developers — Add multi-density vector graphics — Opisuje proces importu SVG i PSD w Vector Asset Studio, obsługiwany podzbiór SVG, uwagi dotyczące wydajności oraz generowane zasoby drawable.
2. Android Developers — VectorDrawable API reference — Definiuje atrybuty XML elementów vector, path, group i clip-path, w tym obszar współrzędnych, wygląd, reguły wypełnienia i zachowanie zależne od poziomu API.
3. W3C — SVG Embedded Content — Potwierdza, że SVG może zawierać obraz rastrowy za pośrednictwem elementu image.
4. Inkscape Manual — Tracing an Image — Wyjaśnia różnicę między wektoryzacją pikseli obrazu rastrowego a pracą z oryginalną bitmapą.
5. SVG2Vector — PNG to VectorDrawable conversion — Przedstawia aktualną ścieżkę bezpośredniej konwersji omówioną w porównaniu procesów pracy.

---

Chcesz przetestować ikonę do gotowej aplikacji? Przekształć PNG w SVG, sprawdź ścieżki, a następnie zaimportuj zweryfikowany plik do Android Studio. Zachowaj drawable dopiero wtedy, gdy jego obszar współrzędnych, kolory, otwory i renderowanie w aplikacji przejdą kontrolę według listy.