控制渲染SVG圖形？

Question

我需要一個控件來渲染SVG圖形。數據以StreamReader對象的形式出現。渲染這樣的圖像最簡單的方法是什麼？

目前，我使用的是PNG格式：

但是我喜歡的東西更高的分辨率。 SVGs對此非常完美。

---

樣品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應用程序中使用SVGs，我發現有可能被添加到提供此功能的情侶套餐，但最終我使用了轉換爲XAML的SVG，這些SVG可以在WPF應用程序中進行縮放，就像SVG圖像可以在瀏覽器上進行縮放等一樣。如果你有權訪問SVG代碼（看起來像你），那麼這對你來說可能是一個很好的解決方案。

這些都是我用它來實現這一目標的步驟：

SVG轉換爲XAML 我更喜歡使用Inkscape的下列步驟。

1. 在圖像編輯器（例如Inkscape）中打開SVG。編輯器必須支持打開SVG並將SVG另存爲XAML文件。
2. 在編輯器中，將文件另存爲XAML。如果給出選擇，該文件應該保存爲兼容Silverlight。關閉圖像編輯器。
3. 如果需要進行任何顏色更改，請在文本編輯器（例如Notepad ++，Visual Studio）中打開該文件，然後查找具有顏色值的任何路徑（查找類似'fill =「＃000000」'）的路徑並將其更改爲所需的十六進制顏色值。完成後保存文件並關閉文本編輯器。

在WPF項目

1. 使用XAML圖片用鼠標右鍵單擊資源文件夾中的圖像應保持在（如\資源\圖像），揀去添加exisitng文件的選項。 確保文件選擇類型包含XAML文件。導航到要使用的文件並添加它。
2. 在Visual Studio中打開屬性窗格（右鍵單擊該文件並單擊「屬性」選項）。在「屬性」窗格的「高級」部分下，將「構建操作」設置爲「資源」並將「複製到輸出目錄」設置爲「不要複製」。

現在可以通過設置項目的來源來使用圖像來顯示圖像（例如Frame）到資源路徑（例如「/resources/images/.xaml」）。這可以直接或通過綁定來設置。

示例用於顯示XAML圖像的WPF/XAML代碼 以下代碼顯示瞭如何顯示使用上述步驟添加的XAML圖像的示例。此代碼將縮放圖像以填充它添加到的容器。圖像的來源通過用於Frame元素源的綁定提供。這可以替換爲圖像路徑的字符串（這是通過綁定值提供的內容）。

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

路徑字符串的一個例子是：

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

如果圖像位於一個DLL和在相同的DLL被使用時，路徑串需要使用以包括以下的詳細信息格式：

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