UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【SVG】url-loader使ってimportしたsvgアイコンがsafariで表示できなかった

自社サイトをスマホでみてみたらアイコンが全部表示されていない障害をみつけてしまった

原因は最近対応したこれだった

uga-box.hatenablog.com

webpackのurl-loaderをつかって、スプライトSVGをimportするようにして、次のようにSVGアイコンを実装していた

<svg>
  <use href={sprite + "#icon-star"} />
</svg>

これはPCのChormeでは問題なく表示されていたが、iPhoneMac Safariもダメだった)では表示されていなかった

HTMLをみると次のようにレンダリングされており

<use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj....#icon-star />

次のようにコンソールエラーが発生していた

Unsafe attempt to load URL data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj....#icon-star

おそらくSame-origin policyかと思われるが、調査しても手立てがなかったので、webpackのurl-loaderの利用をやめて、/publicにスプライトSVGをおき

<svg>
  <use href={"/public/sprite.svg#icon-star"} />
</svg>

というように修正した

svgファイルのダウンロードが発生する分パフォーマンスに影響あるかもだが、いったんこれで凌ぎたい