インラインSVGをレスポンシブ対応にする方法

1. svgタグのwidth,height属性を削る
2. viewBox属性に"0 0 [width] [height]"をセットする。

レスポンシブ対応前のコード

<svg width="640" height="400">
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="642" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="208" width="469" y="101.5" x="93.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
 </g>
</svg>

レスポンシブ対応後のコード

<svg viewBox="0 0 640 400">
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="642" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="208" width="469" y="101.5" x="93.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
 </g>
</svg>

サンプル

※QiitaはSVGタグ使えないのね。残念。。