title: SVG in XHTML5: setting attributes with proper namespace
body: <p><strong>TL;DR Summary</strong>: Is it proper to use <code>setAttribute</code> instead of <code>setAttributeNS</code> for SVG elements?</p>
  
  <p><strong>Details</strong>:<br>
  Consider this SVG image embedded in XHTML5 that uses JavaScript to dynamically create and add elements to the drawing: <a href="http://phrogz.net/svg/svg_in_xhtml5.xhtml" rel="nofollow">http://phrogz.net/svg/svg_in_xhtml5.xhtml</a></p>
  
  <p>The SVG elements created by JavaScript and appended to the <code>&lt;svg&gt;</code> element must be created using...</p>
  
  <pre><code>var el = document.createElementNS("http://www.w3.org/2000/svg",'foo');
  </code></pre>
  
  <p>...instead of...</p>
  
  <pre><code>var el = document.createElement('foo');
  </code></pre>
  
  <p>...in order for them to be treated as SVG elements and rendered in the browser. This is reasonable and understandable. However, according to <a href="https://jwatt.org/svg/authoring/#namespace-aware-methods" rel="nofollow">this page</a> I should also be setting the attributes of these elements using...</p>
  
  <pre><code>el.setAttributeNS( null, 'foo', 'bar' );
  </code></pre>
  
  <p>...instead of the code I'm using currently:</p>
  
  <pre><code>el.setAttribute( 'foo', 'bar' );
  </code></pre>
  
  <p>What I am doing works in Chrome, Safari, and Firefox. Is what I have <strong>legal code</strong>—is it equivalent to the recommendation—or does it just <em>happen</em> to work due to the permissive nature of browsers and I must instead use <code>setAttributeNS</code> to be valid?</p>