How to use svg namespace in xhtml documents

StackOverflow https://stackoverflow.com/questions/22806022

Question

Can someone tell me why this document does not draw a circle on Chrome?

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<body>
  <svg:svg width="100" height="100">
     <svg:circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg:svg>
</body>
</html>
Was it helpful?

Solution

HTML prior to HTML5 does not support <svg> element. Like all HTML, HTML5 is not namespace aware and therefore it does not understand namespace prefixes. For a HTML parser, element
<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
has different element name than
<svg xmlns="http://www.w3.org/2000/svg">
and that is why HTML(5) only supports literal svg element name for inline svg code.

Your solution is to either serve the page as XHTML, so it will be processed as XML and thus namespace aware, or you need to add a default namespace declaration on <svg> element for the svg namespace (like my latter example above) and then you can remove the svg namespace prefix while still continuing to use the svg namespace.

OTHER TIPS

tweaked the code, removed the svg from circle and http://jsfiddle.net/CLEZc/1/

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top