SVGがChromeで表示されない場合がある時の対処法

2020.1.22

一回躓いたことがあるので備忘録。

ちょっと今更感あるけど、

コーディングしていてSVG画像が表示されないよ！って時の話。

Chromeで表示されない場合はxlink：href属性の変更が必要

▼下記サイト参考
https://qiita.com/hibikikudo/items/4d5678b041d55bb3fcca

エディタにSVGをぶち込んで、
xlink：href = “data：img/png;
↓
xlink：href = “data：image/png;

に修正

svgが普及する前のApacheだと起きるっぽいです。
image読み込みにsvgが登録されていないから表示されないという仕組みっぽい

▼下記サイト参考
https://qiita.com/morinosubako/items/6cd633db0e9ee3d72d74#_reference-e1b42f88d1de4dbeb837

/etc/httpd/conf/httpd.confにアクセスできれば、
AddType image/svg+xml .svg .svgz
を追記

この記事を書いたライター

Yoshiki Kobayashi

一応Mediassort代表取締役。
ITのエンジニア・コンサルタント・動画クリエイターやデザイナーを兼業していた。
色々あってMediassort代表やってみてます。
東京から離れるために奮闘中。
Twitter