SVG Namespace prefix xlink for href on textpath is not defined

Question

So I'm trying to make a simple textpath .svg that would be a vertical line with some text. The problem I am getting is that the <defs> tags seem to throw everything off. I think it has something to do with my xlink:href but I can't seem to pin down what exactly.

<svg version="1.1"
     baseProfile="full"
     width="20" height="600"
     xmlns="http://www.w3.org/2000/svg">
     
   <defs>
          <path id="testPath" d="M 10 10 L 10 600 z"
         stroke="black" stroke-width="3" />
   </defs>
   
   <text>
      <textpath xlink:href="#testPath">
         teeeest
      </textpath>
   </text>
   
</svg>

Any help would be appreciated.

Answer 1

SVG is a case sensitive language so textpath actually needs to be written as textPath.

If you embed the SVG in html then you don't need namespaces as html doesn't support them (unlike xhtml). If you have your SVG standalone you'll also need xmlns:xlink="http://www.w3.org/1999/xlink" on the root <svg> element.

Answer 2

Your sample will work fine inlined in a browser, because the browser knows about the xlink namespace.

If your SVG is an external file, then more strict XML parsing is performed and all namespaces used have to be defined.

All you need to do is add a definition for the xlink namespace to your outermost <svg> element.

<svg version="1.1"
    baseProfile="full"
    width="20" height="600"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">