- Wieslaw Soltes vừa phát hành SvgML.Uno — package NuGet cho phép khai báo cây SVG (svg, path, g, filter, text) trực tiếp trong XAML thay vì load file .svg ngoài.
- Backed bởi Svg.Skia, MIT, hỗ trợ Android/iOS/macOS/WASM/Windows trên .NET 10.
TL;DR
SvgML.Uno 6.5.31.5 ra mắt ngày 20/04/2026, do Wiesław Šoltés (Core Avalonia team) phát hành. Package này biến mọi node SVG — svg, path, g, filter, text, animate — thành phần tử XAML hạng nhất trong Uno Platform. Không còn phải load file .svg qua SvgImageSource: bạn viết vector trực tiếp trong markup, bind thuộc tính, theme bằng resource, và chia sẻ runtime Svg.Skia trên 6 platform.
What's new
Trước đây để dùng SVG trong Uno bạn phải đóng gói file .svg vào assets rồi tham chiếu qua SvgImageSource. SvgML.Uno đảo ngược mô hình: cây SVG trở thành cây XAML.
- Inline authoring: khai báo
<svg>,<path d="..." />,<g>, filters,<text>trực tiếp trong file.xaml. - Data-binding native: thuộc tính fill, stroke, transform của từng node có thể bind vào ViewModel như mọi control XAML khác.
- Cross-platform render: cùng một markup chạy trên Android, iOS, macOS, tvOS, WebAssembly, Windows — không phụ thuộc renderer của OS.
- Cùng họ với Avalonia & MAUI:
SvgML.AvaloniavàSvgML.Mauichia sẻ cùng mô hình authoring — tái sử dụng được kiến thức giữa các framework XAML.
Why it matters
SVG inline mở ra ba thứ mà cách load file ngoài không làm được tử tế: theming theo resource, binding động, và source-control friendly diff. Một icon set giờ có thể nằm trong ResourceDictionary, đổi màu theo dark/light mode bằng {ThemeResource}, và mỗi commit thay đổi đều readable trong PR review. Với app cross-platform Uno, bạn loại bỏ luôn quirk render SVG khác nhau giữa Windows (OS), WASM (browser) và mobile (SkiaSharp) — tất cả đi qua Svg.Skia 4.4.0.
Technical facts
| Property | Value |
|---|---|
| Package | SvgML.Uno 6.5.31.5 |
| Release date | 2026-04-20 |
| License | MIT |
| Size | 122.33 KB |
| Target framework | .NET 10.0 (Android, browser, iOS, macOS, tvOS, Windows) |
| Render backend | Svg.Skia 4.4.0 + SkiaSharp 3.119.3-preview.1.1 |
| Uno requirement | Uno.WinUI ≥ 6.5.153 |
| Author | Wiesław Šoltés (Core Avalonia) |
Svg.Custom layer cũng vừa expose SVG 1.1 animation object model (animate, set) cùng shared animation runtime và playback controls — nền cho declarative animated SVG trong XAML ở các bản tới.
Comparison
| Uno.WinUI.Svg (stock) | SvgML.Uno | |
|---|---|---|
| Nguồn SVG | File .svg ngoài | Cây XAML inline |
| Renderer | OS trên Windows, SkiaSharp trên Skia, browser trên WASM | Svg.Skia thống nhất mọi platform |
| Data-binding | Không (asset tĩnh) | Có, từng thuộc tính node |
| Theming | Cần đổi file | {ThemeResource} trên fill/stroke |
| Diff trong PR | Binary blob | XAML readable |
| Animation | SMIL trong file (tùy renderer) | SVG animation object model + runtime |
Tác giả còn duy trì SvgToXaml để convert file .svg hiện có sang cây XAML — output cắm thẳng vào SvgML.Uno.
Use cases
- Design system icons: lưu icon dưới dạng
ResourceDictionary, reskin bằng theme brush không cần tái xuất asset. - Dashboard/charts động: bind
path.Data,text.Textvào ViewModel để vẽ biểu đồ live mà không cần Canvas thủ công. - Avatar & status indicators: gradient, filter, mask đổi theo state user — tất cả trong XAML.
- Cross-platform branding: logo phức tạp render đồng nhất trên iOS, Android, Web, Desktop — tránh case Windows OS-renderer “complex SVG files may not render properly” mà docs Uno cảnh báo.
- Migration path: team đang dùng SvgToXaml có target runtime mới để chạy output.
Limitations & pricing
- Miễn phí, MIT. Tác giả nhận GitHub Sponsors.
- Yêu cầu .NET 10 và Uno.WinUI 6.5.x — project còn ở .NET 8 / Uno 5 phải nâng trước.
- Phụ thuộc SkiaSharp 3.119.3-preview — bleeding edge, cân nhắc với app production khắt khe.
- Bám SVG 1.1 (theo Svg.Skia). Tính năng SVG 2 và CSS-in-SVG nâng cao có thể thiếu.
- Là gói render tổng quát — với icon set rất lớn vẫn nên cân hiệu năng so với pre-rasterized assets qua Uno.Resizetizer.
What's next
Bộ SvgML đã có cả ba bản — Avalonia, Uno, MAUI — phát tín hiệu rõ rằng Šoltés đang chuẩn hoá mô hình authoring SVG inline cho mọi framework XAML lớn. Cộng với animation object model mới trong Svg.Custom, bước tiếp theo nhiều khả năng là declarative animated SVG bind data, biến XAML thành môi trường đủ mạnh để thay Lottie cho phần lớn micro-interaction vector.
Nguồn: NuGet, Svg.Skia, tweet công bố, Uno SVG docs.
