SVG画像の表示について

[nananananally]

現行の非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 エラーが出てしまうのが問題

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

[Qcoltd]

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

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

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

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

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

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

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

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

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

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

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

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

ご参考まで。

(キュー田辺)