Menu
I've been using the jQuery.svg plugin 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?
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div>
<svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
<circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg>
<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg>
</body>
</html>
Do I need a meta tag saying that there is SVG content in the page or define the SVG namespace somehow?
236
See this link (SVG in HTML introduction @ Mozilla Developer Center).
An inline SVG example can be seen here.
55
In 2020, using SVG in html or xhtml is now possible in all browsers.
Example of HTML / SVG(2.0) code that I use
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head> <title>SVG within XHTML Demo</title> </head>
<body>
<p>
<b>Electricity Plan</b>
</p>
<svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
<defs>
<g id="prise">
<line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
<line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
<path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
<line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
<line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
</g>
</defs>
<line x1='100' y1='50' x2='140' y2='50' stroke='blue'/>
<use href='#prise' x='140' y='50'/>
</svg>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
