How to use SVG images correctly in xamarin forms / Android?

Question

My question is probably not Xamarin.Forms related but can be extended to Android.

I have been using PNG icons in my Xamarin.Forms app. I added each size into drawable folders. This works perfectly fine.

Now I switched some PNG's with SVG files using FFImageLoading library. It also works fine in general but It looks like that it doesn't pick the size correctly when I use within Grid or StackLayout if I don't give exact height and width request.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />                       
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

     <Frame Style="{StaticResource frmStyle}"  BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0" >
        <StackLayout Orientation="Vertical"  >                           
            <ffimageloadingsvg:SvgCachedImage Source="resource://myApp.Images.Icons.rating.svg">

            </ffimageloadingsvg:SvgCachedImage>                           
        </StackLayout>
    </Frame>

    <Frame Style="{StaticResource frmStyle}" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="1" >
        <StackLayout Orientation="Vertical" >                             
            <Image  Source="ic_feedback_white_48dp.png"  >

            </Image>
        </StackLayout>
    </Frame>
</Grid>

So above code results as a screenshot as first one if I don't use fix dimensions. The left SVG file is also very blurry. I thought SVG files never get blurry when we zoom them. rate.svg file code is as below

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
  <g>
    <path id="path1" transform="rotate(0,12,12) translate(0,0) scale(0.75,0.75)  " fill="#FFFFFF" d="M16.001007,0L20.944,10.533997 32,12.223022 23.998993,20.421997 25.889008,32 16.001007,26.533997 6.1109924,32 8,20.421997 0,12.223022 11.057007,10.533997z" />
  </g>
</svg>

If I use fix dimensions as 72x72 as below, the result looks fine. See the right side icon is PNG and it doesn't have any fix height and width. it looks like that it picks from drawable correct size.

So my questions are

1. Do we always have to use fix width and height for SVG files?

2. If yes in those cases using drawable folders with PNG files has more advantage as they can work dynamically. Of course, I can do conditional sizing for SVG files but this requires more testing different screens etc. How can we work with SVG files dynamically adjusting for any screen size?

Solution 1

It really seems like such a no brainer to use SVG instead of generating a bunch of fixed size images for many different possible deploys. Its a wonder there isnt better support for it! I found a good example here that seems to do what you need. I'm just starting to dig into this myself.

https://www.xamboy.com/2018/03/29/sharing-svg-icons-across-platforms-in-xamarin-forms/ https://github.com/CrossGeeks/SharedSvgSample

Solution 2

When using SVG files you must specify either a view size (at least one dimension), otherwise it would fallback to some default value (100 or so).

You can also specify SVG size without specifying view size, see SvgImageSource.FromFile method and it's width/height parameters.

I think we could modify library code to read SVG file size instead fallback to a constant size value... but it's not implemented yet.

If yes in those cases using drawable folders with png files has more advantage as they can work dynamically.

You're not right. Image files from drawable folders will always have the same size which is equal to original file resolution.

Solution 3

I've wrote a blog post about creating a simple control to handle the situation you are tackling.

I think that you will be able to set use it dynamically, without specifying any width or height to it. Give it a try.