SVG добавляет отступы при изменении размера -SVG / CSS

Question

Если я использую SVG и меняю его размер с помощью CSS, я получаю странный эффект. Если я изменю ширину, изображение займет много места по вертикали. Если я изменю высоту, изображение займет много пустого пространства по горизонтали. Как я могу это исправить?

#item{
  width: calc(30px + 3vw);
  background-color: red;
}

<svg id="item"
   width="100mm"
   height="100mm"
   viewBox="0 0 100 99.999997"
   version="1.1">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     showgrid="false"/>
  <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>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-197)">
    <rect
       style="opacity:1;fill:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.56531394;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="rect4485"
       width="100"
       height="100"
       x="0"
       y="197" />
  </g>
</svg>

Примечание. Я сделал изображение с помощью inkscape и избавился от ненужного XML.

Answer 1

Изменение размера SVG отличается от обычного изображения в JPG или PNG. В svg, если вы удалите размеры (в вашем случае ширина / высота установлена ​​на 100 мм), ваш svg легко адаптируется к ширине контейнера и, как правило, будет масштабируемым.

Попробуйте с этим svg, и вы сможете без проблем изменить его размер, используя только ширину или высоту.

Кстати, я минимизировал код и удалил все ненужные теги, чтобы сосредоточиться только на соответствующем коде. Если вы включите этот svg в html, вы также можете удалить xmlns.

svg{width:110px} /*your custom dimensions here*/

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect style="fill:#ff6600;stroke:red;stroke-width:0.565;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" width="100" height="100"/>
</svg>

Я установил цвет обводки на красный, чтобы вы могли его видеть. Если вам не нужен штрих, просто удалите все элементы с помощью «мазка».