質問: ### 解決したいこと 現在、SVGのclip-pathで画像を表示しているのですが、PCとスマホでclippathのpointや表示領域が違うため、 CSSで表示の切り替えを行っています。 ``` ``` ただ、devtoolのネットワークを見ると、どちらの画像も読み込まれており、20枚ほどの画像があるため パフォーマンス的にあまり良くないと感じています。 imgタグのsrcsetのプロパティのように、スマホの場合にPC画像を読まないなどは可能なのでしょうか...? ご教示頂けると幸いです、よろしくお願い致します。
回答: > > imgタグのsrcsetのプロパティのように、スマホの場合にPC画像を読まないなどは可能なのでしょうか...? > > > 残念ながらSVGの`image`要素は環境毎に読み込む画像ソースを変更する仕組みを備えていません. そのため, JavaScriptから`matchMedia`メソッドを用いてスクリーン環境を判定し, `image`要素の`xlink:href`属性を書き換えて下さい. 参考 もしくは, HTMLの`picture`要素で画像を選択的に読み込み, この`picture`要素に対してSVGの`clip-path`を適用する方法もあります.(※動作環境に制限があります) 参考