Databases
StackOverflow2013
Postsdbo
POControl for rendering SVG graphics?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POControl for rendering SVG graphics?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload