IEやEdgeでSVGのサイズが変わってしまう問題の解決法!


こんにちは! 以前編集長キックを受けていました。編集者Mです!
今回はSVGでつまづいたことがありますので、
その問題の解決法を皆様にシェアしちゃいたいと思います!

SVGってすっごく便利ですよね!
ベクターデータで作られている画像なので、
jpgやgifなどと違ってどんなに大きく引き伸ばしてもキレイに表示してくれるんです!

しかも軽い!

ですが、そんなSVGにも落とし穴がありました。

IEやEdgeだとうまくサイズを調整できないッ!!!

今回はアイコン付きの見出しを作っちゃおうと思い、
backgroundでSVG形式のアイコンを指定し、
background-sizeでアイコンの大きさを指定していました。

HTML

<h1 class="title">SVGを使ったタイトル</h1>

CSS

.title{
	padding-left: 45px;
	background: url(../images/ball.svg) no-repeat;
	background-size: 35px;
	font-weight: bold;
}

では、ブラウザで確認してみましょう!



Chromeだといい感じになっていますね!
ですがIEでは…。



サイズがcssで指定したとおりにならず、ものすごく小さくなってしまいました。
というか小さすぎて見えない…(;´・ω・)

cssの書き方がいけないのかなと、ずっとcssを修正してみたりしていたのですが、
まったく直る気配なしorz

そこでいろいろと調べてみたところ、
どうやらcssではなく、SVG自体に原因があることが分かりました!

では、下記に修正の仕方を紹介しますね!

IEやEdgeでもSVGを好きなサイズに表示させる方法

1.SVGをテキストエディタで開く

「画像をテキストエディタでひらくの?」と思うかもしれませんが、
実はSVGって、pdfみたいにテキストデータでできているんです!
imgタグで配置できたりするのに、意外ですよね~( *´艸`)



2.svgタグにheightとwidthを指定する

svgタグにheightとwidthを指定してあげます。
サイズは後からcssで書き換えられるので、レスポンシブにも対応できます!

Before

<svg id="_2" data-name="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

After

<svg id="_2" data-name="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="50" width="50">


なんとこれだけで解決できちゃいます!
IEとEdge、両方正常に表示できるようになりました!



それでもうまくいかない場合はIllustratorを使ってみましょう

画像素材サイトなどからダウンロードしたSVGを使用していると、
上記で紹介した方法だけではうまくいかないときがあります。

そんなときは、一度Illustratorで開き、
そこから書き出したSVGを使用してみましょう。

1.Illustratorで開き、SVG形式で書き出す

任意のSVGをIllustratorで開きます。
その後、[ファイル>書き出し>書き出し形式]
で、SVGを選択して保存します。



テキストエディタで開いてみると、なんとなく内容が変わっていることが分かります。



2.svgタグにheightとwidthを指定する


後は先ほどと同じようで、svgタグにheightとwidthを指定してあげるだけで正常にサイズを指定できるようになります!

【おまけ】CSSハックできれいにしましょう!

無事IEとEdgeで正常に表示させられるようになったところで1つ気になる点があります。

そう、IEだけアイコンが少し下にずれて見えていることです!
このままではお客様に見せられませんね。



ですが、他のブラウザでは正常に表示されています。


Edge

firefox

safari


なので、cssハックを使ってIEだけに効くcssを追加してあげましょう!


IE11のcssハック

/*IE11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.title{
		line-height: 1.4em;
	}
}

今回はアイコンではなく、文言が上に寄っていたため、
line-heightで調整しました。


これでIEでもきれいになりました!


投稿者名 CB21管理 投稿日時 2017年07月06日 | Permalink