JSFiddle - React, Tailwind, and code Playground

HTML

<h1>SVG images know their aspect ratio</h1>

<p>Rationale: I made this page because I expect SVG graphics to retain their aspect ratio (width to height proportions), as stated in the <tt>&lt;svg viewBox="x0 y0 <i>width</i> <i>height</i>" ...&gt;</tt> attribute of their root element, unless otherwise distorted by width, height or ditto style attributes that override the given proportions. (The viewBox numbers don't necessarily mean pixels, as they are given in svg document coordinates, but the ratio of them works with any unit system.)</p>

<h2>First, the reference (<a href="http://relogo.org/">relogo.org</a> logo) rendition:</h2>

<h3>&lt;svg viewBox=... width="100" height="256"&gt;</h3>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.045 216" width="100">
  <!-- relogo.org logo - and so should you! -->
  <path d="m107.86 0c-59.592 0-107.858 48.56-107.858 108.149 0 59.585 48.266 107.851 107.858 107.851 1.61 0 3.185-.108 4.78-.181l5.935-18.677c-3.424.408-6.886.684-10.424.684-49.457 0-89.973-40.227-89.973-89.677 0-49.755 40.517-90.281 89.973-90.281 46.773 0 84.022 29.484 84.022 74.766 0 39.654-26.899 54.386-45.124 59.263l-6.308 19.856c29.766-6.435 69.303-26.741 69.303-79.119 0-55.12-45.292-92.634-102.184-92.634z"/>
  <path d="m108.43 105.145c10.25-32.067 18.922-59.206 18.922-59.206h-27.423c-13.829 41.647-29.694 81.882-22.64 101.346 4.932 13.591 20.939 27.021 41.497 27.021 2.125 0 4.538-.114 7.146-.321l6.336-19.969c-33.698-.285-34-17.081-23.838-48.871z"/>
</svg><br>

<p>In all page examples, I expect the image to look round and be hugged snugly by a dotted blue line showing the outline of said image, which should be very nearly square, as suggested by the above width and height proportions. Among the browsers I tested (all on my macbook air running os x 10.7.4, except the IE ones that <a href="http://netrenderer.com/">netrenderer</a> graciously made),</p>

<ul><li>Chrome 19.0.1084.53
<li>Safari 5.1.7 (7534.57.2)
<li>Firefox 14.0a2 (2012-05-04)
<li>Opera...

CSS

p { text-align: justify; margin: 1em; }
li { text-align: left; margin: 0 1em; }
h1 { margin: 2em; }
h2 { margin: 1em 0 -1em; }
h3 { margin: 2em 0 1em; }
svg { outline: 1px dashed steelblue; }
body { text-align: center; padding: 0; margin: 0; }

JavaScript

//
// <svg> elements with a viewBox attribute
// are similar to raster images, in that they
// are aware of their own image aspect ratio.
//
// This means that we an svg image should, in
// any HTML context, should infer its height
// its width (and vice versa) when either is
// given in the DOM, as in this example.
//
// This used to work in Chrome, but no longer
// does in (for instance) Chrome 19.
//