Масштабирование элементов при изменении размеров браузера

Хочу при изменении размеров окна браузера добиться того, чтобы все элементы страницы сохраняли целостность (позиции) и изменялись только в размере при увеличении/уменьшении размеров окна браузера соответственно. На моей HTML странице расположены несколько <div> с SVG - изображениями, которые в свою очередь обернуты еще одним <div> блоком. Вот так:

<div class="mimic">
  <div class="svgVTrumpet">
    <object data="images/verticalTruba.svg" type="image/svg+xml"></object>
  </div>
  <div class="svgHTrumpet">
    <object data="images/horizontalTruba.svg" type="image/svg+xml"></object>
  </div>
  <div class="svgHTrumpet1">
    <object data="images/horizontalTruba.svg" type="image/svg+xml"></object>
  </div>
  <div class="svgDRTrumpet">
    <object data="images/downRightTruba.svg" type="image/svg+xml"></object>
  </div>
</div>

В файле css я прописал следующие свойства:

.svgVTrumpet {
  position: absolute;
  width: 20vw;
  height: auto;
  top: 30%;
  left: 10%;
}

.svgHTrumpet {
  position: absolute;
  width: 20vw;
  height: auto;
  top: 1%;
  left: 30%;
}

.svgHTrumpet1 {
  position: absolute;
  width: 20vw;
  height: auto;
  top: 1%;
  left: 50%;
}

.svgDRTrumpet {
  position: absolute;
  width: 20vw;
  height: auto;
  top: 1%;
  left: 10%;
}

SVG файлы выглядят примерно так:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       id="svg8"
       version="1.1"
       viewBox="0 0 220 300"
       y="0px"
       x="0px"
       sodipodi:docname="verticalTruba.svg"
       inkscape:version="0.92.4 (unknown)">
      <sodipodi:namedview
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1"
         objecttolerance="10"
         gridtolerance="10"
         guidetolerance="10"
         inkscape:pageopacity="0"
         inkscape:pageshadow="2"
         inkscape:window-width="1920"
         inkscape:window-height="1012"
         id="namedview869"
         showgrid="false"
         inkscape:zoom="1.9351156"
         inkscape:cx="136.78718"
         inkscape:cy="84.624882"
         inkscape:window-x="0"
         inkscape:window-y="0"
         inkscape:window-maximized="1"
         inkscape:current-layer="svg8" />
      <defs
         id="defs2">
        <linearGradient
           id="linearGradient1040"
           inkscape:collect="always">
          <stop
             id="stop1036"
             offset="0"
             style="stop-color:#000000;stop-opacity:1;" />
          <stop
             id="stop1038"
             offset="1"
             style="stop-color:#000000;stop-opacity:0;" />
        </linearGradient>
        <linearGradient
           inkscape:collect="always"
           id="linearGradient1017-5">
          <stop
             style="stop-color:#000000;stop-opacity:1;"
             offset="0"
             id="stop1013" />
          <stop
             style="stop-color:#000000;stop-opacity:0;"
             offset="1"
             id="stop1015" />
        </linearGradient>
        <linearGradient
           inkscape:collect="always"
           id="linearGradient970">
          <stop
             style="stop-color:#000000;stop-opacity:1"
             offset="0"
             id="stop966" />
          <stop
             style="stop-color:#000000;stop-opacity:0;"
             offset="1"
             id="stop968" />
        </linearGradient>
        <linearGradient
           id="linearGradient942-5"
           inkscape:collect="always">
          <stop
             id="stop938"
             offset="0"
             style="stop-color:#000000;stop-opacity:1" />
          <stop
             id="stop940"
             offset="1"
             style="stop-color:#000000;stop-opacity:0;" />
        </linearGradient>
        <linearGradient
           inkscape:collect="always"
           xlink:href="#linearGradient970"
           id="linearGradient934"
           x1="32.886723"
           y1="153.83679"
           x2="94.36544"
           y2="153.6852"
           gradientUnits="userSpaceOnUse" />
        <linearGradient
           inkscape:collect="always"
           xlink:href="#linearGradient942-5"
           id="linearGradient944"
           gradientUnits="userSpaceOnUse"
           x1="188.778"
           y1="153.6852"
           x2="94.36544"
           y2="153.6852" />
        <linearGradient
           inkscape:collect="always"
           xlink:href="#linearGradient970"
           id="linearGradient984"
           gradientUnits="userSpaceOnUse"
           x1="31.652544"
           y1="154.0506"
           x2="103.50064"
           y2="154.78142" />
        <linearGradient
           inkscape:collect="always"
           xlink:href="#linearGradient1017-5"
           id="linearGradient1019"
           x1="111.65834"
           y1="18.489412"
           x2="111.65601"
           y2="32.517258"
           gradientUnits="userSpaceOnUse" />
        <linearGradient
           inkscape:collect="always"
           xlink:href="#linearGradient1040"
           id="linearGradient1034"
           gradientUnits="userSpaceOnUse"
           x1="108.95891"
           y1="279.59088"
           x2="108.96024"
           y2="273.00897" />
      </defs>
      <metadata
         id="metadata5">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <rect
         style="opacity:1;fill:url(#linearGradient1019);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.20188975;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect871"
         width="198.43776"
         height="15.50295"
         x="11.82559"
         y="9.974822" />
      <rect
         style="opacity:1;fill:url(#linearGradient944);fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient934);stroke-width:1.20188975;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect873"
         width="157.61333"
         height="249.5975"
         x="31.522665"
         y="25.597782" />
      <rect
         style="opacity:1;fill:url(#linearGradient1034);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.20188975;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect871-3"
         width="198.43776"
         height="15.50295"
         x="11.230306"
         y="275.14053" />
      <rect
         y="25.597782"
         x="31.522665"
         height="249.5975"
         width="157.61333"
         id="rect972"
         style="opacity:1;fill:url(#linearGradient984);fill-opacity:1.0;fill-rule:nonzero;stroke:#000000;stroke-width:1.20188975;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0" />
    </svg>

При таком подходе масштабирование элементов происходит замечательно только при пропорциональном изменении разрешения окна. Как сделать так, чтобы масштабирование сохранялось при любом разрешении окна?