vapolia-svg

Maui and Native iOS + Android on net8/9
[![NuGet][nuget-img]][nuget-link]
[![][demo-img]][demo-link]

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

AI Assistant Plugin (Claude Code)

Get instant, context-aware help with this component directly inside your AI coding assistant — no documentation browsing required.

Install the plugin in two commands (no cloning needed):

/plugin market add vapolia/Svg-Samples
/plugin install vapolia-svg@vapolia-plugins

Once installed, your AI assistant automatically knows how to set up Vapolia.Svg, write SvgImage and SvgImageSource XAML, apply color mappings, configure embedded resources, and troubleshoot common issues — for MAUI, native Android, and native iOS.

Compatible with Claude Code, Cursor, GitHub Copilot, Gemini CLI, and any tool supporting the Agent Skills open standard.

SvgImage and SvgImageSource

.net Maui Controls:

• SvgImage displays an SVG image
• SvgImageSource displays an SVG inside buttons, tabs or for any ImageSource.
• Supports Android (23), iOS (14.2) and Windows (10.0.19041.0)

.net Native Controls (without maui):

• Android: SvgImageView and SvgPictureDrawable
• iOS: UISvgImageView with support for xcode designer
• Windows: Svg inherited from Canvas

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