I have created an XHTML file with inline SVG. It does not display when tested as .XHTML but it does when tested as HTML. I have scoured the internet and believe I have the proper namespaces, etc. specified however, I'm stumped as to why it's not displaying. Please help me understand what I'm doing wrong.
Note: I have also tried with or without xlink and I see no change (however I require xlink as I need safari support).
Thanks in advance for your help!
Example: index.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>inline svg in XHTML file</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
<path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
</symbol>
</defs>
</svg>
<div>
<a href="#"><svg style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg> home</a>
</div>
</body>
</html>