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
Do we always have to use fix width and height for SVG files?
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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With