title: How to scale <image> svgs with their parent svg containers?
body: <p>Previously, I had the following code for my main SVG component, composed of both interactive and non-interactive elements.</p>
  <pre><code>&lt;div&gt;
    &lt;svg preserveAspectRatio=&quot;xMidYMin meet&quot; viewBox=&quot;0 0 1080 1920&quot; image=&quot;100%&quot; height=&quot;100%&quot;&gt;
      &lt;g id=&quot;INTERACTIVE_SVG_ELEMENT_A&quot;&gt;...&lt;/svg&gt;
      &lt;g id=&quot;INTERACTIVE_SVG_ELEMENT_B&quot;&gt;...&lt;/svg&gt;
      &lt;g id=&quot;NON_INTERACTIVE_SVG_ELEMENTS_1&quot;&gt;...&lt;/svg&gt;
      ...
      &lt;g id=&quot;NON_INTERACTIVE_SVG_ELEMENTS_100&quot;&gt;...&lt;/svg&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Following <a href="https://codepen.io/tigt/post/improving-svg-rendering-performance#inline-svg-object-img-or-background-image-15" rel="nofollow noreferrer">this tip</a>, I decided to wrap all non-interactive svg elements into an svg file <code>non-interactive.svg</code>, which contains the following:</p>
  <pre><code>&lt;svg preserveAspectRatio=&quot;xMidYMin meet&quot; viewBox=&quot;0 0 1080 1920&quot;&gt;
    &lt;g id=&quot;NON_INTERACTIVE_SVG_ELEMENTS_1&quot;&gt;...&lt;/svg&gt;
    ...
    &lt;g id=&quot;NON_INTERACTIVE_SVG_ELEMENTS_100&quot;&gt;...&lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>With this, I thought I could optimize my original main SVG component to the following:</p>
  <pre><code>&lt;div&gt;
    &lt;svg preserveAspectRatio=&quot;xMidYMin meet&quot; viewBox=&quot;0 0 1080 1920&quot; image=&quot;100%&quot; height=&quot;100%&quot;&gt;
      &lt;g id=&quot;INTERACTIVE_SVG_ELEMENT_A&quot;&gt;...&lt;/svg&gt;
      &lt;g id=&quot;INTERACTIVE_SVG_ELEMENT_B&quot;&gt;...&lt;/svg&gt;
      &lt;image href=&quot;/non-interactive.svg&quot; width=&quot;100%&quot; height=&quot;100%&quot;/&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>The problem, however, is that the non-interactive SVG components no longer scale the same way as the parent view box. Essentially, I want to achieve the same effect of having the non-interactive and interactive SVG components overlapping each other and scaling the exact same way. Is this possible with the above format?</p>