HTMLのsvgタグにuseを使うとローカル環境でSVG画像が表示されない

SVG画像を読み込む方法はいくつかある

サンプルSVGファイル

code:icon.svg

</svg>

code:icon-with-id.svg

</svg>

① imgタグ

code:sample.html

② objectタグ

code:sample.html

③ svgタグとimageタグ

code:sample.html

<svg>

</svg>

④ svgタグとuseタグ

code:sample.html

<svg>

</svg>

上記のうち、④ svgタグとuseタグの組み合わせを使う時、ローカル環境のブラウザでSVGファイルが表示されなかった

コンソールを見てもエラーは起きていない

Chrome Developer ToolsのNetworkタブを見ると、(blocked:origin)というエラーが起きている

https://gyazo.com/2621faac20516d0fae9eb78da2d744af

svgタグとuseタグの組み合わせを含むHTMLファイルをローカル環境で開くと、CORSの影響を受ける

CORSの制約を受けずにHTMLファイルを開くには、Safariのデベロッパーツールを使うのが一番楽だった

「クロスオリジンの制限を無効にする」にチェックを入れると、CORS制約を無視できる

このままブラウジングを続けるのは危険なので、動作チェックが終わったら必ずチェックを外す

https://gyazo.com/17eb6c1a9927c843cdf7edde59b1d423