# SVG Rendering
## Content
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
```xml
WinExe
net9.0-windows
enable
enable
true
```
### **Create Custom SVG control**
1. Import required libraries to support SVG parsing and drawing
```csharp
using C1.WebStandards.Svg;
using C1.WPF.Core.Svg;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
```
2. Define the **MainWindow** class, which loads the application's XAML interface
```csharp
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
```
3. Create a custom control called **SvgSurface** that will display an SVG
```csharp
public class SvgSurface : Control
```
4. Declare a private field **\_doc** to store the SVG document once it is loaded
```csharp
public class SvgSurface : Control
{
private C1SvgDoc _doc;
// Constructor and rendering follows
}
```
5. Load the embedded SVG file (car.svg) inside the **SvgSurface** constructor using a WPF pack URI
```csharp
public SvgSurface()
{
var resourceInfo = Application.GetResourceStream(
new Uri("pack://application:,,,/SvgRendering;component/car.svg", UriKind.Absolute));
var resourceStream = resourceInfo.Stream;
// Parse next
}
```
6. Parse the SVG stream into an SVG document using **C1SvgDoc.Parse()**
```csharp
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);
}
}
```
7. Override the **OnRender** method to control how the SVG is drawn on screen
```csharp
protected override void OnRender(DrawingContext drawingContext)
{
base.OnRender(drawingContext);
// Drawing code follows
}
```
8. Draw the SVG inside the control’s available space using **drawingContext.DrawSvg()** method
```csharp
protected override void OnRender(DrawingContext drawingContext)
{
if (_doc == null) return;
drawingContext.DrawSvg(_doc, Foreground, new Rect(0, 0, ActualWidth, ActualHeight));
}
```
9. Scale the SVG to fill the control by using the control’s actual width and height
```csharp
// The Rect uses ActualWidth/ActualHeight so the SVG scales with the control:
drawingContext.DrawSvg(_doc, Foreground, new Rect(0, 0, ActualWidth, ActualHeight));
```
10. Allow WPF to automatically repaint the control whenever the window refreshes or resizes
```csharp
// 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
```xml
```