SVG trong WPF: Chọn bộ kết xuất hoặc hình vẽ XAML

SVG mở được trong trình duyệt, nhưng đặt tên tệp vào Image của WPF không cho cùng quy trình kết xuất. Bắt đầu bằng chọn thứ ứng dụng thực sự sẽ nhận: SVG được thư viện xử lý, đối tượng vẽ của WPF hoặc bản xuất raster.

Codec ảnh tích hợp của WPF gồm PNG và JPEG, nhưng không liệt kê SVG. Điều khiển Image cũng có thể hiển thị DrawingImage, nên hiển thị vector không nhất thiết nghĩa là tải tệp SVG trực tiếp. Microsoft mô tả chúng thành các cách riêng về ảnh và nguồn hình vẽ.

Hướng dẫn này dùng biểu tượng dấu trang tự tạo để làm lựa chọn cụ thể. SVG và XAML bên dưới viết bằng tay; không phải phép đo công cụ chuyển đổi hay ảnh chụp ứng dụng Windows.

Chọn dạng biểu diễn trước khi đổi tệp

Các lựa chọn này liên quan đến đối tượng ứng dụng hiển thị. Chúng không quyết định nhà thiết kế có nên giữ bản gốc SVG chỉnh sửa được không. Giữ bản gốc đó dù ứng dụng nhận PNG.

Thử DrawingImage có sẵn trong WPF nhỏ trước

Với biểu tượng đơn giản, hình vẽ tạo bằng tay cho mốc đối chiếu hữu ích mà không thêm bộ phân tích SVG. Microsoft cho thấy cấu trúc: đặt Image.Source thành DrawingImage, rồi gán hình vẽ vào thuộc tính Drawing. Ví dụ tự tạo sau theo mẫu được mô tả đó.

Đây là thiết kế SVG: dấu trang xanh cổ vịt và hình tròn san hô riêng. Lưu thành bookmark.svg nếu muốn nguồn để đối chiếu trong trình chỉnh sửa.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Đặt Image này trong vùng chứa bố cục cửa sổ WPF hiện có, như Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Hai đối tượng vẽ nhìn thấy mô tả riêng dấu trang và hình tròn. Hình chữ nhật trong suốt thiết lập toàn bộ giới hạn vẽ 120 × 80 của ví dụ, gồm lề trống quanh hình. Nó không cắt hình học phía sau hay biến XAML thành tài liệu SVG.

Tọa độ là lựa chọn tạo hình có chủ đích. Đối chiếu hai đoạn: dấu trang dùng cùng các điểm, hình tròn dùng cùng tâm và bán kính. Đây là chuyển đổi thủ công nhỏ có thể kiểm tra, không phải công thức chuyển mọi tính năng SVG sang XAML.

Các tệp nguồn đã được kiểm tra dưới dạng XML, nhưng ví dụ này chưa được xây dựng hay kết xuất trong ứng dụng Windows WPF. Hãy thử trong dự án trước khi áp dụng.

Kiểm tra giới hạn và brush trước khi tái sử dụng

Bắt đầu ở kích thước được cung cấp. Xác nhận rãnh dưới dấu trang còn nhìn thấy và hình tròn vẫn tách rời. Sau đó thử vùng bố cục rộng hoặc cao hơn. Stretch="Uniform" giữ tỷ lệ khi làm vừa vùng có sẵn, như hướng dẫn co giãn ảnh của Microsoft mô tả.

Đổi giá trị Brush san hô sang màu khác. Đó là chỉnh sửa có chủ đích đối tượng vẽ của WPF; không phải bằng chứng phần SVG nhập bất kỳ sẽ cho cùng điều khiển tiện lợi.

Nếu hình vẽ lệch tâm, đối chiếu giới hạn với viewBox SVG và lề trống. Đường bao đúng vẫn có thể chiếm tỷ lệ khác trong vùng bố cục. Giữ mốc đơn giản này khi đưa hình cuối vào.

Dùng bộ kết xuất khi đầu vào vẫn là SVG

Khi duy trì hình học WPF bằng tay không thực tế, đánh giá thư viện có hỗ trợ đọc SVG cho WPF. Gói SharpVectors.Wpf cung cấp thành phần phân tích, chuyển đổi và xem SVG. Trang gói là nơi phù hợp để kiểm tra phiên bản hiện tại, framework đích và thư viện phụ thuộc trước khi thêm vào dự án.

Tài liệu bắt đầu của SharpVectors mô tả chuyển thành đối tượng vẽ WPF và ví dụ hiển thị dựa trên ảnh. Vì vậy đây là cách khác với yêu cầu quy trình bitmap thông thường giải mã tên tệp SVG.

Dùng dấu trang tự tạo làm đầu vào thư viện đầu tiên, rồi thay bằng hình thực tế. Tách riêng các bước kiểm tra:

1. Tải: ví dụ đã chọn có phân giải được tệp hoặc tài nguyên ứng dụng trong dự án không?
2. Dạng biểu diễn: API trả đối tượng vẽ, tạo XAML hay kết xuất bitmap cho trường hợp của bạn?
3. Diện mạo: rãnh, hình tròn tách rời, màu và lề trống có đúng trong ứng dụng chạy không?
4. Triển khai: kết quả có cần assembly runtime của thư viện hoặc tài nguyên khác trên máy đích không?

Làm theo ví dụ khớp bản đã cài. SharpVectors mô tả thiết lập IncludeRuntime, đánh dấu TextAsGeometry là ngừng khuyến nghị và lưu ý thay đổi namespace cho phiên bản 2.0. Đó là lý do xem lại đoạn cũ trước khi sao chép thiết lập, không phải để giả định một cấu hình chuyển đổi sẽ phù hợp mãi. Tài liệu SharpVectors

Với logo có chữ, kiểm tra đầu ra đích thực tế cùng nguồn. Hướng dẫn thay đổi phông chữ SVG giải thích khác biệt giữa văn bản phụ thuộc phông và chữ giữ dưới dạng đường bao. Chuyển văn bản có thể đổi phần còn chỉnh sửa được, nên giữ tệp thiết kế gốc.

Đừng lấy SvgImageSource từ framework XAML khác

Tìm kiếm vấn đề này có thể dẫn đến tài liệu SvgImageSource của Microsoft. Tài liệu lớp UWP đặt kiểu đó trong Windows.UI.Xaml.Media.Imaging. Đây là API khác với điều khiển và lớp media System.Windows của WPF.

Kiểm tra framework được ví dụ nêu trước khi thêm namespace hoặc gói. Mã XAML tương tự không làm nguồn ảnh UWP hoặc WinUI thành tính năng WPF tích hợp. Giải pháp cho framework khác có thể hợp lệ ở đó nhưng vẫn sai cho dự án desktop của bạn.

Quyết định PNG có đủ không

Bản xuất PNG là lựa chọn bàn giao hợp lý khi biết kích thước cần dùng và ứng dụng không cần chỉnh hình học. Xuất cho các kích thước đó, đối chiếu mép trong suốt trên nền thực tế và kiểm tra cách hiển thị lớn nhất. Tăng kích thước bố cục bitmap không tạo lại đường dẫn nguồn.

Cũng kiểm tra bên trong SVG trước khi dành thời gian cho thư viện kết xuất. Nếu nó chỉ nhúng ảnh raster, nhập lớp bọc không biến ảnh thành hình học chỉnh sửa được. Hướng dẫn SVG raster nhúng cho thấy điều cần xem. Với bộ biểu tượng, dùng cùng lề và kiểm tra đường bao trong toàn bộ; quy trình chuẩn bị biểu tượng giao diện trình bày giai đoạn phần hình đó.

Nếu dấu trang hoặc logo chỉ còn PNG hoặc JPG, quy trình ảnh thành vector của PerfectVector có thể giúp chuẩn bị bản SVG ứng viên chỉnh sửa được. Kiểm tra đường bao khôi phục, rãnh và các chi tiết riêng trước khi chọn cách bàn giao WPF. Vector hóa chuẩn bị phần hình; không cài bộ kết xuất WPF hay đảm bảo chuyển đổi sang XAML của WPF.

Hướng dẫn vector hóa ảnh rộng hơn giải thích bước khôi phục nguồn đó. Khi nguồn sẵn sàng, các phép kiểm tra ứng dụng vẫn thuộc WPF.

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

WPF Image có tải tệp SVG trực tiếp không? Codec ảnh tích hợp được WPF mô tả không gồm SVG. Dùng thư viện hỗ trợ SVG, cung cấp đối tượng vẽ của WPF qua DrawingImage hoặc cấp định dạng raster hỗ trợ như PNG.

DrawingImage có giống tệp SVG không? Không. DrawingImage hiển thị đối tượng vẽ WPF. Thư viện SVG có thể tạo chúng, hoặc bạn có thể viết trực tiếp như ví dụ nhỏ ở đây.

Tôi có thể dùng ví dụ UWP SvgImageSource trong WPF không? Đừng xem đó là API WPF tích hợp. Tài liệu UWP thuộc namespace và framework khác; chọn mã cùng thư viện phụ thuộc cho ứng dụng thực tế.

Chuyển SVG sang XAML có giữ mọi hiệu ứng không? Đừng giả định như vậy. Kiểm tra khả năng công cụ chuyển đổi được mô tả và xem hình trong ứng dụng đích, gồm văn bản, giới hạn, hình riêng và hiệu ứng.

Nguồn tham khảo

1. Microsoft — Tổng quan ảnh WPF — Định dạng bitmap tích hợp và cách co giãn ảnh.
2. Microsoft — Dùng Drawing làm nguồn ảnh — DrawingImage có sẵn trong WPF và cấu trúc đối tượng vẽ.
3. SharpVectors — Bắt đầu — Chuyển hình vẽ WPF, thiết lập runtime và lưu ý chuyển phiên bản được mô tả.
4. NuGet — SharpVectors.Wpf — Tên gói hiện tại và thông tin tương thích.
5. Microsoft — Lớp UWP SvgImageSource — Ranh giới framework và namespace của API thường bị nhầm.

Chọn một cách WPF và đối chiếu thiết kế nhỏ trước khi thay toàn bộ bộ tài nguyên. Nếu hình raster cần khôi phục, hãy chuẩn bị bản SVG ứng viên chỉnh sửa được, kiểm tra hình rồi thử dạng biểu diễn đã chọn trong ứng dụng.