Core Library

SVG Rendering

The C1 SVG rendering feature enables loading, parsing and rendering Scalable Vector Graphics (SVG) across multiple platforms in an application, including WPF, WinUI, Android, and IOS. The rendering feature uses vector graphics to give a crisp and resolution-independent output, making the feature suitable for icons, illustrations, dashboards, and high-DPI applications.

Project-Specific APIs

C1.WebStandards.Svg.C1SvgDoc
C1.WPF.Core.Svg.C1SvgHelper

Key Capabilities:

Display scalable graphics that maintain quality at different zoom levels
Integrate SVG assets from design tools without manual conversion
Reduce application size by using vector graphics instead of multiple bitmap resolutions
Maintain consistency with web-based SVG implementations

Render SVG in WPF

This guide shows how to render an SVG resource using the OnRender method of C1SvgDoc class. Follow each step in order to build, run, and customize the control.

Configure WPF project

Set up the foundation of WPF application by defining the framework, enabling WPF, and linking required libraries. It also includes the SVG file (car.svg) as a resource so the application can load it at runtime.

Use the following code to configure WPF project

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net9.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UseWPF>true</UseWPF>
  </PropertyGroup>
  
  <ItemGroup>
    <ProjectReference Include="..\..\..\Controls\Core\C1.WPF.Core.csproj" />
  </ItemGroup>
  
  <ItemGroup>
    <Resource Include="car.svg" />
  </ItemGroup>
</Project>

Create Custom SVG control

Import required libraries to support SVG parsing and drawing

using C1.WebStandards.Svg;
using C1.WPF.Core.Svg;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

Define the MainWindow class, which loads the application's XAML interface

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

Create a custom control called SvgSurface that will display an SVG

public class SvgSurface : Control

Declare a private field _doc to store the SVG document once it is loaded

public class SvgSurface : Control
{
    private C1SvgDoc _doc;
    // Constructor and rendering follows
}

Load the embedded SVG file (car.svg) inside the SvgSurface constructor using a WPF pack URI

public SvgSurface()
{
    var resourceInfo = Application.GetResourceStream(
        new Uri("pack://application:,,,/SvgRendering;component/car.svg", UriKind.Absolute));
    var resourceStream = resourceInfo.Stream;
    // Parse next
}

Parse the SVG stream into an SVG document using C1SvgDoc.Parse()

public SvgSurface()
{
    var resourceInfo = Application.GetResourceStream(
        new Uri("pack://application:,,,/SvgRendering;component/car.svg", UriKind.Absolute));

    if (resourceInfo == null)
        throw new InvalidOperationException("Embedded resource 'car.svg' not found.");

    using (var stream = resourceInfo.Stream)
    {
        _doc = C1SvgDoc.Parse(stream);
    }
}

Override the OnRender method to control how the SVG is drawn on screen

protected override void OnRender(DrawingContext drawingContext)
{
    base.OnRender(drawingContext);
    // Drawing code follows
}

Draw the SVG inside the control’s available space using drawingContext.DrawSvg() method

protected override void OnRender(DrawingContext drawingContext)
{
    if (_doc == null) return;
    drawingContext.DrawSvg(_doc, Foreground, new Rect(0, 0, ActualWidth, ActualHeight));
}

Scale the SVG to fill the control by using the control’s actual width and height

// The Rect uses ActualWidth/ActualHeight so the SVG scales with the control:
drawingContext.DrawSvg(_doc, Foreground, new Rect(0, 0, ActualWidth, ActualHeight));

Allow WPF to automatically repaint the control whenever the window refreshes or resizes

// WPF calls OnRender on resize/refresh automatically. 
// If you change the SVG at runtime, call:
this.InvalidateVisual(); // forces a redraw and OnRender will run again

Embed the SVG control in XAML

Place the SvgSurface control inside the window’s layout so it becomes visible in the UI using the following code

<Window x:Class="SvgRendering.MainWindow"
        xmlns:local="clr-namespace:SvgRendering"
        Title="Svg Rendering" Height="450" Width="800">
    <Grid>
        <local:SvgSurface/>
    </Grid>
</Window>