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

Question

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

Answer 1

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

1. 在免费矢量绘图工具Inkscape中打开您的.svg
文件
2. 另存为“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 Canvas

更新（2015-08-25）

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

Answer 2

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

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

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

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

Answer 3

请看这篇文章： 将 SVG 图形转换为 XAML Metro 图标 您可以在这里找到一种通过转换为 XPS 进行转换的方法。

您还可以使用 Svg2Xaml 转换器。

Answer 4

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

将我的多色 SVG 正确批量转换为 XAML 时没有任何问题，我将其添加到 WPF 用户控件中的 Visual Studio 中（要进行预览，您需要手动选择 SVG 文件）

Answer 5

我为此编写了一个应用程序控制台应用程序。只需将 [imagename].svg 放入应用程序的根文件夹即可。这是代码，您可以自己构建它：

首先，您必须安装SVG包：Install-Package Svg（使用nuget包管理器控制台安装）

using Svg;

internal class Program
{
    public static string ConvertSvgToXaml(string svgFilePath)
    {
        if (!File.Exists(svgFilePath))
        {
            throw new FileNotFoundException("SVG file not found.");
        }

        using (var stream = new FileStream(svgFilePath, FileMode.Open, FileAccess.Read))
        {
            var svgDocument = SvgDocument.Open<SvgDocument>(stream);

            foreach (var child in svgDocument.Children)
            {
                if (child is SvgPath svgPath)
                {
                    string pathData = svgPath.PathData.ToString();

                    string xamlPath = $"<Path Data=\"{pathData}\" Fill=\"{svgPath.Fill}\" />";
                    return xamlPath;
                }
            }
        }

        throw new InvalidOperationException("No <path> elements found in the SVG.");
    }

    static void Main(string[] args)
    {
        Console.WriteLine("Enter the name of the SVG file (without extension):");
        string name = Console.ReadLine();
        try
        {
            string svgFilePath = $"{name}.svg"; 
            string xamlPath = ConvertSvgToXaml(svgFilePath);

            Console.WriteLine("XAML Path Data:");
            Console.WriteLine(xamlPath);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error: {ex.Message}");
        }
        Console.ReadKey();
    }
}

构建应用程序并打开它后，只需写下您的图像名称（不带.svg）