SVGの読み込みサイズが違う原因と直し方
2つのアプリで単位の解釈が違うとSVGが小さく、または大きく入ります。画像を編集する前に基準の正方形で縮尺を診断する方法を解説します。
SVGが違うサイズで入っても、通常パスは壊れていません。出力と読み込みのアプリで、座標単位をピクセル、インチ、ミリメートルへ対応させる解釈が違います。そのため同じファイルがブラウザーでは正常、Figmaでは小さく、CADや切断ソフトでは別の縮尺になることがあります。
まだ個別の部分を描き直したりサイズ変更したりしません。既知サイズの正方形を加え、全体を読み込み、その正方形を測ります。1つの測定で文書の縮尺か画像自体の問題かがわかります。
5分の診断
- 未変更のコピーを残します。
- 10 mm、1インチ、100 pxなどの正方形を横に加えます。
- 読み込んで正方形を測ります。
- すべて同じ倍率で変われば文書全体を1回補正します。
- 正方形は正しいのに画像が違う場合は、グループ、変換、線、クリップを調べます。
SVG内の3つのサイズ
SVGで「サイズ」と呼ぶものは、関連する3種類があります。SVG 2の座標系仕様は、ユーザー座標、ビューポート、viewBoxの関係を定義しています。
- 形状はパスや図形の座標です。長方形が独自の座標で0〜100にある場合などです。
- **
viewBox**は見せる座標領域です。viewBox="0 0 100 100"は各方向100ユーザー単位です。 - ビューポートは表示や読み込みのサイズです。ルートに
width="100mm"、width="400"、または幅なしがあり、使用先が文書単位へ変えます。
物理出力サイズを明示した100単位の正方形です。
<svg xmlns="http://www.w3.org/2000/svg"
width="25mm" height="25mm" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>形状は100×100ユーザー単位、意図したビューポートは25×25 mmです。viewBoxが対応させます。widthとheightを除いたり単位のない数値にしたりすると、読み込み側が独自に決める余地が増えます。
SVG編集のガイドは安全なコード変更を説明します。この問題ではパスを変えずルート<svg>を見ます。
DPIが原因とされる理由
SVGのパスにはPNGやJPGのようなピクセル解像度はありません。CSSピクセルと物理単位の変換やアプリ独自の出力規則でDPIの話が出ます。
CSS Values仕様は1inを96 CSSピクセル、1ptを1/72インチと定義します。ピクセルをポイントと誤認すると96対72、つまり1.333の不一致になります。物理寸法のwidthとheightを無視し、viewBoxだけを使う、独自の単位設定を適用する場合は別の倍率もあります。
「DPIを変える」だけでは不十分です。変更するラスターDPIがない場合もあります。まず倍率を計算します。
scale factor = intended size / imported size100 mmが75 mmなら100 / 75 = 1.3333です。読み込んだスケッチや文書全体をその倍率にし、再度確認します。
正方形で似た問題を分けられます。両方が同じ割合なら全体を補正し、正方形が合うなら単位を変えず範囲や変換を見ます。
基準正方形テスト
測りやすく、画像の横に収まるサイズを使います。
- 元エディターで正確な10 mm、1インチなどの正方形を描きます。
- 異なる色の塗りや線で、完成デザインの外に置きます。
- 一緒に1つのSVGへ書き出します。
- ハンドルで変えずに読み込みます。
- 使用先の寸法ツールで測ります。
- 意図した寸法を読み込み寸法で割ります。
- 全体を1回変え、個別の形は変えません。
- 最終測定が合格してから正方形を消します。
正方形が合えば単位はおそらく正しく、変換グループ、範囲に含まれる線幅、画面外のもの、ページに合わせる読み込みを調べます。鋭いストロークの角が範囲を変えるなら、実寸を変える前にマイターの突起の診断を使います。
CNC、レーザー、3Dでは物理単位の正方形を使います。ピクセルは比率を確認できても、機械に必要なミリメートルを証明しません。
ファイルと読み込みのどちらを直すか
| 状況 | 適した補正 |
|---|---|
| 1アプリが毎回同じ倍率で誤る | プリセットか、そのアプリで1回補正 |
viewBoxはあるが物理寸法のwidthとheightがない | 必要なら明示する |
| 正方形を含む全要素が同じ倍率 | 全文書やスケッチを変える |
| 正方形は合うが1グループが違う | 全体単位でなくtransformを見る |
| 見える範囲がデザインより大きい | 画面外、マスク、不要点を削除 |
| 線幅が予想外に変わる | アプリが図形と一緒に線幅も拡大縮小するか確認し、製作工程がアウトラインを必要とする場合だけ展開 |
原本を管理し同じ種類の工程に繰り返し送るならファイル修正が有用です。CADやカッターに既知の規則があり、ほかでは正常なら読み込みの補正が安全です。
CADや切断ソフトの追加確認
ブラウザーは描くだけですが、CNC、レーザー、3Dは正確な実物が必要です。縮尺後に形状を別に見ます。
- 想定する文書単位か確認する。
- 全体の枠だけでなく実際の特徴を測る。
- 閉じた輪郭が閉じているか見る。
- 範囲を広げる隠れた背景を探す。
- 素材を使う前にツールパス、スケッチ、押し出しを確認する。
CNC用画像からSVGのガイドに整理とCAM受け渡しがあります。押し出しなら、縮尺確認後に3D印刷用SVGの工程を使います。
Shaper Originでは実寸と切断種別のチェックへ進みます。縮尺だけでなく、ルーター加工前に切断の指定も必要です。
寸法を確認したら、最終準備画面の前にマットに対するサイズを確認します。
印刷する絵カードでは、視覚スケジュールカードの配置ガイドで、画像の収まり、PDF寸法、印刷縮尺を見ます。SVGが正しくてもプリンターがページを縮める場合があります。
PerfectVectorの役割
ラスターを編集可能なSVGへ変換します。PNGやJPGしかなくCAMに形状が必要ならSVG・DXFのCNC工程が役立ちます。最終の実寸はわからないため、使用先で設定・検証が必要です。
ベクター化は拡大できる形を戻し、既知の正方形とCAM測定は実寸を確立します。別々に確認すれば、きれいなトレースを誤った大きさで切ることを防げます。
よくある質問
出力より小さく入る理由は？ ユーザー単位、ピクセル、ポイント、物理単位の対応が違う場合があります。既知の正方形を加えて比較し、全体が同じ倍率なら個別パスでなく全文書を補正します。
SVGにDPIはありますか？ 形状は解像度に依存せず、ラスターの固定密度はありません。ソフトがピクセルや設計単位を実寸へ変えるときにDPI的な変換が関係します。隠れた解像度より読み込み規則が原因であることが多いものです。
viewBoxはサイズに何をしますか？
viewBoxは見える座標領域を定義して、そのユーザー単位をビューポートへ対応させます。単独で実寸を宣言せず、ルートのwidth、height、CSS、使用先が大きさを決めます。
ブラウザーでは正しくFusionやLightBurnでは違う理由は？ ブラウザーはCSSのビューポートで描画し、CADやレーザーは物理単位にします。規則が違うかメタデータを無視する場合があります。正方形を測り、倍率で全体を補正します。
DXFにすれば直りますか？ 最初の対処ではありません。同じ曖昧さや新しい問題を持ち込む場合があります。先に正方形で診断し、使用先が好む場合DXFを使い、読み込み後また寸法を見ます。
参考資料
- W3C：SVG 2の座標系 — ユーザー単位、ビューポート、
viewBox、変換です。 - W3C：CSS Values and Units Level 4 — ピクセル、インチ、ポイントの換算です。
- Autodesk Fusion：SVGを挿入 — スケッチの配置と縮尺操作です。
加工前にSVGやDXFをCNC用に準備して確認します。制作用ファイルから正方形を消す前に、正方形、実際の特徴、最終CAMプレビューを測定します。
