title: Control for rendering SVG graphics?
body: <p>I need a control for rendering SVG graphics. The data is coming in the in the form of a <code>StreamReader</code> object. What's the easiest way to render such an image?</p>
  
  <p>At present, I'm using PNGs:</p>
  
  <p><img src="https://i.stack.imgur.com/jBIVX.png" /></p>
  
  <p>But I'd like something higher resolution. SVGs would be perfect for this.</p>
  
  <hr>
  
  <p>Sample SVG:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;!-- Generated by graphviz version 2.28.0 (20110507.0327)
   --&gt;
  &lt;!-- Title: G Pages: 1 --&gt;
  &lt;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"&gt;
  &lt;g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 212)"&gt;
  &lt;title&gt;G&lt;/title&gt;
  &lt;polygon fill="white" stroke="white" points="-4,5 -4,-212 259,-212 259,5 -4,5"/&gt;
  &lt;!-- a --&gt;
  &lt;g id="node1" class="node"&gt;&lt;title&gt;a&lt;/title&gt;
  &lt;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"/&gt;
  &lt;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"/&gt;
  &lt;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"/&gt;
  &lt;text text-anchor="middle" x="133" y="-177.3" font-family="Times New Roman,serif" font-size="14.00"&gt;a&lt;/text&gt;
  &lt;/g&gt;
  &lt;!-- b --&gt;
  &lt;g id="node3" class="node"&gt;&lt;title&gt;b&lt;/title&gt;
  &lt;ellipse fill="none" stroke="black" cx="133" cy="-100" rx="27" ry="18"/&gt;
  &lt;text text-anchor="middle" x="133" y="-96.3" font-family="Times New Roman,serif" font-size="14.00"&gt;b&lt;/text&gt;
  &lt;/g&gt;
  &lt;!-- a&amp;#45;&amp;gt;b --&gt;
  &lt;g id="edge2" class="edge"&gt;&lt;title&gt;a&amp;#45;&amp;gt;b&lt;/title&gt;
  &lt;path fill="none" stroke="black" d="M133,-158.413C133,-149.086 133,-138.069 133,-128.192"/&gt;
  &lt;polygon fill="black" stroke="black" points="136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057"/&gt;
  &lt;/g&gt;
  &lt;!-- c --&gt;
  &lt;g id="node4" class="node"&gt;&lt;title&gt;c&lt;/title&gt;
  &lt;polygon fill="none" stroke="black" points="144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41"/&gt;
  &lt;text text-anchor="middle" x="72" y="-19.3" font-family="Times New Roman,serif" font-size="14.00"&gt;hello world&lt;/text&gt;
  &lt;/g&gt;
  &lt;!-- b&amp;#45;&amp;gt;c --&gt;
  &lt;g id="edge3" class="edge"&gt;&lt;title&gt;b&amp;#45;&amp;gt;c&lt;/title&gt;
  &lt;path fill="none" stroke="black" d="M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327"/&gt;
  &lt;polygon fill="black" stroke="black" points="95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031"/&gt;
  &lt;/g&gt;
  &lt;!-- d --&gt;
  &lt;g id="node6" class="node"&gt;&lt;title&gt;d&lt;/title&gt;
  &lt;polygon fill="none" stroke="black" points="194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015"/&gt;
  &lt;text text-anchor="middle" x="194" y="-19.3" font-family="Times New Roman,serif" font-size="14.00"&gt;d&lt;/text&gt;
  &lt;/g&gt;
  &lt;!-- b&amp;#45;&amp;gt;d --&gt;
  &lt;g id="edge5" class="edge"&gt;&lt;title&gt;b&amp;#45;&amp;gt;d&lt;/title&gt;
  &lt;path fill="none" stroke="black" d="M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489"/&gt;
  &lt;polygon fill="black" stroke="black" points="181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757"/&gt;
  &lt;/g&gt;
  &lt;!-- e --&gt;
  &lt;g id="node7" class="node"&gt;&lt;title&gt;e&lt;/title&gt;
  &lt;polygon fill="none" stroke="black" points="254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199"/&gt;
  &lt;text text-anchor="middle" x="222" y="-177.3" font-family="Times New Roman,serif" font-size="14.00"&gt;e&lt;/text&gt;
  &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>