<h1>Scaling an SVG with No Aspect Ratio</h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="sky" x2="50%" y2="50%" spreadMethod="repeat">
    <stop stop-color="lightblue" offset="10%" />
    <stop stop-color="white" offset="40%" />
    <stop stop-color="white" offset="60%" />
    <stop stop-color="lightblue" offset="100%" />
  </linearGradient>
  <radialGradient id="rainbow-grad">
    <stop stop-opacity="0" offset="0%" />
    <stop stop-color="#F00" stop-opacity="0" offset="39%" />
    <stop stop-color="#F00" stop-opacity="1" offset="42%" />
    <stop stop-color="#FF0" offset="65%" />
    <stop stop-color="#0F0" offset="75%" />
    <stop stop-color="#0FF" offset="85%" />
    <stop stop-color="#00F" offset="100%" />
  </radialGradient>
  <symbol id="rainbow">
    <rect height="100%" width="100%" fill="url(#sky)"/>
    <ellipse cx="50%" cy="120%" rx="50%" ry="110%" fill="url(#rainbow-grad)" />
  </symbol>
</svg>
<figure>
  <figcaption>50x25</figcaption>
  <div>
    <svg width="50" height="25">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>100x50</figcaption>
  <div>
    <svg width="100" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x100</figcaption>
  <div>
    <svg width="200" height="100">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x50</figcaption>
  <div>
    <svg width="200" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>50x50</figcaption>
  <div>
    <svg width="50" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>Default Size</figcaption>
  <div>
    <svg>
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>