一昔前、iPadやiPhoneなどといったRetinaディスプレイが世に出た頃、Web制作の世界では通常サイズと2倍サイズの2種類の画像を書き出し、javascriptなどを使って表示を出し分けたりしていかに画像やアイコンを綺麗に見せるかといった技術が出回っていました。

現在ではブラウザやスマートフォーンの進化のおかげで、イラストレータで作ったSVG（オブジェクト）が画像と同じように使えるようになってきて、同じ画像を2倍で書き出したりといった手間が減ってきています。

私も案件によってはsvgを多用したり、svgタグをjavascriptで動かしたりとsvgの恩恵を受けていたのですが、、、

コーダーが嫌ってやまないInternet Explorer。
こやつでsvgタグを使うとheightが横幅に対して自動で設定されず、表示が崩れるといった問題に遭遇しました。

今回はjavascriptで解決できたので方法をご紹介。

IEでなぜheight問題が起きているか

理由なんかどうでもいい！
早く解決策が知りたい方、下へお進みください。

 

引用

他の言語の中に含められるようにするため、 SVG には何らかの固有の（ intrinsic ）大きさを表すプロパティの算出方法が指定される必要がある。 SVG 内容の ビューポート の固有の幅と高さはwidth, height 属性から決定されなければならない。 これらのいずれも指定されていない場合、値 ‘100%’ と見なされなければならない。 注記：width, height 属性は CSS width, height プロパティと同じもの ではない 。 特に、百分率値は 固有の幅や高さを与えるものでも，内容ブロックの百分率を指示するものでもない。 それらはむしろ、ビューポートが一度確立された後，画像データに実際に覆われるビューポートの領域を指示する。

IEのインラインSVGの固有サイズ表示をSVG1.1仕様に修正する方法

のようです。

とりあえずわかっていることは、IEの場合はsvgタグに対して「height」を与える必要があります。

 

javascriptで解決

一つ一つheightを記述するのは大変です。

さらにレスポンシブ時にpcとspでwidth、heightはそれぞれ変わることが多いと思います。

なので、javascriptで解決させましょう。

//IEでSVGが崩れる現象を防止
if ($("svg").length > 0) {
	function svgSizeCheck() {
		$("svg").each(function() {
			var _this    = $(this);
			if (_this.css("display") == "none") return true;
			var _width      = _this.width();
			var _viewBox    = _this['context'].viewBox['baseVal'];
			var _viewWidth  = _viewBox['width'];
			var _viewHeight = _viewBox['height'];
			var _setHeight  = (_viewHeight * _width) / _viewWidth;
			_this.height(_setHeight);
		});
	}
	var timer = false;
	$(window).resize(function() {
		if (timer !== false) clearTimeout(timer);
		timer = setTimeout(function() {
			svgSizeCheck();
		}, 200);
	});
}

以上です。

このjsの注意点としては
・svgタグに対して「viewBox」を必ず設定すること
・viewBoxの「B」は必ず大文字であること
です。

上記のjsではリサイズも考慮してあります。