控制渲染SVG图形？

Question

我需要一个控件来渲染SVG图形.数据以StreamReader对象的形式出现.渲染这样一个图像最简单的方法是什么？

目前,我正在使用PNG:

但是我想要一些更高分辨率的东西.SVG将是完美的.

---

样本SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
 -->
<!-- Title: G Pages: 1 -->
<svg width="262pt" height="216pt"
 viewBox="0.00 0.00 262.00 216.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 212)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-212 259,-212 259,5 -4,5"/>
<!-- a -->
<g id="node1" class="node"><title>a</title>
<polygon fill="purple" stroke="purple" points="159.618,-186.523 133,-198.872 106.382,-186.523 116.549,-166.541 149.451,-166.541 159.618,-186.523"/>
<polygon fill="none" stroke="purple" points="165.003,-188.397 133,-203.245 100.997,-188.397 114.139,-162.57 151.861,-162.57 165.003,-188.397"/>
<polygon fill="none" stroke="purple" points="170.387,-190.272 133,-207.617 95.6126,-190.272 111.729,-158.598 154.271,-158.598 170.387,-190.272"/>
<text text-anchor="middle" x="133" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node3" class="node"><title>b</title>
<ellipse fill="none" stroke="black" cx="133" cy="-100" rx="27" ry="18"/>
<text text-anchor="middle" x="133" y="-96.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id="edge2" class="edge"><title>a&#45;&gt;b</title>
<path fill="none" stroke="black" d="M133,-158.413C133,-149.086 133,-138.069 133,-128.192"/>
<polygon fill="black" stroke="black" points="136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057"/>
</g>
<!-- c -->
<g id="node4" class="node"><title>c</title>
<polygon fill="none" stroke="black" points="144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41"/>
<text text-anchor="middle" x="72" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">hello world</text>
</g>
<!-- b&#45;&gt;c -->
<g id="edge3" class="edge"><title>b&#45;&gt;c</title>
<path fill="none" stroke="black" d="M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327"/>
<polygon fill="black" stroke="black" points="95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031"/>
</g>
<!-- d -->
<g id="node6" class="node"><title>d</title>
<polygon fill="none" stroke="black" points="194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015"/>
<text text-anchor="middle" x="194" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">d</text>
</g>
<!-- b&#45;&gt;d -->
<g id="edge5" class="edge"><title>b&#45;&gt;d</title>
<path fill="none" stroke="black" d="M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489"/>
<polygon fill="black" stroke="black" points="181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757"/>
</g>
<!-- e -->
<g id="node7" class="node"><title>e</title>
<polygon fill="none" stroke="black" points="254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199"/>
<text text-anchor="middle" x="222" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">e</text>
</g>
</g>
</svg>

Answer 1

当我研究在 WPF 应用程序中使用 SVG 时，我发现可以添加几个包来提供此功能，但最终还是使用了我转换为 XAML 的 SVG，这将能够扩展WPF 应用程序就像 SVG 图像能够在浏览器等上缩放一样。如果您可以访问 SVG 代码（看起来您确实可以访问），那么这对您来说可能是一个很好的解决方案。

\n\n

这些是我用来实现这一目标的步骤：

\n\n

将 SVG 转换为 XAML \n我更喜欢使用 Inkscape 执行以下步骤。

\n\n

\n
1. 在图像编辑器（例如 Inkscape）中打开 SVG。编辑器必须支持打开 SVG 并将 SVG 保存为 XAML 文件。
\n
2. 在编辑器中，将文件另存为 XAML。如果可以选择，该文件应保存为 Silverlight 兼容文件。关闭图像编辑器。
\n
3. 如果需要任何颜色更改，请在文本编辑器（例如 Notepad++、Visual Studio）中打开文件并查找具有颜色值的任何路径（查找类似 \'fill=\xe2\x80\x9c#000000\xe2\x80 \x9d\') 并将其更改为所需的十六进制颜色值。完成后保存文件并关闭文本编辑器。
\n

\n\n

在 WPF 项目中使用 XAML 图像

\n\n

\n
1. 右键单击应保存图像的资源文件夹（例如\\Resources\\Images），选择添加现有文件的选项。\n确保文件选择类型包括XAML 文件。导航到要使用的文件并添加它。
\n
2. 在 Visual Studio 中打开“属性”窗格（右键单击该文件并单击“属性”选项）。在“属性”窗格的“高级”部分下，将“构建操作”设置为“资源”，将“复制到输出目录”设置为“不复制”。
\n

\n\n

现在可以通过将项目的源设置为将图像（例如框架）显示到资源路径（例如\xe2\x80\x9c/resources/images/.xaml\xe2\x80\x9d）来使用图像。这可以直接设置或通过绑定设置。

\n\n

用于显示 XAML 图像的示例 WPF/XAML 代码\n以下代码显示如何显示使用上述步骤添加的 XAML 图像的示例。此代码将缩放图像以填充其添加到的容器。图像的源是通过用于 Frame 元素的源的绑定提供的。这可以替换为图像路径的字符串（这是通过绑定值提供的）。

\n\n

<Viewbox Stretch="Uniform"\n         Margin="4,4"\n         VerticalAlignment="Center">\n             <Frame Source="{Binding ImageSource}" \n                    NavigationUIVisibility="Hidden"/>\n</Viewbox>\n

\n\n

路径字符串的示例是：

\n\n

/resources/images/<file-name>.xaml\n

\n\n

如果图像位于 DLL 中并在同一 DLL 中使用，则路径字符串将需要使用以下格式包含更多信息：

\n\n

/<AssemblyName>;component/resources/images/<file-name>.xaml\n

\n