Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

rate.svg

<?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?

rating.svg

like image 622
Emil Avatar asked Jan 08 '18 22:01

Emil


1 Answers

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.

like image 151
Daniel Luberda Avatar answered Sep 20 '22 01:09

Daniel Luberda