CODEWITHSUNDEEP
svgxhtmlsymbolsxlink
Rafe
Rafe

Reputation: 21

inline svg not displaying in xhtml

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>&nbsp;home</a>
  </div>

</body>
</html>

Upvotes: 2

Views: 1648

Answers (2)

jhancock532
jhancock532

Reputation: 402

Double check that you're using the .xhtml file extension then make sure that your svg has the following: 

<svg xmlns="http://www.w3.org/2000/svg">
</svg>

Source

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46619

Use the xmlns attributes in the bottommost <svg> as well, then it'll work.

<?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" height="0">
  <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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>

By the way, as <svg> in XHTML has only been defined since XHTML5, using an XHTML 1.0 doctype will not validate (even if it will run perfectly with the proper namespaces). The solution is to change the doctype to XHTML5.

Upvotes: 2

Related Questions