Svg.Controls.Skia.Avalonia

Svg.Controls.Skia.Avalonia is the richest Avalonia integration in the repository. It wraps Svg.Skia, exposes the common XAML-friendly SVG primitives, and still gives you access to the underlying SKSvg runtime object when you need advanced behavior.

Install

dotnet add package Svg.Controls.Skia.Avalonia

Choose this package when

your Avalonia app already uses the Skia-backed rendering path,
you want Svg, SvgImage, SvgSource, and SvgResource in XAML,
you need control-coordinate hit testing,
you want zoom, pan, wireframe, filter toggles, or source reload support,
you want direct access to the underlying Svg.Skia.SKSvg.

Main types

Type	Role
`Avalonia.Svg.Skia.Svg`	Control for direct SVG display
`Avalonia.Svg.Skia.SvgImage`	`IImage` wrapper for an `SvgSource`
`Avalonia.Svg.Skia.SvgSource`	Reusable, cloneable, reloadable source object
`SvgImageExtension`	Markup extension for concise XAML image usage
`SvgResourceExtension`	Brush-producing markup extension for backgrounds and fills

Basic XAML usage

<Window
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:svg="clr-namespace:Avalonia.Svg.Skia;assembly=Svg.Controls.Skia.Avalonia">
  <DockPanel>
    <svg:Svg Path="/Assets/__tiger.svg"
             Stretch="Uniform"
             EnableCache="True"
             Wireframe="False" />
  </DockPanel>
</Window>

For image targets, use SvgImage or the {SvgImage ...} markup extension:

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

Reusable sources and runtime restyling

SvgSource is the reusable core of the package. It supports loading from paths, streams, strings, or SvgDocument, and it keeps enough information to reload with new parameters.

using System;
using Avalonia.Svg.Skia;
using Svg.Model;

var source = SvgSource.Load(
    "avares://MyApp/Assets/icon.svg",
    new Uri("avares://MyApp/"));

source.ReLoad(new SvgParameters(null, ".accent { fill: #007ACC; }"));

var image = new SvgImage
{
    Source = source
};

That is the package to use when CSS overrides are part of application state.

Control-specific features

The Svg control adds behavior that does not exist in the non-Skia Avalonia package:

EnableCache
Wireframe
DisableFilters
Zoom
PanX
PanY
ZoomToPoint(...)
TryGetPicturePoint(...)
HitTestElements(...)
SkSvg access

Those features make this package the better choice for editors, diagram viewers, and interactive inspection tools.

Hit testing in Avalonia coordinates

var point = e.GetPosition(MySvgControl);
var hits = MySvgControl.HitTestElements(point);

The control converts from Avalonia coordinates into picture coordinates for you, so you do not need to manage the stretch and pan math manually.

Brushes and resources

Use SvgResourceExtension when an SVG should become a brush:

<Border Background="{SvgResource /Assets/__tiger.svg}" />

This is useful for icons, patterned surfaces, or backgrounds that should stay resolution-independent.

When not to choose this package

Choose Svg.Controls.Avalonia when you want the Avalonia drawing-stack implementation instead of the Svg.Skia runtime path.
Choose Svg.Skia when you do not need Avalonia controls at all.
Choose Skia.Controls.Avalonia when your content is already raw SkiaSharp data and not specifically SVG.