SVG trong SwiftUI: Thêm tài nguyên và kiểm soát màu

Với SVG tĩnh đi kèm ứng dụng SwiftUI, đặt phần hình trong asset catalog Xcode và tải ảnh bằng tên tài nguyên. Sau đó quyết định giữ màu gốc hay biến nó thành hình bóng được tô một màu. Apple thêm tài nguyên ảnh SVG trong Xcode 12; ghi chú phát hành nêu giữ vector cho đích triển khai iOS 13, iPadOS 13 và macOS 10.15 trở lên.

Quy trình catalog đó khác tải tệp SVG trong lúc ứng dụng chạy. Nó cũng khác tạo SF Symbol tùy chỉnh. Chọn cách bàn giao trước khi đổi phần hình hoặc thêm gói kết xuất.

Chọn cách cho ảnh cụ thể này

SVG là tệp nguồn. Cách ứng dụng nhận và dùng quyết định bước tiếp theo.

Hướng dẫn này dùng cách đầu. Cốc nhỏ hai màu giúp thấy hai lỗi riêng: mất màu san hô của hơi nước và tô kín tay cầm mở. Không lỗi nào cần hình phức tạp để chẩn đoán.

Hướng dẫn chuẩn bị bộ giao diện trình bày công việc rộng hơn để bộ nhất quán. Ở đây câu hỏi là một SVG đã chấp nhận đến Image SwiftUI như thế nào.

Chuẩn bị nguồn nhỏ có điểm kiểm tra nhìn thấy

Lưu ví dụ tự tạo này thành CupMark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
    fill="#147D73"/>
  <path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
    fill="none" stroke="#147D73" stroke-width="5"/>
  <path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
    fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>

Cốc xanh cổ vịt, hai nét hơi nước san hô và vùng trong tay cầm rỗng. Giữ ba đặc tính đó trong danh sách kiểm tra. SVG không chứa chữ, ảnh ngoài, bộ lọc hay tập lệnh, nên là tệp khởi đầu gọn cho thử nghiệm catalog.

Với hình của bạn, kiểm tra nguồn trước nhập. Khung trống quá nhiều khiến biểu tượng trông nhỏ dù view có đúng kích thước. Hình chữ nhật nền trắng trở thành phần hình bóng template. Ảnh chụp nhúng vẫn là loại nội dung khác với đường dẫn xung quanh; kiểm tra raster nhúng giúp phân biệt.

Giữ bản gốc chỉnh sửa được ngoài bản bàn giao của ứng dụng. Nếu biểu tượng có chữ, giải quyết phông dự định hoặc cách đường bao trong bản gốc; xem quy trình thay đổi phông SVG. Đổi kiểu chữ SwiftUI không thay thế kiểm tra chữ bên trong ảnh.

Thêm thành image set thông thường

Mở asset catalog của ứng dụng, thường là Assets.xcassets. Thêm image set mới và đặt tên CupMark. Kéo SVG vào ô ảnh phù hợp. Hướng dẫn asset catalog của Apple mô tả tạo set, nhập tài nguyên và cung cấp biến thể qua Attributes inspector.

Dùng image set cho ví dụ này. Đừng chọn quy trình symbol-image chỉ vì nguồn kết thúc bằng .svg.

Sau nhập, kiểm tra bản xem trước catalog và mọi thông báo build. Xác nhận catalog thuộc target ứng dụng sẽ dùng. Nếu thiết lập tài nguyên có biến thể nền tảng hoặc diện mạo, đảm bảo ảnh dự định có trong cấu hình liên quan thay vì cho rằng bản xem trước đại diện mọi cấu hình.

Tên CupMark là tên tài nguyên ảnh dùng bên dưới. Nó không phải URL tải xuống hay đường dẫn đến SVG gốc trong thư mục thiết kế. Hàm khởi tạo Image của Apple tìm tài nguyên theo tên trong bundle; mặc định là main bundle. Nếu ảnh thuộc bundle tài nguyên khác, hãy chủ động cung cấp bundle đó.

Giữ phân biệt tên tệp và tên tài nguyên trong ghi chú bàn giao. Đồng đội có thể đổi tên asset set mà không đổi tên tệp thiết kế gốc, và mã phải theo tên tài nguyên thực sự tải.

Đối chiếu kết xuất original và template

Dùng view này sau khi thêm image set CupMark:

import SwiftUI
 
struct CupComparison: View {
    var body: some View {
        HStack(spacing: 24) {
            Image("CupMark")
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .accessibilityLabel("Cup with rising steam")
 
            Image("CupMark")
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .foregroundStyle(Color.blue)
                .accessibilityLabel("Cup with rising steam")
        }
        .padding()
    }
}

Bản bên trái yêu cầu rõ kết xuất original. Bản bên phải yêu cầu template và cung cấp xanh dương làm kiểu foreground. Tài liệu kết xuất template của Apple định nghĩa chế độ template bằng việc pixel không trong suốt lấy màu foreground. Đây là cách tô hình bóng, không phải lệnh đổi màu chỉ một đường dẫn SVG.

Với cốc, điều đó nghĩa bản bên phải cần có hơi nước xanh dương và cốc xanh dương. Phân biệt san hô/xanh cổ vịt được chủ động bỏ. Lỗ tay cầm cần giữ rỗng. Nếu ứng dụng cần hơi nước đổi độc lập với cốc, chọn cấu trúc bàn giao cho các phần đó riêng thay vì mong một ảnh template cung cấp kiểu cho từng đường dẫn.

Các modifier cũng làm quyết định kích thước rõ ràng. resizable() bật khả năng đổi kích thước ảnh, còn scaledToFit() giữ tỷ lệ trong khung 48 point. Khung view và khung vẽ riêng của phần hình là các ranh giới riêng: khoảng trắng thừa trong SVG vẫn thuộc nguồn.

Đây là ví dụ dựa trên tài liệu để thử trong dự án, không phải báo cáo thử kết xuất trong ứng dụng thực tế. Kiểm tra ứng dụng build thực tế, gồm kích thước nhỏ nhất định dùng biểu trưng. Bản xem trước 48 point rõ không xác nhận cả hai nét hơi nước vẫn hữu ích ở 16 point.

Chẩn đoán kết quả nhìn thấy trước khi đổi tệp

Ảnh mất, màu đổi và đường bao kém ở cỡ nhỏ cần cách sửa khác nhau.

Mỗi lần đổi một lớp. Nếu nguồn đã có lỗ đúng, dựng lại bản dò nét không sửa tên tài nguyên viết sai. Nếu tìm tài nguyên hoạt động nhưng template bỏ khác biệt màu, thêm màu vào SVG không đổi chế độ kết xuất đã chọn.

Với biểu tượng cạnh văn bản nhìn thấy, xem tên hỗ trợ trợ năng trong toàn ngữ cảnh điều khiển. Ví dụ cấp mô tả cho mỗi ảnh đối chiếu. Bản lặp trang trí cạnh điều khiển đã có tên có thể cần cách xử lý trợ năng khác; đừng đưa nhãn của view đối chiếu một cách máy móc vào mọi vị trí.

Giữ SVG lúc chạy và SF Symbols là quyết định riêng

Ảnh catalog có tên không phải API fetch và phân tích XML SVG bất kỳ. Nếu tệp đến sau khi build ứng dụng, chọn bộ kết xuất xử lý rõ đầu vào đó. Chẳng hạn README dự án SVGView mô tả bộ phân tích và kết xuất SVG viết bằng SwiftUI. Đánh giá tính năng SVG thực tế tệp dùng; mục tiêu hỗ trợ rộng của gói không chứng minh toàn bộ đầu vào hiển thị đúng.

Giữ cách tải, thất bại và tệp không hỗ trợ trong tính năng runtime đó. Đừng thêm gói chỉ vì câu trả lời cũ nói SwiftUI không dùng được SVG, khi nhu cầu là ảnh tĩnh đã được cách asset catalog đáp ứng.

SF Symbols tùy chỉnh có hợp đồng nguồn khác. Apple mô tả quy trình tạo và xác thực dựa trên template, gồm biến thể symbol và thông tin căn chỉnh. SVG cốc thông thường không có các đặc tính đó chỉ nhờ đặt vào image set. Dùng quy trình đó khi ứng dụng cần cách hoạt động symbol và giữ cấu trúc template bắt buộc.

Định dạng bàn giao nền tảng cần kiểm tra độc lập. Nếu cùng hình cũng đưa vào Android, làm theo hướng dẫn bàn giao VectorDrawable; công cụ nhập của nền tảng này chấp nhận không chứng minh nền tảng khác chấp nhận.

Khi biểu tượng chỉ có PNG

Nếu mất nguồn chỉnh sửa được và PNG là biểu tượng đơn giản, công cụ chuyển PNG thành SVG của PerfectVector có thể giúp chuẩn bị hình ứng viên cho quy trình này. Cắt ảnh sát biểu tượng, kiểm tra bản xem trước về lỗ mất, chi tiết nhập vào nhau và hình nền không mong muốn, rồi đối chiếu với gốc. Tải SVG đã chấp nhận và thử qua cùng phép kiểm tra image set và chế độ kết xuất.

Dùng vector gốc khi có. Giữ ảnh chụp và hình nhiều hiệu ứng ở raster khi giữ diện mạo tốt hơn. Vector hóa chuẩn bị hình học; không biên dịch catalog Xcode, chọn bundle tài nguyên hay tạo template SF Symbols với biến thể bắt buộc.

Trước khi bàn giao tài nguyên, ghi tên catalog, cách original/template dự định, kích thước thị giác tối thiểu và tệp nguồn dùng để tạo lại. Thử nền sáng, tối và mọi biến thể diện mạo hỗ trợ trong ứng dụng. Hướng dẫn phần hình trong blog trình bày chuẩn bị nguồn trước bước bàn giao này.

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

SwiftUI có thể dùng SVG từ asset catalog không? Có. Xcode hỗ trợ tài nguyên ảnh SVG. Thêm tệp vào image set thông thường và tải tài nguyên có tên bằng Image. Xác minh deployment target và build catalog thực tế thay vì xem đó là hỗ trợ SVG runtime bất kỳ.

Vì sao SVG trở thành một màu? Kiểm tra chế độ kết xuất. Template dùng ảnh nhìn thấy làm hình bóng có màu foreground. Dùng original khi cần khác biệt màu gốc của hình.

Image có thể tải SVG từ URL web không? Hàm khởi tạo Image có tên là tìm tài nguyên, không phải bộ phân tích SVG qua URL. Tệp SVG lúc chạy cần quy trình tải và kết xuất phù hợp, được xác minh với đầu vào thực tế.

Image set SVG có giống SF Symbol tùy chỉnh không? Không. Symbol tùy chỉnh dùng template có cấu trúc, biến thể, thông tin căn chỉnh và xác thực bắt buộc. Image set SVG bình thường không tự cung cấp những đặc tính symbol đó.

Nguồn tham khảo

1. Apple — Ghi chú phát hành Xcode 12 — Hỗ trợ tài nguyên ảnh SVG và deployment target giữ vector được mô tả.
2. Apple — Quản lý tài nguyên bằng asset catalog — Asset set, ô nhập và biến thể.
3. Apple — Image init(_:bundle:) — Tìm tài nguyên có tên và bundle.
4. Apple — Image.TemplateRenderingMode — Chế độ kết xuất original và template.
5. Apple — resizable(capInsets:resizingMode:) — Khả năng đổi kích thước ảnh rõ ràng.
6. Apple — scaledToFit() — Làm vừa và giữ tỷ lệ.
7. Apple — Tạo ảnh symbol tùy chỉnh cho ứng dụng — Template, biến thể và xác thực symbol tùy chỉnh.
8. Exyte — SVGView — Giải pháp phân tích và kết xuất SVG riêng cho SwiftUI.

Kiểm tra một biểu tượng ở kích thước và chế độ màu dự định trước khi nhập cả bộ. Nếu chỉ còn PNG, hãy chuẩn bị bản SVG ứng viên, kiểm tra lỗ và nền rồi xác minh tệp đã chấp nhận trong ứng dụng đã build.