2

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>
Rafe
  • 21
  • 2
  • I suggest pasting this code in the official [W3C Linter](https://validator.w3.org/#validate_by_input+with_options) as it looks like SVGs are not supported. – Richie Bendall Feb 28 '19 at 02:46

2 Answers2

2

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.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • You contradict yourself. Your sample code uses an XHTML 1.0 DOCTYPE while you say that using SVG with an XHTML 1.0 DOCTYPE. – Melab Apr 07 '19 at 02:16
  • @Melab Sorry? The file is an XHTML file, not an SVG file. I kept most of the the OP's code, in order to demonstrate what I did to make it work. In short, this _works_, it just doesn't _validate_ with the OP's doctype. My closing comment was on how to change that to make it validate as well. – Mr Lister Apr 07 '19 at 06:25
  • Is there any valid way to do it using normal XHTML 1.0? – Melab Apr 07 '19 at 19:30
  • @Melab No, SVG in its current form did not exist when XHTML 1.0 was being defined. – Mr Lister Apr 07 '19 at 19:32
  • You can use an external SVG file as an image, of course, using . – Mr Lister Apr 07 '19 at 20:11
0

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

jhancock532
  • 93
  • 8