MarkView.Avalonia.Svg 12.0.3

MarkView.Avalonia.Svg

SVG image rendering extension for MarkView.Avalonia. Renders SVG files referenced in markdown images using Svg.Skia — the same backend that Avalonia itself uses for vector icons.

Installation

dotnet add package MarkView.Avalonia.Svg

Quick Start

Call UseSvg() before setting Markdown:

var viewer = new MarkdownViewer();
viewer.UseSvg();
viewer.Markdown = markdownText;

Or activate globally at application startup:

// App.axaml.cs
MarkdownViewerDefaults.Extensions.AddSvg();

Markdown syntax is unchanged — standard image syntax with an .svg URL:

![Logo](https://example.com/logo.svg)
![Badge](https://shields.io/badge/build-passing-green)
![Inline](data:image/svg+xml;base64,PHN2Zy8+)

Supported URL Formats

The speculative HTTP/HTTPS rule means badge services like shields.io that return SVG without a .svg extension are handled transparently.

When using relative image paths, set MarkdownViewer.BaseUri to an HTTP/HTTPS base URL if you want this extension to fetch and parse those images as SVG.

How It Works

UseSvg() registers a SvgExtension which inserts SvgImageLoader at index 0 of renderer.ImageLoaders. Being first in the chain, it gets first pick on every image URL. If CanLoad returns false (e.g. a data:image/png URI), or if LoadAsync returns null (e.g. the HTTP response is not valid SVG), the next loader in the chain is tried.

Loading is asynchronous. The Image control is placed in the visual tree immediately; the SVG source is set once the download and parse complete. SvgImage is an AvaloniaObject and is created on the UI thread via Dispatcher.UIThread.

Writing a Custom Image Loader

Implement IImageLoader from the core package to handle any image source:

using MarkView.Avalonia.Extensions;

public class MyLoader : IImageLoader
{
    public bool CanLoad(string url) => url.StartsWith("myscheme://");

    public async Task<IImage?> LoadAsync(string url, CancellationToken ct = default)
    {
        // Return null to fall through to the next loader
        var bitmap = await FetchBitmapAsync(url, ct);
        return bitmap;
    }
}

// Insert at 0 to take priority, or Add() to run after built-in loaders
renderer.ImageLoaders.Insert(0, new MyLoader());

Or register via a IMarkViewExtension:

public class MyExtension : IMarkViewExtension
{
    public void Register(AvaloniaRenderer renderer)
        => renderer.ImageLoaders.Insert(0, new MyLoader());
}

viewer.Extensions.Add(new MyExtension());

License

MIT © Nicolas Musset