title: How can I set a viewBox on an SVG element created with JavaScript?
body: <p>When I use a setAttribute('viewBox') on an SVG element that already exists in the DOM, it gets set properly (with an uppercase 'b').</p>
  
  <p>When I create an SVG element in JavaScript and add the 'viewBox' attribute there . . . it ends up in the DOM in all lowercase letters.</p>
  
  <p>Why is this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#circle svg').setAttribute('viewBox', '190 190 20 20');
  
  let svg = document.createElement('svg'),
    circle = document.createElement('circle');
  
  circle.setAttribute('cx', 200);
  circle.setAttribute('cy', 200);
  circle.setAttribute('r', 10);
  svg.setAttribute('viewBox', '190 190 20 20');
  svg.appendChild(circle);
  document.body.appendChild(svg);
  
  // document.querySelector('#circleGenerated svg').setAttribute('viewBox', '190 190 20 20');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    border: 2px dashed #666;
    width: 200px;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Existing svg with dynamically added viewBox attribute:&lt;/p&gt;
  &lt;div id="circle"&gt;
    &lt;svg&gt;
      &lt;circle cx="200" cy="200" r="10" id="center-point" fill="#bbb" /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Generated svg with dynamically added viewBox attribute:&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>