缩放SVG图像，最大限度地节省质量

Question

我有一个SVG格式的窗口部件的图像，当我试图在HTML块中将其设置为背景图像或绝对位置时，图像的质量会变得更差。例如，我看不到窗口打开触发器。我如何修复它，以及我需要在SVG中更改哪些属性才能在不损失任何质量的情况下看到窗口的边界和门的触发器？我上传了HTML代码来展示示例：

​

.box-item{
  position:relative;
  width: 120px;
  height: 290px;
}
.box-item svg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

<div class="box-item">
<svg id="üheosaline_aken" preserveAspectRatio="none" data-name="üheosaline aken" xmlns="http://www.w3.org/2000/svg" width="465" height="675">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>            
<?xpacket end="w"?></metadata>
<defs>
    <style>
      .cls-1 {
        fill: #f2f2f2;
        stroke: #f2f2f2;
        stroke-width: 1.5px;
      }

      .cls-2 {
        fill: #939393;
        stroke-width: 1px;
      }

      .cls-2, .cls-3 {
        stroke: #939393;
      }

      .cls-3 {
        fill: #fff;
        stroke-width: 0.5px;
      }

      .cls-4 {
        fill: #d8a50e;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <rect class="cls-1" x="-14" y="-11" width="493" height="697"/>
  <rect id="Rectangle_594_copy_4" data-name="Rectangle 594 copy 4" class="cls-2" x="6" y="7" width="455" height="657"/>
  <g id="parem">
    <rect id="Rectangle_594_copy_6" data-name="Rectangle 594 copy 6" class="cls-2" x="170.906" y="24.969" width="265.938" height="625"/>
    <rect id="Rectangle_594_copy_7" data-name="Rectangle 594 copy 7" class="cls-3" width="465" height="675"/>
    <rect id="Rectangle_594_copy_7-2" data-name="Rectangle 594 copy 7" class="cls-2" x="39" y="41" width="386" height="594"/>
    <path class="cls-4" d="M420.03,40.994l3.988,1.925L43.009,338l-3.987-1.924Z"/>
    <path class="cls-4" d="M424.018,632.06l-3.988,1.925L39.022,338.938l3.987-1.925Z"/>
    <rect id="rosett" class="cls-3" x="8.375" y="299.969" width="25.031" height="49.969" rx="3" ry="3"/>
    <path id="käepide" class="cls-3" d="M14,312H27a0,0,0,0,1,0,0v74a2,2,0,0,1-2,2H16a2,2,0,0,1-2-2V312A0,0,0,0,1,14,312Z"/>
  </g>
</svg>
</div>

​

更新了我的答案，添加了现有的情况和我在寻找什么：

这就是我现在所拥有的：

​

这就是我想要实现的：

​

触发器和黄线的位置在这里并不重要，重要的是触发器的质量和窗口的边框。

Answer 1

自己看一下：

​

svg { width: 100%; height: 100%;}
.r-1 {  fill: #f2f2f2; stroke: #939393; stroke-width: 100;  }
.r-2 {  fill: #939393;   }
.l-n {  stroke: #d8a50e; stroke-width: 100; stroke-linecap: round }
div {  
  width: 240px; 
  height: 580px;
  margin: 1em;
  padding: 0;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4800 11600">
    <rect class="r-1" x="50" y="50" width="4700" height="11500" />
    <rect class="r-2" x="400" y="400" width="4000" height="10800" />
    <line class="l-n" x1="450" y1="450"  x2="4350" y2="5750" />
    <line class="l-n" x1="4350" y1="5750"  x2="450" y2="11150" />
    <line class="l-n" x1="450" y1="11150"  x2="2350" y2="450" />
    <line class="l-n" x1="2350" y1="450" x2="4350" y2="11150"   />
  </svg>
</div>

​

Answer 2

您在多个地方调整SVG的大小。我认为你真的想在你的SVG元素中做一个viewBox而不是一个宽/高，也就是：

    <svg id="üheosaline_aken" preserveAspectRatio="none" data-name="üheosaline aken" xmlns="http://www.w3.org/2000/svg" viewBox="-30 -30 520 800">