2020.1.22

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

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

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

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

     

    Chromeで表示されない場合

    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
    Yoshiki Kobayashi

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

    関連記事