如何在 xamarin 表单/Android 中正确使用 SVG 图像？

Question

我的问题可能与 Xamarin.Forms 无关，但可以扩展到 Android。

我一直在我的 Xamarin.Forms 应用程序中使用 PNG 图标。我将每个尺寸添加到可绘制文件夹中。这工作得很好。

现在我使用FFImageLoading库用 SVG 文件切换了一些 PNG 。它在一般情况下也可以正常工作，但是如果我没有给出确切的高度和宽度请求，它看起来在我在 Grid 或 StackLayout 中使用时不会正确选择大小。

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

Answer 1

使用 SVG 文件时，您必须指定视图大小（至少一维），否则它将回退到某个默认值（100 左右）。

您还可以指定 SVG 大小而不指定视图大小，请参阅SvgImageSource.FromFile方法及其width/height参数。

我认为我们可以修改库代码来读取 SVG 文件大小，而不是回退到恒定大小值......但它尚未实现。

如果是，在这些情况下使用带有 png 文件的可绘制文件夹具有更多优势，因为它们可以动态工作。

你不对。可绘制文件夹中的图像文件将始终具有相同的大小，等于原始文件分辨率。