SVGのサイズを「縦のみ」または「横のみ」で固定したいとき

preserveAspectRatio="none"の追加でOK

SVGをレスポンシブで表示させる時にどうしても縦横比（アスペクト比）が固定されてしまい困り果てましたが、解決する方法が分かったのでメモ。

ソース例

<svg preserveAspectRatio="none">
</svg>

たったこれだけでOKでした。あとは<div>などでSVGを囲んでCSSで調整するのみで解決できました。

参考ページ

Link

Svgの縦横比を可変にする | Kubo Design Blog

https://aya404.com/blog/develop/337_svg-aspect/
Link

画像の高さを固定して横幅だけ伸縮させる方法 | Designmemo（デザインメモ）-初心者向けwebデザインtips-

https://www.design-memo.com/coding/object-fit-property

PAGETOP