レスポンシブなSVGの作り方
どの画面にも対応
レスポンシブなSVGは、変形せずにコンテナの幅に合わせます。鍵はviewBoxと、固定サイズを避けることです。
1. 固定width/heightでなくviewBoxを使う
内部の系をviewBoxで定義し、画面上のサイズはCSSに任せます：
<svg viewBox="0 0 100 100"> ... </svg>
2. サイズをCSSで制御
svg { width: 100%; height: auto; display: block; }
これでSVGはコンテナ幅になり、高さは比率を保って自動調整されます。
3. preserveAspectRatio
既定（xMidYMid meet）は全体を収め中央寄せ。領域を埋めて切り取るなら slice。意図的に変形する場合以外 none は避けます。
よくある間違い
タグに width="300" height="200" を残すとサイズが固定され対応が崩れます。CSSで制御するならこれらの属性を外します。
インライン と img
インラインでも <img> でもSVGはレスポンシブにできます。インラインならCSSでスタイルも付けられます。
ウェブ対応済み
svgdeskでは、書き出し時にviewBox付き・固定サイズなしで作られるので、そのままレスポンシブにできます。