<!DOCTYPE html>
<title>Intrinsic sizing for &lt;svg&gt;</title>
<link rel="help" href="https://www.w3.org/TR/SVG2/coords.html">
<style>
#container {
  width: 200px;
  height: 300px;
  position: relative;
  border: 10px solid black;
}
#target {
  fill: green;
  width: 200px;
  height: 200px;
}
</style>
<div id="container">
  <svg id="target" viewBox="0 0 50 50"><circle cx="50%" cy="50%" r="50%"></circle></svg>
</div>