clip-path: url()でSVGファイルを指定できるのは現状Firefoxだけ

時間を解かしたので同じ問題を踏んだ人のためにメモしておく。CSSのclip-pathを使ってsvgで画像を切り抜きたいとき、外部のsvgファイルを読み込みたいことがある。

例えば、一つのページの中で100回読み込まれるアバター画像を表示するコンポーネントの中でそれぞれsvgを埋め込むような形だと、単純に<svg>~</svg>の記述が100個分ソースに含まれることになる。これはブラウザの負荷を考えると避けたい。

かといってコンポーネント外のどこかにインラインでsvgを記述するのも管理がややこしい。できればMDNのサンプルコードに載っている以下のような書き方をしたい。

clip-path: url('/clip.svg#id');

しかしこのやり方がどうも上手くいかずに色々と探っていたらcaniuseに以下のような注釈があった。

2: Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.

2022年4月時点で外部svgの読み込みに対応しているのはFirefoxだけ。ChromeとSafariは未対応。無念。