<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background: yellow;
      width: 75px;
      height: 75px;
    }
    svg {
      background: lime;
    }
    svg.intrinsic-size {
      width: 50px;
      height: 50px;
    }
    rect {
      fill: red;
    }
  </style>
</head>
<body>
  <div>
    <svg class='intrinsic-size' width='100' height='100'>
  	  <rect width='50%' height='50%'/>
    </svg>
  </div>
  <div>
    <svg width='100' height='100'>
      <style>
        svg {
          width: 50px;
          height: 50px;
        }
      </style>
  	  <rect width='50%' height='50%'/>
    </svg>
  </div>
  <div>
    <svg class='intrinsic-size' width='100' height='100'>
  	  <svg viewbox='0 0 100 100'>
  	    <rect width='50%' height='50%'/>
  	  </svg>
    </svg>
  </div>
  <div>
    <svg class='intrinsic-size' width='100' height='100'>
  	  <svg class='intrinsic-size' viewbox='0 0 100 100'>
  	    <rect width='50' height='50'/>
  	  </svg>
    </svg>
  </div>
  <div>
    <svg class='intrinsic-size' width='100' height='100'>
  	  <svg class='intrinsic-size' width='50%' height='50%' viewbox='0 0 100 100'>
  	    <rect width='100%' height='100%'/>
  	  </svg>
    </svg>
  </div>
  <div>
    <svg class='intrinsic-size' width='100' height='100'>
  	  <svg width='50%' height='50%' viewbox='0 0 100 100'>
  	    <rect width='100' height='100'/>
  	  </svg>
    </svg>
  </div>
  <div>
    <svg width='100' height='100'>
      <style>
        svg {
          width: 50px;
          height: 50px;
        }
      </style>
  	  <svg width='50%' height='50%' viewbox='0 0 100 100'>
  	    <rect width='100' height='100'/>
  	  </svg>
    </svg>
  </div>
</body>
</html>
