Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to use SVG images for Xamarin.Forms?

rraallvvrraallvv Member ✭✭
edited January 2018 in Xamarin.Forms

It seems it's possible to some extent to use SVG images in some controls, for instance SVG files can be only added as embedded resources when using some of the available NuGet packages out there. Also, at least for ToolbarItem the images need to be stored somewhere in the file system, so I had to create my own SVG rasterizer that saves those images to bitmaps in the cache directory, so those could passed in a FileImageSource to the Icon property in the control ToolbarItem. For, the control Button those images need to be stored in the Resources or drawable directory, so it won't work with the rasterized bitmaps, since those are stored in the cache directory. With all those limitations for trying to use SVG files directly at runtime, I was thinking maybe I could convert all those images to the corresponding JPG or PNG images at build time using some task, but I'm not sure whether that conversion could be done with the current available tools. So, my questions is how to use directly or convert SVG images to use in the common controls in Xamarin.Forms (ToolbarItem, Button, etc)?

Best Answer


  • AlexPAlexP Member ✭✭

    And I thought about something else,
    You could use another approach.

    You can actually draw SVGs in SkiaSharp.
    Check my blog post about Using SVG with SkiaSharp.

    You can adjust a bit the code to draw it as a transparent picture on top of your control, in the appropriate place.
    Maybe that could work for you.

    Hope it gives you some options. :smile:

  • rraallvvrraallvv Member ✭✭

    @AlexP I used a similar approach to save the file to the filesystem for ToolbarItem.Icon, unfortunately for Button.Image I get an exception if I pass something that can't be retrieved with Context.GetDrawable(imageFile); by the renderer, so I had to implement UploadBitmap() in a custom one. I finally decided to use a tool instead to convert all SVG images to PNG at build time. Thanks for looking into it, I really appreciate it.

  • djgtramdjgtram HUMember ✭✭
    edited July 2018

    I have perfect SVG toolbar icon support for the Android platform (actually, I prefer to use SVG path data rather than full-blown SVG files myself but that's only a question of taste) but I'm still looking for ways to do the same on iOS and UWP. Basically, the Android custom page renderer has a handy function that lets us provide the icons, so a custom renderer and a custom SvgToolbarItem is all it takes. I haven't yet identified how the icons could be replaced in the custom renderers of the other two platforms. So if anybody has an idea willing to share, we might be able to crack this together.

  • ssamixssamix Member ✭✭✭
    edited October 2019

    <custom:CSvg ResourceId="SvgF.Custom.mastercard.svg" WidthRequest="70" HeightRequest="50" HorizontalOptions="Center" VerticalOptions="Center"/>

    svg files in main project file not in android and ios project ?
    resourceid some problem is not working any idea? thanks

  • ssamixssamix Member ✭✭✭
                     xmlns:custom="clr-namespace:SvgF.Custom" <referance
  • rafaelstalderrafaelstalder Member ✭✭

    Thanks for your example and the nice blog! I just have a question about SVGs and SkiaSharp. I saw there is an open issue in SkiaSharp regarding gradients. I had the feeling that gradients are not working at all with SkiaSharp (at least not when having it defined inside the SVG) isn't it?


  • AlexPAlexP Member ✭✭

    Hi @rafaelstalder,
    Thanks for appreciating the blog. :smile:

    I'm not familiar with any gradient issues. But since the whole idea of SVG via SkiaSharp is some kind of a workaround, I can won't be surprised if things are not working in some corner cases.

Sign In or Register to comment.