Using SVG images

  • Uno Platform supports using vector SVG graphics inside of your cross-platform applications using the Uno.UI.Svg package.

Uno SVG sample

How to use SVG

To use SVG, install the following packages into the iOS, macOS, Mac Catalyst, Android and Skia projects:

  • Uno.WinUI.Svg (or Uno.UI.Svg if you are using UWP-based app template)
  • SkiaSharp.Views.Uno.WinUI (or SkiaSharp.Views.Uno if you are using UWP-based app template).
Note

If the Uno.[UI|WinUI].Svg package is not installed, you will get a warning when an .svg image is loaded.

Note

The Uno.[UI|WinUI].Svg package is not needed for WebAssembly.

Add the SVG Image into the project's class library (or shared project) and make sure that the build action is set to Content. Now, you can display the SVG image in an Image by referencing it from the Source property. For example:

<Image Source="ms-appx:///Assets/test.svg" Stretch="UniformToFill" Width="100" Height="100" />

You can also explicitly use SvgImageSource:

<Image>
  <Image.Source>
    <SvgImageSource UriSource="https://example.com/test.svg" />
  </Image.Source>
</Image>

Supported features by platform

SVG is supported on all Uno Platform targets.

On Android, iOS, macOS, Mac Catalyst and Skia we are using SkiaSharp to render the SVG graphics.

On WebAssembly, the SVG images are rendered directly by the browser.

On Windows, the OS is responsible for SVG rendering (and complex SVG files may not render properly).

When to use SVG

Because SVG requires to be parsed initially before rendering and its vector-based form needs to re-render each time the size of the image changes, it may not be suitable for all scenarios. For ideal performance we recommend using SVG for in-app vector graphics and icons, but prefer bitmap image formats in other cases. In case you run into performance issues, test switching from SVG to a bitmap image format to see if it alleviates the problem. You may also consider using SVG rasterization (see below).

If you need to keep your Android or iOS app package size as small as possible, it is also preferable to avoid using SVG, as the the package depends on SkiaSharp.

SVG rasterization support

For improved performance you can use the RasterizePixelHeight and RasterizePixelWidth properties of SvgImageSource to rasterize SVG image when first loaded. When rasterized, the image will always scale this rasterized version of the SVG image instead of rendering the vector-based graphics.

For example:

<Image Stretch="UniformToFill" Width="100" Height="100">
  <Image.Source>
    <SvgImageSource 
      UriSource="ms-appx:///Assets/couch.svg" 
      RasterizePixelHeight="10" 
      RasterizePixelWidth="10" />
  </Image.Source>
<Image>

Will render as:

Scaled up

Note that this feature is not available on WebAssembly where the rendering is handled directly by the browser.