JSFiddle - React, Tailwind, and code Playground

HTML

<p>Test page for <a href="http://stackoverflow.com/q/23684821/405017">this Stack Overflow question</a>.</p>

<div><svg xmlns="http://www.w3.org/2000/svg" style='width:150px;height:100px' viewBox='0 0 100 100'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg" style='width:150px;height:100px'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg" width='150px' height='100px' viewBox='0 0 100 100'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg" width='150px' height='100px'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg" width='20%' height='15%' viewBox='0 0 100 100'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg" width='20%' height='15%'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'><circle cx="30" cy="30" r="40"</svg><span></span></div>
<div><svg xmlns="http://www.w3.org/2000/svg"><circle r="4"</svg><span></span></div>

CSS

body { background:#ccc; font-family:monospace; }
svg  { background:#fff; display:block; margin:1em }
div { display:inline-block; vertical-align:bottom }

JavaScript

window.onresize = function(){
    [].forEach.call(document.querySelectorAll('div'),function(div){
        var svg  = div.querySelector('svg'),
            span = div.querySelector('span');
        var rect = svg.getBoundingClientRect();
        var wh1  = {width:rect.width, height:rect.height};
        var wh2  = {width:svg.offsetWidth, height:svg.offsetHeight};
        span.innerHTML = JSON.stringify(wh1) + '<br>' + JSON.stringify(wh2);
    });
};
window.onresize();