<svg:SvgImage Source="logo.svg" HeightRequest="32" />

<Button Text="Add" ContentLayout="Right,20" 
    ImageSource="{svg:Svg tabHome.svg,Height=60, ColorMapping='000000=>FF0000'}" />

Maui and Native iOS + Android on net8/9

SVG

This UI control allows you to seamlessly integrate Scalable Vector Graphics into your cross-platform applications:

• SVG ensures high-quality visuals across different devices and screen sizes
• SVG enhances the user experience with crisp and responsive graphics
• SVG files are lightweight and efficient, having a fraction of the size of raster images (JPG, PNG). They reduce load times and improve performance.

Use Cases:

• Use SVGs for app icons, menu and toolbar items, and inside buttons to maintain a consistent and sharp appearance across various resolutions and devices.
• Branding Elements: Incorporate SVG logos and branding elements that remain crisp and clear, regardless of the device or screen size.

Enterprise support available: contact Vapolia

SvgImage and SvgImageSource

.net Maui Controls:

• SvgImage displays an SVG image
• SvgImageSource displays an SVG inside buttons, tabs or for any ImageSource.

.net Native Controls (without maui):

• Android: SvgImageView and SvgPictureDrawable
• iOS and Mac: UISvgImageView with support for xcode designer

Quick start for MAUI

In MauiProgram.cs, add .UseEasySvg() to the builder

builder
    .UseMauiApp<App>()
    .UseEasySvg();

Add some SVG images

• Create a new folder named VectorImages in your project. Do not use the existing Resources/Images folder !
• place your SVG images there, ensuring they have the .svg extension.
• add the following lines to your .csproj file:

<ItemGroup>
  <None Remove="VectorImages\**\*.svg" />
  <EmbeddedResource Include="VectorImages\**\*.svg" />
</ItemGroup>

That configures the svg images as embedded resources.

In a XAML page, use SvgImage or SvgImageSource

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:svg="https://vapolia.eu/svg"
             x:Class="XamSvg.Demo.MainPage"
             IconImageSource="{svg:Svg myicon.svg,Height=60}">

  <ContentView>
    <StackLayout Orientation="Vertical" VerticalOptions="Start">

        <svg:SvgImage Source="logo.svg" HorizontalOptions="Start" HeighRequest="32" />

        <svg:SvgImage Source="logo.svg" HorizontalOptions="Start" HeighRequest="32"
                      ColorMapping="{Binding ColorMapping}" 
                      ColorMappingSelected="ffffff=>00ff00,000000=>0000FF" 
                      />
      
        <svg:SvgImage WidthRequest="100" Source="https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg" />

        <svg:SvgImage WidthRequest="100" Source="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlb..." />

        <Image Source="{svg:Svg Source=no_image_available.svg, Width=40, ColorMapping='000=>666'}"
               WidthRequest="40" />
      
    </StackLayout>
  </ContentView>
</ContentPage>

Remarks:

• The xmlns:svg attribute is required on the ContentPage.
• Source is the name of an svg image. This image is searched in embedded resources across all loaded assemblies. This list is cached on first use.
• All properties are bindable.

You can also use <SvgImageSource Svg="...." Height="50" /> as the ImageSource for tab icons, button icons, navigation bar icons, and more.
For these elements, the Widht and/or Height properties are mandatory and cannot be bound, as ImageSource objects are static in MAUI (a MAUI limitation).
The compact syntax ImageSource="{svg:Svg refresh.svg,Height=50}" is easier to use.

Note: SvgImageSource converts the svg image into a static raster image, which is then displayed by another UI control like Image. As a result, it supports only one ColorMapping.

Color Mapping

The ColorMapping, ColorMappingSelected and ColorMappingDisabled properties allow you to modify specific colors in the SVG before displaying it, or based on its state (normal, selected, disabled).

For example, the string ffffff=>00ff00 000000=>0000FF means:

• replace ffffff (white) by 00ff00 (green)
• and replace 000000 (black) by 0000FF (blue).

A color mapping is a string containing a list of mappings separated by ",", ";", or a space.
Each mapping consists of two parts, separated by "=>" (or "="). The left part is the color to replace, and the right part is the new color.
A color is a standard HTML color code in one of the following format: AARRGGBB, RRGGBB, or RGB. A is the transparency (alpha channel).

Color mappings are bindable: instead of specifying a string, you can use a list of ColorMapping objects:

<svg:SvgImage Source="logo.svg" HorizontalOptions="Start" HeighRequest="32">
    <ColorMapping OldColor="Blue" NewColor="#80000000" />
    <ColorMapping OldColor="#FFF" NewColor="{Binding YourColorProperty}" />
</svg:SvgImage>              

Maui samples

Simple svg image

<svg:SvgImage Source="logo.svg" HeightRequest="70" HorizontalOptions="Center" VerticalOptions="Center" />

Svg image on a button

<Button Text="Add Contact" ContentLayout="Right,20" ImageSource="{svg:Svg tabHome.svg,Height=60,ColorMapping='000000=>FF0000'}" />

Svg image for the icon of a TabbedPage tab

<NavigationPage Title="Home" IconImageSource="{svg:Svg tabHome.svg,Height=60}">
  <x:Arguments>
      <views:HomePage />
  </x:Arguments>
</NavigationPage>

Svg image with bindable color mapping

<svg:SvgImage Source="logo.svg" HeightRequest="60">
    <!-- the ColorMapping property is the default content property: no need to embed it into a svg:SvgImage.ColorMapping tag -->
    <svg:ColorMapping OldColor="#000" NewColor="{Binding CurrentColor}" />
    <svg:SvgImage.ColorMappingSelected>
        <svg:ColorMapping OldColor="#000" NewColor="{Binding CurrentColor}" />
    </svg:SvgImage.ColorMappingSelected>
</svg:SvgImage>

Common mistakes

If nothing appears, ensure your svg file is displayed correctly in Windows Explorer (after installing this extension).

Common errors include:

• Forgetting to set the build action of the svg file to "Embedded resource".
• Missing the viewBox attribute at the root of the svg file (open it using a text editor to check).
• The svg color being the same as the background color, especially white or black. Use ColorMapping to adjust the colors, or edit your svg file using inkscape or your preferred editor.

The assembly containing the svg resources must have an Assembly Name that matches its Default Namespace. Otherwise, the svg files will not be found. If you cannot do this, you can still display an svg by specifying the full resource name, like this:

    <svg:SvgImage
        Source="YourDefaultNamespace.Images.getFDR_01_Ready.svg"
        x:Name="SvgIcon" HorizontalOptions="Fill" VerticalOptions="Start" Margin="8,0,8,0" BackgroundColor="Yellow"
        />

You can discover the full name of an embedded resource by opening your assembly (.dll in your bin folder) with the free tool Telerik JustDecompile.

Another common mistake is setting the ImageSource of a Button in a style or trigger. Instead, you must set the Image property.

<Style x:Key="FAB" TargetType="Button">
  <!-- correct -->
  <Setter Property="Image" Value="{svg:Svg create.svg,Height=50,ColorMapping='000=>634109'}"/>
  <!-- incorrect 
  <Setter Property="ImageSource" Value="{svg:Svg create.svg,Height=50,ColorMapping='000=>634109'}"/>
  -->
</Style>

Other Recipes

Android native (not MAUI Android): set the SVG image height the match the height of a Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
              xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <Button
        android:id="@+id/myinfo"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/Menu_MyInfo"
        style="@style/Widget.AppCompat.Button.Borderless"
        app:MvxBind="Click SettingsCommand"
        />
    <vapolia.SvgImageView
        app:layout_constraintTop_toTopOf="@+id/myinfo"
        app:layout_constraintBottom_toBottomOf="@+id/myinfo"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        tools:layout_width="30dp"
        app:colorMapping="000000=e01a1a"
        app:colorMappingSelected="000000=ff3030"
        app:colorMappingDisabled="000000=1a1a1a"
        app:aspect="fit"
        app:svg="info.svg" />

Android native (not MAUI Android): set the icon for the back button in the toolbar

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
toolbar.NavigationIcon = SvgFactory.GetDrawable("backward.svg", "000000=>FFFFFF");

iOS/Android: Load an SVG from a background thread

iOS storyboard (not maui ios): usage in an xcode storyboard

Reference

MAUI

Default namespace:

xmlns:svg="https://vapolia.eu/svg"

SvgImage control

SvgImage displays an image in up to two states: normal, selected

<svg:SvgImage Source="union.svg" HeightRequest="70" HorizontalOptions="Center" VerticalOptions="Center" />

SvgImageSource class

SvgImageSource inherits from ImageSource, use it on any ImageSource property. For example Page.IconImageSource. It can also be transformed into a FileImageSource by calling CreateFileImageSource().

SvgImageSource can be used in Button.ImageSource, ToolbarItem.IconImageSource, ...

<svg:SvgImageSource Source="tabHome.svg" Height="50" />

All properties are bindable, but Xamarin Forms does not support changing them after the control using this SvgImageSource is rendered. Alternatively, you can bind the ImageSource property on the target control, and define SvgImageSource in styles. Example:

    <svg:SvgImageSource x:Key="NormalIcon" Source="icon_normal.svg" Height="80" />
    <svg:SvgImageSource x:Key="SelectedIcon" Source="icon_selected.svg" Height="80" ColorMapping="FFF=>000" />

    <Style x:Key="NormalIconStyle" TargetType="ImageButton">
      <Setter Property="Source" Value="{StaticResource NormalIcon}"/>
      <Setter Property="BackgroundColor" Value="Transparent"/>
    </Style>

    <Style x:Key="SelectedIconStyle" TargetType="ImageButton">
      <Setter Property="Source" Value="{StaticResource SelectedIcon}"/>
      <Setter Property="BackgroundColor" Value="Transparent"/>
   </Style>

And usage:

    <ImageButton Style="{Binding StyleKeyToUse}" />

     public string StyleKeyToUse {get;set;} = "NormalIconStyle"; 
     //Don't forget to call OnPropertyChanged(nameof(StyleKeyToUse)) after each change.

Android native (not maui android)

iOS native (not maui ios)

Advanced configuration

The SVG files that don't specify the full path of an assembly are automatically searched in the embedded resources of all loaded assemblies. If you have assemblies that are loaded late and not detected, or if you prefer to manually specify the assemblies, call AddResourceAssembly. Example:

public class App : Application
{
    public App()
    {
        Vapolia.Svgs.Config.AddResourceAssembly(typeof(App), ...);
        ...
    }
...

Tools

On Windows install the microsoft powertoys to preview the SVG files in the Windows Explorer.

Supported Platforms

• Maui, net-iOS, net-Android, Xamarin Forms
• Android api level 15+ (Android 4.0.3+)
• iOS 8+

Mvvm friendly

This control provides an event and a Command when the image is tapped, making it easy to use with or without mvvm frameworks.
It also implements INotifyPropertyChanged.

Live Preview

This control supports hot reload and live preview.

Enterprise Support

Enterprise support is available
Source code is available