SVGをレスポンシブに対応させる際に少し手間取ったので、対応方法をメモしておきます。 うまくいかなかった場合 まずはうまくいかなかったコードです。 HTML <div class="contents"> <svg width="400" height="400" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="200" fill="#ccc" /> </svg> </div> CSS .contents { max-width: 400px; margin: auto; } .contents svg { width: 100%; height: auto; } SVGにwidth: 100%; height: auto;でいけるかと思ったのですが、IEでうまく表示できていませんでした。 SVGのレスポンシブ対応でうまくいかなかった場
![SVGをレスポンシブに対応する](https://cdn-ak-scissors.b.st-hatena.com/image/square/915bac427de416455760d795a266ebf4fb29c9e5/height=288;version=1;width=512/https%3A%2F%2Fcly7796.net%2Fblog%2Fwp-content%2Fuploads%2F2015%2F06%2Fsmartphone-tablet.jpg)