Svg画像の表示について

日本語 ディスカッション 技術的なQ＆A

Topic summary

SVGアイコンの表示実装に関する技術的な問題です。

現状の課題:

  • 既存サイトでは <use xlink:href> を使ってSVGアイコンを表示
  • Shopifyの自作テーマに移行する際、assetsフォルダ配下のSVGファイルを参照すると「Unsafe attempt to load URL」エラーが発生
  • asset_url フィルタで生成されるURLにキャッシュ対策用のクエリパラメータ ?v=xxxxxxxxx が自動付与され、意図した表示にならない

提案された解決策:

  • ストア管理画面の「設定 > ファイル」機能を利用してSVGをアップロード
  • この方法で取得したURLは https から始まり、クエリパラメータが付かない可能性がある

未解決の疑問点:

  • 「ファイル」から取得したURLのクエリパラメータを削除して xlink:href に設定する方法で問題が解決するか
  • エラー自体の根本的な解決方法については動作検証が未実施
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

現行の非shopifyサイト内にて

アイコン画像の表示で以下のような実装がされています。

<svg class="Icon" viewBox="0 0 30 30">
    <use xlink:href="/assets/img/icon_cart.svg#icon_cart"></use>
</svg>

こちらをshopify(自作テーマ)に組み込むにあたって

  1. icon_cart.svgファイルを/assets直下に配置

  2. .liquid内の表示させたい箇所にて以下のようにして組み込み

    <svg class="Icon" viewBox="0 0 30 30">
  <use xlink:href="{{ 'icon_mypage.svg#icon_mypage' | asset_url }}"></use>
</svg>

上記の実装でいけると思っていましたが、実際には以下のように出力がされてしまい、意図した表示になってくれませんでした。

//cdn.shopify.com/s/files/1/0656/2047/6150/t/4/assets/icon_cart.svg%23icon_cart?822

※#がエスケープしてしまうのと、Unsafe attempt to load URL エラーが出てしまうのが問題

こちらの問題の良い対処法はありますでしょうか？

2

icon_mypage.svgとicon_cart.svgのどちらのお話なのか混乱しており、

質問者様の意図と異なる回答になっているかもしれませんが、

その場合は、ご容赦ください。

assetsを利用しますと、URLを出力時にどうしても、

キャッシュ対策の "?v=xxxxxxxxx"というクエリパラメータがついてしまうので、

ストア管理画面 > 設定 > ファイルを利用して、svgをアップロードされてはいかがでしょうか？

「ファイル」から取得したリンクから、"?v=xxxxxxxxx"を削除して、

hrefに設定する、という方法では上手くいかないでしょうか？

「ファイル」から取得したURLは、httpsから始まるので、

Unsafe attempt to load URL も解決するのではないかと思うのですが、

動作検証していないため、

解決しなかったら申し訳ございません。

ご参考まで。

(キュー田辺)