Databases
StackOverflow2013
Postsdbo
POHow can I mix SVG and HTML into a page?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I mix SVG and HTML into a page?
    text
    copied!<p>I've been using the <a href="http://keith-wood.name/svg.html" rel="noreferrer">jQuery.svg plugin</a> to do some SVG rendering and it works perfectly but I also want to have the server render some SVG into the page and I can't get that to work. How do I add some SVG like below into the page so that Firefox will render it?</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" &gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="map editable" id="map_1"&gt;&lt;svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"&gt;&lt;image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /&gt;&lt;circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /&gt;&lt;circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /&gt;&lt;circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /&gt;&lt;circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /&gt;&lt;circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /&gt;&lt;polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /&gt;&lt;/svg&gt;&lt;/div&gt; &lt;svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg"&gt; &lt;circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/&gt; &lt;/svg&gt; &lt;svg:svg version="1.1" baseProfile="full" width="300px" height="200px"&gt; &lt;svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/&gt; &lt;/svg:svg&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Do I need a meta tag saying that there is SVG content in the page or define the SVG namespace somehow? </p>
 

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