share facebook facebook twitter menu hatena pocket slack

2018.01.16 TUE

ChromeでSVGが表示されない現象

工藤 響己

WRITTEN BY 工藤 響己

特定のSVGファイルがChrome(少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで)で表示されない現象があるようです。

特定のSVGファイルとは、image要素のxlink:href 属性がxlink:href = "data:img/png; と記述されているものです。

IE, Edge, FireFox, Safariのそれぞれ最新版ではこの現象は確認できませんでした。

解決法

テキストエディタでSVGファイルを開き、xlink:href = "data:img/png; (画像赤罫線で囲った箇所) をxlink:href = "data:image/png;と書き換えてやると正しく表示されます。

Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないxlink:href = "data:img/png;の方で書き出されるので注意が必要です。

Chromiumではこのイシューについて議論が交わされているので、いずれChromeのアップデートによって解消するかもしれません。

またSVG image要素で外部画像ファイル参照をする理由はこちらのエントリが大変参考になりました。

参考

元記事はこちら

ChromeでSVGが表示されない現象」 

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。