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

Question

如何在 Windows 8 / WinRT 中将 SVG 文件转换为 XAML。我对这个 XAML / SVG 环境不熟悉，所以请有经验的人帮我实现。我需要解析这个 SVG 文件，并通过代码在页面上显示内容。

- WinPhone Artist

---

虽然在本质上相似，但SVG和XAML并不相同...我不确定你想做什么？你只需要为开发目的进行一次“解析”吗？对于这个问题，Adobe Illustrator有Xaml导出器，而Microsoft Expression Design 4现在是免费的...它可能可以做到。 - WiredPrairie

不，我需要通过代码解析那个SVG文件，这是用于绘制地图的。我会获得以SVG文件形式表示的地图边界，我需要在运行时解析它并将其绘制在画布上。 - WinPhone Artist

使用WinJs而不是Xaml或者托管一个浏览器。两者都可以本地显示SVG内容。 - WiredPrairie

Answer 1

对我来说最简单的方法是：

1. 在免费矢量绘图工具Inkscape中打开您的.svg文件
2. 另存为 "Microsoft XAML (*.xaml)"

此外，转换后您可能需要稍微更新结果输出文件，因为并非所有的XAML处理引擎都支持将字符串转换为Figures（如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输出：

方法（超级hack）：

• 使用Inkscape保存为PDF

• 将文件扩展名从PDF更改为AI

• 使用Expression Design打开AI文档

• 导出到Silverlight Canvas

更新（2015年8月25日）

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

- Sevenate

---

即使这仍然感觉像一个hack，也要+1。人们会认为现在的工具会给你一个想要保存它的方式。 - Jesse Chisholm

@JesseChisholm 对我来说，这确实感觉像是一个hack！但即使在今天的Windows 10开发中仍然有效 :) - Sevenate

注意，Inkspace在保存为xaml时有一个“Silverlight兼容”选项。你可以检查一下这是否解决了你的问题？我不使用silverlight。 - mdiehl13

如果我尝试使用“Expression Design”方法，我会得到“无法将文本值'F1 M 0,0L 46.5193,0L 46.5193,46.5193L 0,46.5193L 0,0'分配到类型为'RectangleGeometry'的属性'Clip'中”。您使用哪个导出选项？XAML Silverlight 3 Canvas还是XAML Silverlight 4 / WPF Canvas。您的其他设置是什么（文本，实时效果等）？svg / pdf / ai需要特定的大小吗？哪一个？当您想要嵌入xaml时，您使用什么名称？vectorgraphic.xaml？ - testing

@testing 我将其导出为“XAML Silverlight 4 / WPF Canvas”，并将所有效果光栅化：http://i.imgur.com/YX33cAD.png。此外，导出文件名完全由您决定（只需添加“.xaml”扩展名即可）。 - Sevenate

Inkscape没有保存文件为Microsoft XAML (*.xaml)的方法。 - undefined

Answer 2

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

我将字体的ttf文件下载到我的资源文件夹中。

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

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

- sonicbabbler

Answer 3

请查看这篇文章：将SVG图形转换为XAML Metro图标。您可以通过转换为XPS来进行转换。您还可以使用Svg2Xaml转换器。

- Alexander Zwitbaum

Answer 4

在 Microsoft Store 中有一个免费的转换器可用（作为独立的 Windows 应用程序）。它被称为 SVG to UWP XAML Converter。

它可以将我的多色 SVG 批量正确地转换为 XAML，而且没有任何问题。我将其添加到了 WPF 用户控件中的 Visual Studio 中（如果要预览，则需要手动选择 SVG 文件）。

- Andre