2023.02.08
私はChromeベースで制作するのだが、
backgroundにSVG画像を使って、
縦も横も100%にしたいという場合がでてきた。
↓こんな感じ
background: #ffffff url(../abcdefg.svg) top left no-repeat;
background-size: 100% 100%;
なのに表示された背景画像は
background-size: contain; のときみたいな表示になってしまった。
探してみたところ、SVGファイルをテキストエディタで開き、
１行加えることで回避できるという。
↓加える1行がこちら
preserveAspectRatio="none"
おそらく、画像の作成時に設定されているアスペクト比を
保持するのがデフォルトということなのかな。
そして、それを「外す」（"none"）ことができるらしい。
ベクトルデータ、まだまだ分かってないことが多々ありそうだ。
【参考にさせていただいたサイト】
https://kugenuma-3c-design.jp/web-tips/2545/
参考にさせていただき、ありがとうございました。