UWP中SvgImageSource加载的SVG图片比BitmapImage模糊的原因及解决方法

实际运行效果对比如下：

• UWP平台的SvgImageSource不会直接做矢量渲染，而是先将SVG栅格化为位图后再绘制到界面。默认会按Image控件的逻辑像素尺寸（你设置的2424）生成对应尺寸的位图，没有适配系统的DPI缩放比例。比如系统显示缩放为150%时，24逻辑像素实际对应36物理像素，低分辨率的2424位图被拉伸到36物理像素显示就会出现模糊。
• 你在加载SVG的Image控件上设置了Stretch="None"，该配置会强制SVG按光栅化后的位图原始像素尺寸显示，不会适配控件尺寸做矢量缩放，进一步放大了模糊问题。
• 若SVG源文件本身的viewBox属性配置错误，比如没有设置和设计尺寸匹配的视图框，也会导致光栅化时采样出现偏差，显示模糊。

1. 移除加载SVG的Image控件的Stretch="None"配置，保持默认的Stretch="Uniform"即可，保证矢量图可以按控件尺寸等比适配。
2. 显式指定SvgImageSource的光栅化像素尺寸，适配系统DPI：
   可以通过DisplayInformation类获取当前屏幕的DPI缩放比例，动态计算需要的光栅化像素尺寸，代码示例如下：

var displayInfo = DisplayInformation.GetForCurrentView();
double scaleFactor = displayInfo.RawPixelsPerViewPixel;
SvgImageSource svgSource = new SvgImageSource(new Uri("ms-appx:///Assets/AddComment.svg"));
// 按DPI缩放设置光栅化尺寸，避免高DPI下模糊
svgSource.RasterizePixelWidth = (int)(24 * scaleFactor);
svgSource.RasterizePixelHeight = (int)(24 * scaleFactor);
// 赋值给目标Image控件
targetImage.Source = svgSource;

如果直接用XAML声明，可以设置足够大的光栅化尺寸（矢量图放大不会失真，设置为最大使用尺寸的2~3倍即可）：

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

3. 检查SVG源文件配置：打开SVG文件，确认根节点的viewBox属性和设计尺寸匹配，比如24*24的图标要保证配置为viewBox="0 0 24 24"，不要存在多余的空白边距。
4. 最优替代方案：小尺寸图标场景可以改用PathIcon或FontIcon实现，直接通过XAML路径绘制矢量图形，不需要经过光栅化步骤，清晰度最高。

内容的提问来源于stack exchange，提问作者PremKumar Shanmugam