Go to Qiita Advent Calendar 2024 Top
LoginSignup
81
60

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hibikikudo(Kudo Hibiki)inアイレット株式会社

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

Last updated at Posted at 2017-12-26

特定の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;の方で書き出されるので注意が必要です。
xlink：href属性を赤枠のように書き換えよう

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

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

参考

81
60
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
81
60

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?