如何在UWP的XAML Image组件中使用SVG图像文件

UWP 原生的 BitmapImage 类仅支持 PNG、JPG、GIF、BMP 这类光栅图像格式，不支持直接加载SVG文件作为图像源，这是你路径正确但图片无法渲染的核心问题。

方案1：使用UWP原生SvgImageSource加载（推荐） #

SvgImageSource是UWP专门为SVG加载提供的图像源类，适配Windows 10 1709（内部版本16299）及以上系统版本，替换你创建图像源的代码即可：

using namespace Windows::UI::Xaml::Media::Imaging;
using namespace Windows::Foundation;

// 替换原来的BitmapImage创建逻辑
m_imageSource = SvgImageSource(Uri{ GetFilePath() + L"FamilyValueProp\\Assets\\Images\\family_promo.svg" });

路径优化建议：如果SVG文件是你项目内的打包资源，建议直接使用ms-appx:///协议拼接路径，避免手动拼接本地路径出现格式错误，示例：

m_imageSource = SvgImageSource(Uri(L"ms-appx:///FamilyValueProp/Assets/Images/family_promo.svg"));

前台的Image组件代码不需要修改，SvgImageSource和BitmapImage一样继承自ImageSource基类，可以直接赋值给Source属性。

方案2：兼容低版本系统的替代方案 #

如果你的应用需要兼容Windows 10 1709以下的版本，可以选择两种实现：

• 将SVG导出为多分辨率的PNG资源，直接用原有BitmapImage逻辑加载
• 把SVG转换为XAML的Path路径数据，直接嵌入页面布局中渲染，兼容性最好，性能更高，适合简单的插图场景

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