title: Using XPath to get an element in SVG
body: <p>I am trying to get an element in an SVG file using XPath. I have tried the following code, but <code>singleNodeValue</code> is null. The <code>doc</code> seems to be correct, so I guess either <code>evaluate()</code> arguments or the XPath is wrong, but I cannot find anything wrong. Why doesn't it work?</p>
  <p>JavaScript</p>
  <pre><code>fetch('test.svg')
  .then(response =&gt; response.text())
  .then(data=&gt;{
      const parser = new DOMParser();
      const doc = parser.parseFromString(data, &quot;text/xml&quot;);
      console.log(doc);
      const res = doc.evaluate(&quot;//symbol[@label='square']&quot;, doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
      console.log(res.singleNodeValue);
  })
  </code></pre>
  <p>SVG</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
  
  &lt;svg viewBox=&quot;0 0 100 100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
  
      &lt;symbol label =&quot;square&quot;&gt;
          &lt;rect y=&quot;5&quot; x=&quot;5&quot; width=&quot;90&quot; height=&quot;90&quot; stroke-width=&quot;5&quot; stroke=&quot;#f00&quot; fill=&quot;#f00&quot; fill-opacity=&quot;0.5&quot; /&gt;
      &lt;/symbol&gt;
  
  &lt;/svg&gt;
  </code></pre>
  <hr />
  <p>After some testing, I have discovered that it works if I remove <code>xmlns=&quot;http://www.w3.org/2000/svg&quot;</code>. I searched the web and found an answer: <a href="https://stackoverflow.com/questions/23492186/why-xpath-does-not-work-with-xmlns-attribute">Why XPath does not work with xmlns attribute</a></p>