Phiên bản mới của thư viện hỗ trợ SVG cho Avalonia hiện được phát hành dưới tên Svg.Controls.Skia.Avalonia. Cách sử dụng hoàn toàn tương tự như Avalonia.Svg.Skia, nhưng nên ưu tiên phiên bản mới khi làm việc với các phiên bản Avalonia gần đây. Với các dự án dùng Avalonia cũ, vẫn có thể tiếp tục sử dụng Avalonia.Svg.Skia. (Cập nhật: 05/09/2025)

1. Giới thiệu

Avalonia không tích hợp sẵn khả năng xử lý định dạng SVG như một số nền tảng giao diện khác. Để hiển thị biểu tượng hoặc đồ họa vector, chúng ta cần sử dụng thư viện bên thứ ba — cụ thể là Avalonia.Svg.Skia (hoặc phiên bản mới hơn). Thư viện này dựa trên SkiaSharp để render SVG và có thể cài đặt dễ dàng qua NuGet.

2. Hiển thị SVG trực tiếp

2.1 Chuẩn bị tài nguyên

Đặt tệp SVG vào thư mục Assets trong dự án và thiết lập thuộc tính Build Action thành AvaloniaResource.

2.2 Sử dụng trong XAML

Chỉ cần thêm phần tử <Svg> với thuộc tính Path trỏ đến vị trí tài nguyên:

<Svg Path="/Assets/icon.svg" />

Ví dụ đầy đủ trong cửa sổ chính:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Demo SVG"
        Width="300" Height="200">
    <Svg Path="/Assets/icon.svg" />
</Window>

3. Hiển thị SVG thông qua Image

Thư viện cũng hỗ trợ hiển thị SVG như một nguồn ảnh thông qua markup extension SvgImage:

<Image Source="{SvgImage /Assets/icon.svg}" />

4. Tùy chỉnh màu sắc bằng CSS

Có thể thay đổi màu sắc các thành phần SVG bằng thuộc tính Css. Ví dụ sau thay đổi màu tô của tất cả các đường dẫn:

<Svg Path="/Assets/icon.svg" Css="path { fill: #FF5733; }" />

Lưu ý: Trình soạn thảo XAML không hỗ trợ IntelliSense cho nội dung CSS này.

5. Áp dụng CSS khi dùng với Image

Khi hiển thị SVG trong Image, cú pháp đơn giản {SvgImage ...} không hỗ trợ CSS. Thay vào đó, phải cấu trúc rõ ràng qua các lớp đối tượng:

<Image>
    <Image.Source>
        <SvgImage>
            <SvgImage.Source>
                <SvgSource Path="/Assets/icon.svg" Css="path { fill: #FF5733; }" />
            </SvgImage.Source>
        </SvgImage>
    </Image.Source>
</Image>

Cách này đảm bảo rằng các quy tắc CSS được áp dụng đúng khi render SVG trong điều khiển Image.