同じSVGでもwidth・heightとviewBoxの設定でサイズや余白が変わります。まず出力サイズと図柄の座標を区別しましょう。
出力ピクセルと図柄の座標
viewBox="0 0 100 50"は内部の100×50の座標範囲です。800×400で出力しても各図形の座標を8倍に書き換える必要はありません。
意図した比率を保つ
100×50と800×400は2:1ですが800×800は異なります。比率が違うとpreserveAspectRatioにより余白や切り抜きが発生します。見せる範囲を変える場合だけviewBoxの始点や範囲を変更してください。
整理で除去される内容
元SVGをページへ直接挿入せず、対応図形・属性だけを残したソースでプレビューとPNGを作ります。外部画像・スタイル・スクリプト・use参照・フィルターに依存した部分は欠ける場合があります。
違いが出たら整理済みソースを確認し、元のエディターで単純な図形やパスとして書き出します。文字形状を固定するには元エディターでパス化が必要な場合があります。
例：2:1のシンボルを800×400へ
viewBox 0 0 100 50のシンボルをWeb用PNGにします。
手順
- SVGを開きviewBoxは維持します。
- 幅800・高さ400を指定して作成します。
- 文字や参照図柄の欠けを確認してPNGを保存します。
結果
800×400のPNGで2:1を保ちます。未対応要素がある場合は元エディターで修正が必要です。
よくある質問
viewBoxを空欄にすると？
元のviewBoxを使います。ない場合は有効な正のピクセルサイズで決め、両方なければ拒否します。