PNG sang Android VectorDrawable: danh sách kiểm tra nhập

Android Studio không đồ lại PNG thành đường dẫn vector. Vector Asset Studio nhập SVG hoặc PSD và chuyển hình học được hỗ trợ thành XML VectorDrawable. Vì vậy, quy trình PNG đáng tin cậy có hai giai đoạn: đồ pixel thành SVG thực, rồi nhập SVG vào Android Studio.

Công cụ chuyển PNG trực tiếp sang VectorDrawable có thể kết hợp cả hai bước. Nó tiện cho biểu tượng đơn giản, nhưng vẫn cần cùng các kiểm tra. Xác nhận đầu ra chứa đường dẫn, khớp nguồn, dùng viewport dự định và tránh tính năng công cụ nhập Android không biểu diễn được.

Với giao diện Flutter, làm theo quy trình tài nguyên SVG cho Flutter. Quy trình khai báo và kết xuất SVG qua flutter_svg thay vì chuyển thành XML VectorDrawable dạng gốc của Android.

Với dự án .NET MAUI, dùng danh sách tài nguyên ảnh MAUI để kiểm tra nguồn, đầu ra bản dựng và kích thước hiển thị. Theo quy trình ảnh của dự án đó trước khi áp dụng bước nhập VectorDrawable dạng gốc của Android.

Quy trình ngắn

1. Bắt đầu với PNG sạch kiểu biểu tượng thay vì ảnh chụp hoặc chất liệu.
2. Đồ thành SVG và xác nhận có đường dẫn chỉnh sửa được, không phải PNG nhúng.
3. Đơn giản hóa hình thừa và nút dư mà không đổi hình bóng tổng thể.
4. Nhập SVG qua Vector Asset Studio của Android Studio.
5. Kiểm tra XML tạo ra về viewport, đường dẫn, vùng tô, nét viền, chuyển sắc và mặt nạ cắt.
6. Thử drawable ở kích thước thực trên phiên bản Android cũ nhất ứng dụng hỗ trợ.

Chọn công cụ trực tiếp hay cách qua SVG

Hai cách cùng đến một đích nhưng cho điểm kiểm tra khác nhau.

Cách dùng SVG trung gian thường dễ kiểm tra hơn. Bạn có thể so kết quả đồ lại với PNG, xem từng hình, sửa lỗ và giảm đường dẫn rối trước khi Android Studio dịch tệp lần nữa.

Công cụ trực tiếp không tự động là sai. Ví dụ, SVG2Vector hiện quảng bá chuyển PNG sang VectorDrawable bên cạnh SVG và đầu vào khác. Xem XML là bản ứng viên thay vì tài nguyên hoàn thiện: xem trước trong Android Studio, kiểm tra đường dẫn và thực hiện cùng kiểm tra thiết bị dưới đây (SVG2Vector).

Giai đoạn 1: biến PNG thành đường dẫn SVG thực

Bắt đầu với nguồn sạch nhất có được. Biểu tượng phẳng, cạnh rõ và bảng màu giới hạn là nguồn tốt. Ảnh chụp, bóng mềm, phát sáng và chất liệu có thể tạo nhiều hình nhỏ mà không thành tài nguyên Android hữu ích.

Dùng độ phân giải gốc PNG. Phóng biểu tượng mờ chỉ thêm pixel, không thêm thông tin cạnh thiếu. Xóa hình chữ nhật nền vô ý và quyết định tài nguyên dự định là đơn sắc, nhiều màu hay dùng chuyển sắc trước khi đồ lại.

Đồ lại pixel

Tải nguồn lên công cụ PNG sang SVG của PerfectVector hoặc dùng công cụ đồ lại khác cho phép kiểm tra kết quả. Nếu nguồn trên điện thoại và cần SVG tiêu chuẩn trước, theo quy trình SVG trên điện thoại Android. So SVG với PNG ở kích thước giao diện dự định, rồi mở trong trình biên tập vector và chọn hình.

Kiểm tra:

• hình bóng tổng thể ngoài gọn;
• lỗ và khoảng trống âm được giữ;
• số vùng màu dự kiến;
• không có đốm thừa hoặc khung nền;
• đường cong mượt không có chuỗi điểm dày;
• viewBox bao hình đúng.

Phần mở rộng .svg không chứng minh đã đồ lại. SVG có thể chứa raster qua phần tử <image>, theo đặc tả nội dung nhúng W3C. Nếu hình được chọn như một chữ nhật hoặc vỡ khối khi phóng sâu, dùng chẩn đoán raster nhúng trước khi sang Android Studio.

Chỉ đơn giản hóa nơi có ích

Độ phức tạp đường dẫn quan trọng vì Android phải phân tích và vẽ hình học tạo ra. Không có mục tiêu số nút chung. Đường cong đơn giản với hàng chục điểm sát nhau đáng kiểm tra; cạnh minh họa không đều có thể thực sự cần nhiều hơn.

Xóa mảnh rời và đơn giản hóa chuỗi điểm rõ trong khi so với nguồn. Nếu dọn đổi góc hoặc đóng lỗ nhỏ, hoàn tác. Hướng dẫn SVG có quá nhiều nút giải thích cách phân biệt chi tiết hữu ích với đường dẫn rối.

Hai chuyển đổi, ba kiểm tra

Giai đoạn 2: nhập SVG vào Android Studio

Quy trình Vector Asset Studio hiện tại của Android nhận SVG hoặc PSD cục bộ, xem trước và tạo vector drawable XML (Android Developers).

1. Trong cửa sổ Project, nhấp chuột phải thư mục res.
2. Chọn New > Vector Asset.
3. Chọn Local file (SVG, PSD) làm loại tài nguyên.
4. Chọn SVG và kiểm tra bản xem trước để tìm lỗi hoặc thay đổi nhìn thấy.
5. Đặt tên tài nguyên và kích thước dự định.
6. Tiếp tục qua Next, xác nhận nơi lưu và chọn Finish.

Tài nguyên tạo ra thuộc phần tài nguyên drawable của ứng dụng dưới dạng XML. Giữ SVG đã kiểm tra làm bản gốc chỉnh sửa được. Nếu cần đổi hình sau, chỉnh SVG và tạo lại drawable thay vì duy trì hai phiên bản không liên quan bằng tay.

Những gì được giữ khi nhập SVG sang VectorDrawable?

VectorDrawable không phải trình kết xuất SVG đầy đủ. Vector Asset Studio hỗ trợ tập con xác định, nên SVG có thể trông đúng trong trình duyệt nhưng đổi khi nhập.

Các giới hạn đến từ bảng tương thích Vector Asset Studio hiện tại. Công cụ nhập cũng lưu ý chỉ hỗ trợ nét căn giữa. Nếu nguồn dùng nét nằm trong hoặc ngoài, mở rộng thành hình tô hoặc vẽ lại cạnh trước nhập.

Chuyển sắc cần thêm kiểm tra phiên bản. API VectorDrawable mô tả giá trị chuyển sắc hoặc danh sách màu theo trạng thái cho fillColor và strokeColor từ API 24. Nó cũng mô tả tùy chọn fillType là evenOdd và nonZero từ API 24 (tham chiếu API VectorDrawable). Nếu ứng dụng hỗ trợ bản cũ hơn, thử đúng cách tương thích mà bản dựng dùng thay vì mặc định xem trước Android Studio đã giải quyết vấn đề.

Đọc XML tạo ra trước khi chấp nhận

Bạn không cần tự viết XML VectorDrawable, nhưng xem cấu trúc nhanh phát hiện nhiều vấn đề nhập.

Chiều rộng, cao và viewport

Phần tử gốc <vector> tách kích thước hiển thị khỏi tọa độ vẽ:

• android:width và android:height là kích thước mặc định drawable, thường bằng dp;
• android:viewportWidth và android:viewportHeight định nghĩa không gian tọa độ đường dẫn dùng.

Chỉ đổi chiều rộng và cao sẽ co giãn cùng hình học. Đổi viewport thay cách tọa độ đường dẫn ánh xạ vào vùng hiển thị. Nếu biểu tượng trông bị xén, có đệm hoặc kéo giãn, so bốn giá trị với viewBox SVG và kích thước tài nguyên dự định.

Đường dẫn và màu

Mỗi <path> chứa android:pathData, có lệnh theo cùng cú pháp đường dẫn tổng quát như thuộc tính d SVG. Xem fillColor, strokeColor, strokeWidth, đầu nét, chỗ nối và fillType khi có.

Đừng tối ưu bằng xóa lệnh đường dẫn lạ. So xem trước với nguồn trước rồi đơn giản hóa trong SVG gốc, nơi hình vẫn dễ kiểm tra hơn.

Nhóm và mặt nạ cắt

Nhóm có thể mang giá trị dịch chuyển, tỷ lệ, xoay và tâm xoay. <clip-path> giới hạn hình học nhìn thấy. Nếu kết quả lệch hoặc vùng có mặt nạ biến mất, kiểm tra phân cấp nhóm và so với phép biến đổi cùng cấu trúc mặt nạ cắt của SVG nguồn.

Thử drawable ở nơi ứng dụng dùng

Bản xem trước nhập chứng minh Android Studio đã phân tích tệp. Nó không chứng minh tài nguyên đúng khi chạy.

Dùng danh sách chấp nhận:

• Drawable khớp hình bóng tổng thể dự định của PNG ở kích thước UI thường.
• Lỗ, khoảng rỗng chữ và vùng chồng lấp vẫn đúng.
• Vùng tô đồng nhất và nét dùng đúng màu.
• Chuyển sắc kết xuất đúng trên bản Android cũ nhất hỗ trợ.
• Viewport giữ khoảng đệm và tỷ lệ dự định.
• Biểu tượng vẫn dễ đọc trong trạng thái sáng, tối, vô hiệu và đổi tint mà ứng dụng dùng.
• XML không có mảnh vô ý hoặc dữ liệu đường dẫn rõ ràng quá nhiều.
• Tài nguyên được thử trong thành phần thực, không chỉ xem trước nhập.
• PNG gốc và SVG gốc chỉnh sửa được vẫn được lưu trữ.

Thử ở kích thước dp thực trên ít nhất một trình giả lập hoặc thiết bị đại diện bản tối thiểu hỗ trợ. Cũng kiểm tra trạng thái hoặc giao diện đổi tint. Đường dẫn hợp lệ về kỹ thuật vẫn có thể không đạt khi khoảng đệm, độ đậm thị giác hoặc giả định màu khác bộ biểu tượng xung quanh.

Nếu chuyển cả bộ, trước tiên áp dụng quy trình cho mẫu tiêu biểu. Quy trình chuyển đổi UI kit trình bày viewport chung, kích thước quang học, hành vi màu và kiểm tra bàn giao cấp bộ.

Khi nào giữ PNG

VectorDrawable phù hợp nhất biểu tượng và minh họa đơn giản. Hướng dẫn Android cảnh báo đồ họa chi tiết, gồm nhiều ảnh khởi chạy ứng dụng, có thể phù hợp raster hơn. Tài liệu cũng lưu ý chi phí tải ban đầu vector drawable có thể cao hơn raster và khuyên giữ tài nguyên vector ở 200 × 200 dp hoặc nhỏ hơn để tránh thời gian vẽ dài (Android Developers).

Giữ hoặc thiết kế lại raster khi nguồn dựa vào:

• chi tiết ảnh chụp;
• chất liệu mềm, làm mờ hoặc bóng phức tạp;
• nhiều vùng màu tí hon;
• hiệu ứng không hỗ trợ quyết định diện mạo;
• hình học dày đến mức XML khó kiểm tra và duy trì.

Mục tiêu không phải thay mọi PNG. Mục tiêu là dùng VectorDrawable ở nơi hình học đường dẫn co giãn khiến tài nguyên Android nhỏ hơn, rõ hơn hoặc dễ đổi giao diện mà không biến ảnh chi tiết thành đống đường dẫn tốn chi phí.

Quy trình với PerfectVector

PerfectVector xử lý chuyển đổi đầu. Với biểu tượng phù hợp, hãy chuyển PNG sang SVG, so hình đồ lại với nguồn và tải SVG muốn giữ làm bản gốc chỉnh sửa được. Sau đó nhập qua Vector Asset Studio và kiểm tra XML tạo ra.

Đánh giá toàn chuỗi:

1. Đồ lại có giữ hình bóng tổng thể và lỗ nguồn không?
2. Hình SVG có chỉnh sửa được và không chứa raster nhúng không?
3. Android Studio có nhập được vùng tô, chuyển sắc, mặt nạ cắt và phép biến đổi cần thiết không?
4. Drawable có kết xuất đúng ở kích thước thực và mức API tối thiểu không?

SVG gọn cải thiện bàn giao, nhưng không làm tính năng Android không hỗ trợ hoạt động. Đơn giản hóa thiết kế hoặc giữ PNG khi ứng dụng đích không tái hiện trung thực diện mạo.

Câu hỏi thường gặp

Android Studio có chuyển PNG trực tiếp sang VectorDrawable không? Không. Vector Asset Studio hiện tại nhập SVG hoặc PSD cục bộ, không nhập PNG. Đồ PNG thành SVG thực trước hoặc dùng công cụ trực tiếp và kiểm tra XML tạo ra trong Android Studio.

SVG luôn là vector thực phải không? Không. SVG có thể nhúng raster bằng phần tử ảnh. Mở trong trình biên tập vector hoặc xem mã và xác nhận hình dự định gồm đường dẫn hoặc hình vector khác trước nhập.

Chuyển sắc SVG có hoạt động trong Android VectorDrawable không? Vector Asset Studio hỗ trợ chuyển sắc tuyến tính, xuyên tâm và góc, nhưng hỗ trợ lúc chạy phụ thuộc XML tạo ra và chiến lược phiên bản Android. API VectorDrawable mô tả màu tô/nét chuyển sắc từ API 24, nên thử trên bản cũ nhất ứng dụng hỗ trợ.

Vì sao lỗ, mặt nạ hoặc chữ đổi sau nhập? Công cụ nhập hỗ trợ tập con SVG giới hạn. Quy tắc tô cần thử theo phiên bản, mặt nạ cắt bị giới hạn và chữ không hỗ trợ. Chuyển chữ cần thiết thành đường dẫn, đơn giản hóa cấu trúc mặt nạ cắt và so xem trước Android với SVG trước khi chấp nhận drawable.

Có nên biến mọi PNG trong ứng dụng Android thành XML VectorDrawable không? Không. Biểu tượng và minh họa đơn giản là ứng viên tốt nhất. Giữ ảnh chụp, ảnh nhiều chất liệu, hiệu ứng phức tạp và hình quá chi tiết thành raster trừ khi vẽ lại có chủ đích tạo hình học đường dẫn đơn giản hơn.

Nguồn

1. Android Developers — Thêm đồ họa vector cho nhiều mật độ màn hình — Mô tả nhập SVG/PSD bằng Vector Asset Studio, tập con SVG hỗ trợ, lưu ý hiệu suất và tài nguyên drawable tạo ra.
2. Android Developers — Tham chiếu API VectorDrawable — Định nghĩa thuộc tính XML vector, path, group và clip-path, gồm viewport, màu, quy tắc tô và hành vi theo API.
3. W3C — Nội dung nhúng SVG — Xác nhận SVG có thể chứa ảnh raster qua phần tử image.
4. Sổ tay Inkscape — Đồ lại ảnh — Giải thích khác biệt giữa đồ pixel raster và làm việc với bitmap gốc.
5. SVG2Vector — Chuyển PNG sang VectorDrawable — Cung cấp cách chuyển trực tiếp hiện tại được thảo luận trong so sánh quy trình.

---

Bạn đã sẵn sàng thử biểu tượng sản xuất? Hãy chuyển PNG sang SVG, kiểm tra đường dẫn rồi nhập tệp đã kiểm tra vào Android Studio. Chỉ giữ drawable sau khi viewport, màu, lỗ và kết xuất lúc chạy đạt danh sách kiểm tra.