これはSVG Advent Calendar 2014の参加記事です。 昨日(12/5)に引き続き僕が担当します。 明日(12/7)も空きがありますので、ぜひご参加下さい。 レスポンシブなSVGを作る SVGは、Retinaであっても綺麗に表示されるため、僕はテキストや図など、Retinaのために2倍サイズを書き出すのが面倒くさい箇所をSVGで書き出しています。 通常のimg要素であれば、 的な感じで、ウィンドウ幅が狭まっても横100%で画像が表示されるはずです。svgでも同じような感じにしてあげると、モダンブラウザではうまく表示されるはずです。 IEで表示がバグる ところがどっこい、IEだけはうまくいきませんでした。 (ここでのIEはIE9、10、11を指します。) ChromeとIEの比較。Firefox、SafariもChromeと同じ表示でしたが、IEだけは表示がおかしい。 サンプ
![IEにも対応したレスポンシブSVGの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/390b1a6431f75e67f5c88f39bc64eab791c063c7/height=288;version=1;width=512/https%3A%2F%2Ftanshio.net%2Fstatic%2Fogp-748f11865c9c98c02ca35021ccd106b7.png)