イラレなとで作成したSVG画像を背景に指定して、100％にしたり、coverにしたりで要素いっぱいに拡大して広げたいとき、SVG画像のサイズが大きくならない時があります。そういう時の対処法です。
この作業にはコードを編集できるエディタが必要です。
VScodeなどのテキストエディタを準備してください。無料です。
手順1：SVGファイルをエディタで開く
VScodeなどのテキストエディタでSVGファイルを開いてください。
そうすると中身のコードが表示されます。
VScodeでコードではなく画像のプレビューが表示された場合は、
左のエクスプローラーから画像の入っているフォルダを選択＞SVGファイルを右クリックして
「ファイルを開くアプリケーションの選択」をクリックし、「テキストエディター」を選択してください。
手順2：SVGファイルのコードを編集する
編集といっても簡単です。preserveAspectRatio="none"という属性コードを<svg>タグ内に追加するだけです。
<svg preserveAspectRatio="none" id="test" ...略...>
...略...
</svg>このように記入して保存するだけ。
以上でSVG画像が最大サイズを超えても可変するようになります。
SVGファイルは容量も小さいし、シンプルな画像ならSVGを使用することをおすすめします。
解説：preserveAspectRatio ってなに？
SVGは本来、「縦横比を絶対に守る」 ことがデフォルトになっています。
それを制御するのがpreserveAspectRatioという属性です。
preserveAspectRatio="none"としてあげることで、「縦横比は無視していいよ」という命令になり、画像の自由な可変が可能になるということです。
おまけ：WordPressでSVG画像を使用するには
通常のままではWordPressのメディアライブラリにはSVGはアップロードできません。
プラグインを使用します。
プラグイン検索画面で「SVG」と入力して検索すると、上の方にいくつか出てきますので
「SVG Support」か「Safe SVG」をインストールしてみてください。
これでメディアライブラリにSVG画像をアップして使用することで出来るようになります。