如何在 Windows 8 / WinRT 中将 SVG 文件转换为 XAML答案

【问题标题】：How to convert SVG file to XAML in windows 8 / WinRT如何在 Windows 8 / WinRT 中将 SVG 文件转换为 XAML
【发布时间】：2013-12-02 12:58:03
【问题描述】：

如何在 Windows 8 / WinRT 中将 SVG 文件转换为 XAML。我是这个 XAML / SVG 环境的新手。所以请任何人帮我在windows 8中实现相同的功能。我需要解析这个svg文件并需要通过代码在页面中显示内容。

【问题讨论】：

虽然本质上相似，但 SVG 和 XAML 并不相同……我不确定您要做什么？您是否只需要出于开发目的进行一次性“解析”？为此，有 Adobe Illustrator 的 Xaml 导出器，Microsoft Expression Design 4 现在是免费的……它可能会这样做。
不，我需要通过代码解析该 svg 文件，这是用于绘制地图。我将以 SVG 文件的形式获取地图边界，我需要在运行时对其进行解析并在画布中绘制它
使用 WinJs 而不是 Xaml 或托管浏览器。两者都可以原生显示 SVG 内容。

标签： xaml c#-4.0 svg windows-8 windows-runtime

【解决方案1】：

对我来说，最简单的方法如下：

用免费的矢量绘图工具打开你的.svg文件Inkscape
另存为“Microsoft XAML (*.xaml)”

此外，您可能需要在转换后稍微更新结果输出文件，因为并非所有 XAML 处理引擎都支持将字符串转换为图形（如Why does this Xaml Path crash silverlight? 接受的答案中所述）。所以，例如，如果你有这个：

<Path Fill="#FFEDEDED" StrokeThickness="1" Stroke="#FFA3A3A3" Opacity="0.7" 
                VerticalAlignment="Center" HorizontalAlignment="Center" >
    <Path.Data>
        <PathGeometry Figures="m 1 2 l 4.0525 5.2361 l 4.0527 -5.2361 z "/>
    </Path.Data>
</Path>

那么你需要把它改成这样：

<Path Fill="#FFEDEDED" StrokeThickness="1" Stroke="#FFA3A3A3" Opacity="0.7" 
            VerticalAlignment="Center" HorizontalAlignment="Center"
            Data="m 1 2 l 4.0525 5.2361 l 4.0527 -5.2361 z" />

- 或 -

您可以使用稍微不同的方式从 Inkscape 导出 xaml，Tim Heuer 在接受的问题 Convert SVG to XAML 的回答中对此进行了描述，因为这两种方式产生不同的 xaml 输出：

方法（是的，超级黑客）：

使用 Inkscape 保存为 PDF

将文件扩展名从 PDF 重命名为 AI

使用Expression Design打开AI文档

导出到 Silverlight 画布

更新（2015-08-25）

我发现自己越来越频繁地使用第二种（“hack”）方式，而不是第一种（更直接）的方式，因为它创建了更多“预期”的 XAML，正如我所说的那样。

【讨论】：

+1，尽管这仍然感觉像个黑客。有人会认为，到现在为止，这些工具会为您提供一种保存方法，就像您想要保存它一样。
@JesseChisholm 这对我来说也确实像个黑客！然而，即使在今天的 Windows 10 开发中，它仍然有效 :)
注意，当您保存为 xaml 时，Inkspace 有一个“Silverlight 兼容”选项。你能检查一下这是否能解决你的问题吗？我不使用silverlight
如果我尝试 Expression Design 方法，我得到 无法将文本值 'F1 M 0,0L 46.5193,0L 46.5193,46.5193L 0,46.5193L 0,0' 分配给属性 'Clip ' 类型为 'RectangleGeometry'。您使用哪种导出选项？ XAML Silverlight 3 Canvas 或 XAML Silverlight 4 / WPF Canvas。您的其他设置是什么（文本、实时效果……）？ svg/pdf/ai 需要一定的尺寸吗？哪一个？当您想嵌入 xaml 时，您使用什么名称？ vectorgraphic.xaml?
@testing 我导出为“XAML Silverlight 4 / WPF 画布”，所有效果均已光栅化：i.imgur.com/YX33cAD.png。导出文件名也完全取决于您（只需添加 .xaml 扩展名）

【解决方案2】：

请看这篇文章： Transforming SVG graphics to XAML Metro Icons 您可以在此处找到一种通过转换为 XPS 进行转换的方法。

您也可以使用Svg2Xaml 转换器。

【讨论】：

【解决方案3】：

我作弊并将我的 SVG 转换为字体。首先，我创建了 SVG，然后使用 IcoMoon 创建了字体。 https://icomoon.io/app/#/select.

我将字体的 ttf 下载到包含内容的资产文件夹中。

接下来我添加代码。注意字体文件名，然后是#，然后是字体的名称。文字应该是

    <TextBlock Text="&#xe901;" FontFamily="/Assets/icomoon.ttf#icomoon" FontSize="45"</TextBlock>

【讨论】：