ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

Edgeにて、CSSから読み込んでいるSVG画像が表示されないときの対処法。

当サイトでは日付の横など、ところどころにSVG画像によるアイコンを使用しています。

しかし、ChromeとFirefoxでは問題なく表示されるのですが、Edgeで開くとアイコンが消えていました

特定のブラウザだけ画像が表示されないなんて問題が、今の時代に起きるなんて…。

広告

ブラウザごとの表示の違い

冒頭に書いたとおり、問題が置きているのはEdgeだけです。

上の写真のようにChromeでは何も問題なく、アイコンが表示されています。

Firefoxでも特に問題はありません。

なお、今回のSVG画像は、CSSから読み込んでいます。

HTMLのimgタグから表示させていない理由としては、ただ装飾的に使っているだけであって、コンテンツ自体ではないからです。

HTMLというものは、なるべくCSSが効いていない状態でも、意味が通じるものを心がけないといけません。

また、CSSからであっても、SVG以外の画像にすれば問題ないのですが、なぜかSVGだけ使えないというのが、今回の問題。

SVGは実質テキストで出来ているデータで、いくら拡大しても画像が荒くならず、なおかつ容量が軽いという特徴があります。

よって、単純な図形のアイコンであれば、積極的にSVGを使っていきたかったのですが…。

それに、EdgeはWindows10に標準搭載されている、これからの基準になるべきであろうブラウザなのに、なぜこんなことに…。

アイコンを表示させているCSS。

今回は、日付の横に表示されているアイコンを例にします。

また、本来のCSSのままコードを作成していってる人はもう少ないでしょうから、SASSのコードで記載します。

なぜ.scssの方が主流なの?どう考えても.sassの方が優れてる。 – ワイヤード・パンチ

なお、SASSには拡張子が.sassと.scssの2種類がありますが、.sassの方が便利なので、.sassの方で記載します。

time
	font-size: 1.3rem
	display: flex
	align-items: center
	&:before
		content: url(images/date.svg)
		width: 1em
		height: 1em
		margin-right: 0.5em

日付を表示する部分のHTMLには、timeタグを使っています。

そのtimeタグに対して、アイコン画像をbefore要素として表示させています。

contentの中に表示させたい画像のパスを入れる

ただそれだけの非常に簡単なコードのはずですが、Edgeではダメでした。

time
	font-size: 1.3rem
	display: flex
	align-items: center
	&:before
		content: ""
		background-image: url(images/date.svg)
		background-position: center
		background-size: 1em 1em
		background-repeat: no-repeat
		width: 1em
		height: 1em
		margin-right: 0.5em

contentの代わりに、backgroundとしてSVGを表示させてみましたが、それでもダメ

なお、beforeおよびafterにcontentは必須なので、省くと何も表示されなくなります。

SVGの書き方が悪かった。

実はEdgeだからSVGが使えないというわけではなく、SVGの方のコードの書き方に原因がありました。

他のSVGに差し替えてみると問題なく表示されたので、それで使用していたSVGに原因があると判明しました。

その問題のSVGを開いてみると、下記のような記述がありました。

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
	(中略)
</svg>

タグの中に直接スタイルが書き込まれているという、今となっては古いやり方がされていました。

どうやらEdgeだと、CSSではなくタグ内に直接書かれたスタイルを優先してしまうようです。

また、小さいスペースにあまりにもでかい画像が表示されており、隅の余白の部分だけが映っていたために、画像が何も表示されていないように見えていただけというオチでした。

というわけで今回の解決方法としては、style=” “の部分をまるごと消してしまえばOKです。

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
	(中略)
</svg>

これでEdgeでも、CSSの方のスタイルが適用され、SVGを正常に表示できるようになりました。

素材サイトから手に入れたSVGで、まさかこんなことになるとは思わず…。

とはいえ、ブラウザごとに挙動が違うのも、やはり困りモノですが。