SVG trong .NET MAUI: giữ SVG, tham chiếu PNG

Để dùng SVG trong quy trình ảnh đóng gói của .NET MAUI, giữ SVG trong dự án và tham chiếu tên PNG được tạo trong XAML hoặc C#. MAUI xử lý nguồn vector khi dựng ứng dụng. Vì vậy Image trỏ tới compass.png có thể đúng ngay cả khi tệp bạn thêm là compass.svg. Hướng dẫn ảnh dự án của Microsoft mô tả việc chuyển đổi này.

Điều đó giải thích tên tệp, nhưng còn câu hỏi thiết kế: MAUI cần tạo kích thước nào và bạn nên kiểm tra gì sau đó? Theo dõi một biểu trưng la bàn nhỏ qua nguồn, metadata dự án và khai báo hiển thị.

Theo nguồn qua quá trình dựng

SVG chỉnh sửa được và ảnh đóng gói có nhiệm vụ khác nhau. Giữ nguồn để có thể chỉnh hình, khoảng trắng hoặc màu về sau. Dùng tên được tạo trong view hiển thị nó.

Tài liệu điều khiển Image mô tả ảnh theo mật độ đích được đưa vào gói ứng dụng và hệ điều hành chọn độ phân giải phù hợp. Giữ bản SVG chính không có nghĩa quy trình cụ thể này cung cấp tài liệu SVG trực tiếp cho view.

Thêm SVG nhỏ có giới hạn rõ ràng

Lưu ví dụ tự tạo này thành Resources/Images/compass.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <circle cx="48" cy="48" r="34" fill="none" stroke="#173e52" stroke-width="8"/>
  <path d="M58 28L52 52L28 58Z" fill="#ed765e"/>
</svg>

Vòng để tâm trong suốt, và kim màu san hô là hình riêng. Những chi tiết đó cho bạn điều cụ thể để kiểm tra sau khi nhập. Kích thước khai báo và viewBox vuông cũng làm rõ khung hình dự định. Xem hướng dẫn tệp SVG để hiểu hình học vector khác bitmap nhúng trong vỏ SVG thế nào.

Trong dự án, xác nhận tệp có build action MauiImage. Microsoft mô tả thư mục Resources/Images là vị trí thông thường. Trước khi thêm XML, kiểm tra các mục dự án có sẵn: dự án có thể đã bao gồm thư mục đó bằng wildcard. Thiết lập ảnh dự án giải thích vị trí và build action.

Cập nhật mục có sẵn một lần

Nếu wildcard MauiImage có sẵn đã bao gồm tệp la bàn, đặt cập nhật metadata này sau phần khai báo bao gồm đó:

<ItemGroup>
  <MauiImage Update="Resources\Images\compass.svg" BaseSize="48,48" />
</ItemGroup>

Update đổi metadata trên mục đã tồn tại. Nó không thêm tệp thiếu vào danh sách mục. Nếu dự án không có khai báo bao gồm phù hợp, thêm tệp một lần với build action MauiImage hoặc Include tường minh. Tài liệu MSBuild Item của Microsoft phân biệt các thao tác này.

Điều này tránh cách sửa dễ bị cuốn vào: liên tục thêm mục Include khi gỡ lỗi ảnh thiếu. Trước tiên xác định tệp đã được bao gồm chưa, rồi đổi metadata.

Tham chiếu PNG và đặt vùng hiển thị

Đặt khai báo này trong trang hoặc bố cục MAUI có sẵn:

<Image Source="compass.png"
       WidthRequest="48"
       HeightRequest="48"
       Aspect="AspectFit"
       SemanticProperties.Description="Compass" />

Phần mở rộng .png là chủ ý. Chiều rộng và chiều cao yêu cầu vùng hiển thị vuông; AspectFit giữ toàn bộ ảnh nhìn thấy bên trong. Nếu hình minh họa là chữ nhật, dùng vùng hiển thị phù hợp thay vì kéo giãn để lấp hình vuông. Tài liệu thay đổi tỷ lệ Image của Microsoft phân biệt vừa khung, cắt và kéo giãn.

Mã la bàn là ví dụ thiết lập tự tạo, không phải phép thử hiển thị trên thiết bị được ghi lại. Dựng trong dự án đích của bạn và kiểm tra view kết quả. Chỉ tên tệp đúng không chứng minh hình cụ thể hiển thị như dự định.

BaseSize và kích thước bố cục giải quyết vấn đề khác nhau

BaseSize="48,48" cung cấp kích thước cơ sở để MAUI tạo ảnh theo từng mật độ. Không có kích thước cơ sở tường minh, MAUI dùng kích thước riêng của SVG. Microsoft mô tả cả hai quy tắc trong Đổi kích thước ảnh.

Trong ví dụ, hình nguồn dùng không gian tọa độ 96 × 96, còn cơ sở và view yêu cầu là 48 × 48. Những số đó là lựa chọn tạo hình có chủ ý, không phải kích thước đầu ra đo từ bản dựng. Vòng cần giữ tỷ lệ khi đổi kích thước.

Nếu về sau dùng cùng biểu trưng trong view lớn hơn nhiều, xem lại kích thước dựng và kiểm tra trường hợp dùng đó nữa. Đổi WidthRequest không sửa hình nguồn hoặc metadata dựng. Ngược lại, đổi BaseSize không xóa lề trống trong SVG. Thu gọn giới hạn hình trong nguồn nếu chính biểu trưng trông quá nhỏ trong view vốn đúng kích thước.

Tránh dùng Resize="false" làm cách sửa độ sắc nét chung. Nó tắt thay đổi kích thước ảnh vector trong quy trình này. Chỉ chọn khi đó là hành vi bạn muốn, theo tùy chọn resize được tài liệu hóa.

Kiểm tra ảnh thiếu hoặc bất thường theo thứ tự

1. Xác nhận tên tệp và mục dự án. Dùng tên viết thường như compass.svg và kiểm tra có ảnh khác cùng tên không. Quy tắc đặt tên của Microsoft yêu cầu tên ảnh duy nhất và ký tự tương thích Android.
2. Kiểm tra source của view. Với quy trình SVG đóng gói, dùng compass.png trong XAML hoặc C#.
3. So sánh vùng hiển thị dự định với kích thước cơ sở. Thay đổi kích thước view và kích thước dựng nằm ở nơi khác nhau.
4. Kiểm tra chính hình. Tâm vòng còn rỗng không? Kim san hô có rõ riêng không? Biểu trưng có ở giữa hay khoảng trắng vô hình trong nguồn đẩy nó lệch?

Cũng kiểm tra metadata ảnh làm đổi màu tô/vẽ. Hướng dẫn ảnh dự án mô tả TintColor và Color cho màu phủ và nền. Để chúng không được đặt trong ví dụ hai màu này trừ khi bạn định đổi diện mạo. Kiểm tra ảnh trên nền trang thực tế, nơi dễ phát hiện khoảng trống trong suốt bị mất hơn.

Khi cần hành vi SVG lúc chạy

Nội dung SVG tải xuống, đường dẫn tương tác hoặc chỉnh sửa lúc chạy cần quyết định triển khai riêng. Hướng dẫn ảnh đóng gói trên không xác định hỗ trợ cho những công việc đó.

Ví dụ, dự án mẫu SVG Vapolia mô tả các điều khiển SvgImage, SvgImageSource riêng và thiết lập tài nguyên nhúng. Đó là hợp đồng tải khác. Đánh giá tính năng hỗ trợ và nền tảng đích của trình kết xuất bằng tệp thực trước khi đưa vào; đổi phần mở rộng tên tệp trong khai báo Image thông thường không cài trình kết xuất.

Cùng hình cũng cần thiết lập khác trong quy trình ảnh SVG Flutter, asset catalog SwiftUI và nhập Android VectorDrawable. Dùng lại bản nguồn chính, rồi tuân theo quy tắc của từng nơi sử dụng.

Chuẩn bị bản vector chính khi chỉ còn PNG

Nếu la bàn hoặc logo chỉ có PNG, PerfectVector có thể giúp tạo hình SVG chỉnh sửa được trước khi thêm vào dự án MAUI. Chuyển PNG sang SVG, rồi kiểm tra khoảng trống vòng, các phần rời nhỏ và khoảng cách trong trình chỉnh sửa. Giữ bản chính sạch để thay đổi kích thước hoặc màu về sau.

Vector hóa không sửa khai báo MauiImage hoặc biến quy trình ảnh đóng gói thành trình phân tích SVG lúc chạy. Nếu nguồn đã là SVG chỉnh sửa được, làm việc trực tiếp với cấu hình dự án hoặc hình. Ảnh chụp và hình có chất liệu có thể hữu ích hơn dưới dạng raster; đồ lại chỉ vì ứng dụng nhận nguồn SVG thêm một quyết định về hình riêng.

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

Vì sao tôi tham chiếu PNG khi đã thêm SVG? .NET MAUI chuyển nguồn ảnh SVG đóng gói thành PNG trong quá trình dựng. Giữ SVG trong dự án và tham chiếu tên tệp PNG từ XAML hoặc C#.

BaseSize có đặt kích thước điều khiển Image không? BaseSize đặt kích thước cơ sở dùng để tạo ảnh dựng theo mật độ. Bố cục và yêu cầu kích thước của view điều khiển vùng hiển thị.

Tôi có nên thêm MauiImage Include khác để đổi BaseSize không? Kiểm tra tệp đã được bao gồm chưa, kể cả qua wildcard. Dùng Update để đổi metadata mục có sẵn; chỉ dùng Include khi cần thêm mục.

Cách này có tải SVG được tải xuống sau khi dựng ứng dụng không? Quy trình ảnh đóng gói không bao gồm tải xuống và phân tích SVG lúc chạy. Chọn và thử cách hiển thị runtime cho yêu cầu đó.

Nguồn tham khảo

1. Microsoft — thêm ảnh vào dự án ứng dụng .NET MAUI — Xử lý SVG sang PNG, mục ảnh, tên tệp, kích thước cơ sở và metadata dựng.
2. Microsoft — Image — Tham chiếu ảnh cục bộ, chọn mật độ đích, kích thước view và hành vi thay đổi tỷ lệ.
3. Microsoft — phần tử Item (MSBuild) — Khác biệt giữa thêm mục bằng Include và đổi metadata có sẵn bằng Update.
4. Vapolia — mẫu SVG — Điều khiển SVG runtime và quy trình tải tài nguyên riêng.

Bạn làm từ biểu trưng ứng dụng chỉ có raster? Biến PNG thành SVG chỉnh sửa được, kiểm tra khoảng trống và khoảng cách, rồi thêm bản chính đó vào MAUI và kiểm tra ảnh được tạo trong ứng dụng đích.