ul li のテキストに改行があってもドットを１行数分のサイズのSVGにしたい

Question

前提・実現したいこと

ul li タグのドットをSVGのチェックボックス画像にしたいです。

発生している問題・エラーメッセージ

SVG画像が拡大されて２行分になってしまいます。

該当のソースコード

<style>
section ul {
	list-style: none;
}
section ul li {
	padding-left: 20px;
	line-height: 1.6em;
	background: url(../img/check.svg) left 0px top 3px no-repeat;
	background-size: 15px auto;
}
</style>
<section>
	<h2>リストのアイコンに画像を使う</h2>
	<ul>
		<li>リストの<br>テスト1</li>
		<li>リストの<br>テスト2</li>
		<li>リストのテスト3</li>
		<li>リストのテスト4</li>
	</ul>
</section>

Chrome developer tool のElements Styles です。

SVGファイルの中身です。

<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="check-square" class="svg-inline--fa fa-check-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"></path></svg>

試したこと

backgraund-sizeを変更すればサイズが変わると思っていたのですが、
auto,containなど、
どうしても変わりませんでした。

下の画像は上記html単体テストを行ったときの画像です。

これに、何を足すと２行分の画像サイズになってしまうのでしょうか？

補足情報（FW/ツールのバージョンなど）

chrome Latest
vscode Latest

Comments

[jinba]

該当のソースコードで表示した場合スクショのようなことにはならないはずです
check.svgの幅は15pxで統一されなければおかしいです

またテキストが改行した際どの位置にチェックボックスがある（上下中央？上端？）とお望みの姿なのかも推測出来ません

質問コードのみでの検証を再度して、正解イメージを伝えないと回答はつかないと思われます

[yambejp]

svgが正しければちゃんと表示されると思います。
svgを例示できませんか？

[ShortArrow]

ご指摘ありがとうございます。devtoolのスクショとSVGの中身を追記しました。

jinbaさんご指摘の通り、単体だとスクショのようにはなりませんでした。ありがとうございます。li要素以外に対して行ったCSSが効いてくるのでしょうか？

yamnejpさん、ありがとうございます。SVGファイルが正しくないというのはどんな状態なのでしょうか？ちなみに、該当のSVGファイルは、devtool上でCSSの`url(~~~)`という部分にカーソルを当てると正常にプレビュー表示されます。

[yambejp]

試してみましたが、拡大して表示されないです。
環境依存なのでは？他のブラウザでは試しましたか？

[ShortArrow]

yambejpさん、逆に拡大して表示しようとするなら、どんなCSSを書いたらよいでしょうか？解決につながるかもしれませんので、ご教授お願い致します。

[yambejp]

> 逆に拡大して表示しようとするなら

拡大するという再現性がないのでなんとも言えません。
無理やり拡大させないならやり方は考えますが・・・

[ShortArrow]

yambejpさん、ありがとうございます。レンダリングエンジンはBlink、Geckoで見てみましたが、同じく２行分のサイズでした。Tridentはぐちゃぐちゃ（該当箇所以外も）でした。Tridentはサポート対象外なので捨てます。Safariは手元に無くてまだ見てないです。

Answer 1

#処理順でした

下記２行の上下を入れ替えると２行になりました。

    background: url(../img/check.svg) left 0px top 3px no-repeat;
    background-size: 15px auto;

#対策

同じ現象に遭遇したくないので、今後は、

background-imgage : url(../img/check.svg);
background-repeat : no-reapeat;
background-size : 15px 15px;
background-position : 0px 3px;

などのように記述しようと思います。
今後は怖いから個別指定します。

#なぜこうなる？

画像を読み込む前にサイズを指定することが非推奨なのでしょうか？
background:~~;という指定だとbackgroundに関連する全プロパティが上書きされるとか？
指定してないプロパティまでデフォルトに戻されてしまうのは怖いですね。