title: Get width/height of SVG element
body: <p>What is the proper way to get the dimensions of an <code>svg</code> element?</p>
  
  <p><a href="http://jsfiddle.net/langdonx/Xkv3X/" rel="noreferrer">http://jsfiddle.net/langdonx/Xkv3X/</a></p>
  
  <p>Chrome 28:</p>
  
  <pre><code>style x
  client 300x100
  offset 300x100
  </code></pre>
  
  <p>IE 10:</p>
  
  <pre><code>stylex 
  client300x100 
  offsetundefinedxundefined 
  </code></pre>
  
  <p>FireFox 23:</p>
  
  <pre><code>"style" "x"
  "client" "0x0"
  "offset" "undefinedxundefined"
  </code></pre>
  
  <p>There are width and height properties on <code>svg1</code>, but <code>.width.baseVal.value</code> is only set if I set the width and height attributes on the element.</p>
  
  <hr>
  
  <p>The fiddle looks like this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
      &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" /&gt;
      &lt;circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /&gt;
      &lt;circle cx="250" cy="50" r="40" stroke="black" stroke-width="1" fill="blue" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var svg1 = document.getElementById('svg1');
  
  console.log(svg1);
  console.log('style', svg1.style.width + 'x' + svg1.style.height);
  console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);
  console.log('offset', svg1.offsetWidth + 'x' + svg1.offsetHeight);
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#svg1 {
      width: 300px;
      height: 100px;
  }
  </code></pre>