Как установить значок SVG, чтобы соответствовать размеру контейнера?

Question

Итак, вопрос - как установить значок svg, чтобы соответствовать размеру контейнера?К сожалению, это не обрезка без какого-либо изменения размера ... Я не могу понять, как сделать мой файл-SVG масштаб!Это вопрос не о встроенных манипуляциях svg!

div {
  width: 50px;
  height: 50px;
}

img {
  width:100%;
  height:100%;
}

<div>
  <img src="https://svgshare.com/i/7Bw.svg" viewBox="0 0 10 10" preserveAspectRatio="none">
</div>

Answer 1

Вам нужно определить viewBox внутри SVG, чтобы иметь возможность масштабировать его позже:

img {
  width:100%;
  height:100%;
}

<div style="width:50px;height:50px;">
  <img src="https://svgshare.com/i/7EX.svg">
</div>

<div style="width:100px;height:100px;">
  <img src="https://svgshare.com/i/7EX.svg">
</div>

Вот код SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98">
    <circle class='ui-icon__svg ui-icon__border' cx='50' cy='50' r='48' />
        <path class='ui-icon__svg' d='M31.5 42.5V36l45-.1.1 22.6H70m0 6.7H25l-.1-22.7H70v22.7zM36 43.1l.1 22-.1-22zm22.9 0l.1 22-.1-22zm-16.3-6.6l.1 6.1-.1-6.1zm22.9 0l.1 6.1-.1-6.1z' />
</svg>