SVG in Avalonia XAML

Avalonia SVG Controls

Use SVG assets like first-class Avalonia content.

Explore source
Parent systemSvg.Skia
StatusStable
Modules3
RepositorySvg.Skia/Svg.Controls.Skia.Avalonia

Ready-to-use Avalonia controls load SVG sources, participate in layout and styling, and render through the Svg.Skia pipeline.

  1. 01

    Asset and file URI sources

  2. 02

    Normal Avalonia layout behavior

  3. 03

    Themeable XAML usage

  4. 04

    Shared renderer underneath

From intent
to working system.

01

Source

Properties accept application assets, files, streams, or prepared SVG objects.

02

Load

The control owns source changes and document lifetime.

03

Layout

Stretch, alignment, and viewport rules map SVG bounds into Avalonia layout.

04

Draw

Svg.Skia records and paints the final picture.

Adopt this
capability.

Start with the primary module, then add the related packages only when the application needs those layers. Replace VERSION with the current NuGet version.

01 · Install
Terminal
dotnet add package Svg.Controls.Skia.Avalonia
02 · Use · xml
MainWindow.axaml
<svg:Svg Source="avares://MyApp/Assets/logo.svg"
Width="160"
Stretch="Uniform" />

Use one layer.
Compose the rest.

Read the module beside the complete system.

The implementation, samples, issues, and release notes stay in the parent repository so module details remain connected to the product architecture.

Svg.Skia

Search everything.

Loading the index…

move open esc close

Preparing metadata and full-text search…