<h1>Scaling Inline SVG using <code>padding</code> on a container <code>&lt;div&gt;</code></h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="coin" x2="50%" y2="40%" spreadMethod="reflect">
    <stop stop-color="gold" offset="30%" />
    <stop stop-color="goldenrod" offset="70%" />
    <stop stop-color="white" offset="82%" />
    <stop stop-color="gold" offset="92%" />
    <stop stop-color="darkgoldenrod" offset="100%" />
  </linearGradient>
  <radialGradient id="pot" fx="30%" fy="35%">
    <stop stop-color="white" offset="0%" />
    <stop stop-color="gold" offset="15%" />
    <stop stop-color="goldenrod" offset="80%" />
    <stop stop-color="darkgoldenrod" offset="100%" />
  </radialGradient>
  <symbol id="potofgold" >
    <g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5">
      <circle r="5" transform="translate(30,7)" />
      <circle r="5" transform="translate(35,13)" />
      <circle r="5" transform="translate(22,10)" />
      <circle r="5" transform="translate(27,9)" />
      <circle r="5" transform="translate(18,17)" />
      <circle r="5" transform="translate(42,18)" />
      <circle r="5" transform="translate(32,19)" />
      <circle r="5" transform="translate(30,14)" />
      <circle r="5" transform="translate(25,15)" />
      <circle r="5" transform="translate(37,19)" />
      <circle r="5" transform="translate(31,16)" />
      <circle r="5" transform="translate(20,18)" />
      <circle r="5" transform="translate(26,21)" />
    </g>
    <path fill="url(#pot)" stroke="#751" stroke-width="0.5"
          d="M30,50 C45,50 55,45 55,35  
             Q 55,27 50,25 C55,22 53,15 45,20
             S 23,25 15,20 S5,22 10,25
             Q 5,27 5,35 C5,45 15,50 30,50Z"
          />
  </symbol>
</svg>
<figure>
  <figcaption>Inline SVG, 100% width and height, aspect ratio preserved with padding on the container</figcaption>
  <div>
    <div class="scaling-svg-container" 
         style="padding-bottom: 92% /* 100% * 55/60 */">
      <svg class="scaling-svg" viewBox="0 0 60 55" >
        <use xlink:href="#potofgold"/>
      </svg>
    </div>
  </div>
</figure>

/* Example-specific styles */
.scaling-svg-container {
  position: relative; 
  height:0; 
  width: 100%; 
  padding: 0;
  padding-bottom: 100%; 
  /* over-ride this inline for aspect ratio other than square */
}
.scaling-svg {
  position: absolute; 
  height: 100%; 
  width: 100%; 
  left: 0; 
  top:0;
}