title: How to get size ratio of SVG in reliable way?
body: <p>I have svg element already loaded, and I would like to get not width or height, but actually a ratio. So for example 1 would mean square. 2 could mean (width/height) that the width is two times as height. And so on.</p>
  
  <p>I've googled yet didn't find anything reliable (or working). So far I found out of myself that I could access <code>width</code> and <code>height</code> properties, then <code>animVal</code>, and then <code>value</code>. So the ratio would be:</p>
  
  <pre><code>ratio = svg.width.animVal.value / svg.height.animVal.value;
  </code></pre>
  
  <p>The problem is <code>animVal</code> holds also <code>unitType</code>, and what do to if unit type for width is different than for height? Well, could they be different?</p>
  
  <hr>
  
  <p><em>I created SVG with Inkscape, and this is how I load SVG in JS:</em></p>
  
  <pre><code>$.get(svg_url, function(data) {
      // Get the SVG tag, ignore the rest
      svg = $(data).find('svg')
              .attr('id', 'SVG')
              // Remove any invalid XML tags as per http://validator.w3.org
             .removeAttr('xmlns:a')
             [0];
  
      on_load();
  }, 'xml');
  </code></pre>
  
  <p>The code comes from <a href="https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement">How to change color of SVG image using CSS (jQuery SVG image replacement)?</a>. What I have later on is <code>svg</code> element.</p>
  
  <p><strong>This is not the question how to load SVG, or what to do with cross-domain issue. SVG loads fine, it is the same domain as the script (my disk).</strong></p>