Background Imageで、SVG色をpath（d="..."）で読み込むときのファイルは不要？

Question

Background Imageで、SVG色をpath（d="..."）で読み込むとき、とくに、フォルダにファイルは設置する必要なくなるのでしょうか。

調べたところ、d="..."がsvgの中身となっているようで、こちらを入れ替えるだけで、ファイルが切り替わるようでした。

Background Imageの指定は以下の2パターンあると思っています。

パターン1

.svg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23000" d="M..." /></svg>');
}

参考：SVG Background Imageの色をCSSで変える方法

パターン2

.svg {
  background-image: url('./svg.svg');
}

今回、アニメーションを取り入れたかったので、パターン1を採用したのですが、この場合、ファイルのリンク切れなど起こる可能性はないのでしょうか。

パターン2は、シンプルに画像を読み込む形なので、イメージがわきやすいのですが、d=".."の指定は、ファイルを読み込んでいるわけではないので、不思議な指定な気がします。

質問としては、実体としてのファイルを置かなくていいのか、リンク切れがするときはいつになるのかなど、アドバイスいただけると助かります。

よろしくお願いします。

Answer 1

実体としてのファイルを置かなくていいのか

CSSコード内にSVGコードを埋め込んでいるので、ファイルを置く必要はない。

リンク切れがするときはいつになるのか

ファイルにリンクしているわけではないのでリンク切れなどしない。

以上。