为什么 SvgImageSource Image 在 UWP 中看起来比 BitmapImage 模糊？

Question

<StackPanel Canvas.Left="20" Canvas.Top="20">
        <Image Width="24" Height="24" >
            <Image.Source>
                <BitmapImage UriSource="/Assets/AddComment.png"></BitmapImage>
            </Image.Source>
        </Image>
        <Image Width="24" Height="24" Stretch="None">
            <Image.Source>
                <SvgImageSource  UriSource="/Assets/AddComment.svg"></SvgImageSource>
            </Image.Source>
        </Image>
    </StackPanel>

我认为 .svg 图片看起来比 .png 图片更好。但是这里的 .svg 图片看起来很模糊。我不知道，为什么 .svg 图像看起来很模糊？有什么解决办法吗？

Answer 1

Why SvgImageSource Image, looks blurry than BitmapImage in UWP?

请使用 VS 编辑 svg 内容，并将高度和宽度属性更新为 auto，如下所示。

<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" shape-rendering="crispEdges">

然后对 RasterizePixelHeight 和 RasterizePixelWidth 属性应用较大的值 SvgImageSource。请注意，您需要将图像控件 Stretch 属性设置为 Fill

<Image
    Width="24"
    Height="24"
    Stretch="Fill">
    <Image.Source>
        <SvgImageSource
            RasterizePixelHeight="240"
            RasterizePixelWidth="240"
            UriSource="/Assets/AddComment.svg" />
    </Image.Source>
</Image>

顶部是png底部是svg

为什么 SvgImageSource Image 在 UWP 中看起来比 BitmapImage 模糊？

Why SvgImageSource Image, looks blurry than BitmapImage in UWP?

uwp

uwp-xaml