Как сделать SVG такой же стиль, как изображения

Question

Вот мой список предметов:

  .anim-box {
	margin-top: 5%;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.anim-box .item {
	display: flex;
	flex: 0 0 30%;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	text-align: center;
	cursor: pointer;
}

.anim-box .item svg,
.anim-box .item img {
	height: auto;
	width: 100%;
}

<div class="anim-box">
   <div class="item"><img id="entry4" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"><span>spin</span></div>
   <div class="item"><img id="entry5" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg" class="" style=""><span>zoom</span></div>
   <div class="item">
      <svg>
         <image xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"></image>
      </svg>
      <span>svg</span>
   </div>
</div>

Здесь у нас есть 3 элемента, 1-й и 2-й - изображения с одинаковой высотой / шириной / стилем. И последний элемент - это SVG, стиль которого отличается от других.

Пожалуйста, как мне сделать так, чтобы стиль SVG всегда был идентичен другим? (зная, что источник изображения всегда один и тот же)

Answer 1

Вам нужно добавить окно просмотра, чтобы установить соотношение сторон SVG, и оно будет вести себя так же, как img:

.anim-box {
	margin-top: 5%;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.anim-box .item {
	display: flex;
	flex: 0 0 30%;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	text-align: center;
	cursor: pointer;
}

.anim-box .item svg,
.anim-box .item img {
	height: auto;
	width: 100%;
}

<div class="anim-box">
   <div class="item"><img id="entry4" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"><span>spin</span></div>
   <div class="item"><img id="entry5" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg" class="" style=""><span>zoom</span></div>
   <div class="item">
      <svg viewBox="0 0 2048 1356">
         <image xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"></image>
      </svg>
      <span>svg</span>
   </div>
</div>