viewBoxの数値をそのままPNGの幅と高さにしないでください。最大の表示サイズと必要な密度から寸法を決め、元の縦横比を保って実際の掲載先で確認します。
SVG → PNG
SVGの座標とPNGのピクセルを分けて考える
SVGは図形、パス、文字などを座標と描画命令で表します。viewBoxの四つの値は、内部座標領域の左上位置と幅・高さを定義しますが、PNGに書き出すピクセル数を自動的に指定する値ではありません。同じviewBoxを持つSVGでも、24ピクセルのアイコン、資料内の図、幅の広いバナーとして別々の大きさに描画できます。最初に確認すべきなのは数値の見た目ではなく、その画像をどこでどの程度の大きさに表示するかです。
PNGは書き出した時点で固定されたピクセル格子になります。あとから拡大してもSVGのように形状を再計算するのではなく、既存のピクセルを補間するため、失われた細部は戻りません。viewBoxが100×100だからPNGも100×100にする、と機械的に決めると、実際の掲載先では不足したり、逆に必要以上に大きくなったりします。変換前に最大の表示幅と高さ、拡大表示の有無、高密度画面への対応を整理してください。
- viewBoxは内部座標として読む
- 最大の実表示サイズを先に記録する
拡大に強いのはSVG原本であり、書き出したPNGは固定解像度です。
実際の表示先から出力寸法を逆算する
ウェブ上で幅200 CSSピクセルに表示する画像でも、高密度画面で鮮明さを保つために、より大きなピクセル寸法で用意する場合があります。ただし倍率を上げれば常に最適になるわけではありません。寸法が増えるほどデータ量や処理負荷も増えやすいため、掲載先で必要な鮮明さと読み込みコストを比べます。まず現実的な候補を一つ作り、実機または実際のブラウザーで見てから増減する方が確実です。
一つのSVGをツールバー、ヘルプ記事、プレゼン資料で使うなら、それぞれの表示寸法を分けて考えます。小さなアイコン用の簡潔な書き出しと、大きな図解用の書き出しを用意すれば、一枚の巨大なPNGを常に縮小する無駄や、小さいPNGを引き伸ばすぼけを避けられます。用途ごとに承認済みの幅と高さをファイル名へ含めると、後から間違った版を配置しにくくなります。
- ウェブ、アプリ、文書、スライドの寸法を個別に決める
- 用途が大きく異なる場合は複数の出力を作る
便利な丸い数字ではなく、確認できる掲載位置を基準に寸法を決めます。
縦横比と内部余白を同時に確認する
SVGのviewBoxと出力するPNGの長方形で縦横比が異なると、レンダラーはその差を処理しなければなりません。設定によって、比率を保って余白を追加する、端を切り取る、図形を引き伸ばす、といった結果が生じます。意図した変形でない限り、幅と高さを別々に変更せず、元の比率を計算して両方を連動させてください。変換ツールがどの方式を採用するかは、出力を見て確認します。
外側のキャンバスと実際の図形が占める範囲も別です。viewBox内に大きな空白があるSVGでは、PNG全体を大きくしてもロゴやアイコン自体は小さいままです。編集できる原本なら、意図しない余白をSVG側で修正します。原本を変更できない場合は、影や必要な余白を壊さない範囲で出力後の切り抜きを検討します。ピクセル数を増やすだけでは、不要な余白も意図しない切れ方も直りません。
- 出力長方形を元の比率に合わせる
- キャンバスと図形の占有範囲を別々に見る
幅と高さを同じ比率で変えれば、意図しない伸び縮みを避けやすくなります。
細い線、文字、外部リソースを試す
ベクターでは滑らかな細線も、小さなピクセル格子では境界の途中に配置され、ぼけたり太さが不均一に見えたりします。小さな文字や狭い隙間もつぶれることがあります。大きく拡大した画面だけでなく、利用者が見る実寸で確認してください。最小サイズで意味が失われるなら、単に寸法を増やすほか、線を太くする、細部を減らす、小サイズ専用の版を作る方法もあります。
SVGが外部フォント、画像、スタイルシート、マスクや効果に依存している場合、プレビュー環境と変換環境の結果が一致しないことがあります。フォントの代替で改行や字幅が変わったり、リンク画像が読み込まれず欠けたりするためです。信頼できる原本表示とPNGを並べ、ワードマークなら各文字を、図解なら画像、グラデーション、マスク、影を確認します。寸法が正しくても依存ファイルが欠ければ忠実な変換にはなりません。
- 実寸で線と文字の読みやすさを見る
- フォントとリンク画像が描画されたか確認する
正しい幅と高さだけでは、元データの依存関係まで保証できません。
ダウンロードしたPNGを実際の場所で検証する
代表的なSVGを一つ選び、SVGからPNGへの変換ツールで決めた寸法を指定します。ダウンロード後は別の画像ビューアーで幅と高さを確認し、比率、空白、切れ、色、文字、線の均一さを見ます。透明背景が必要なら、白と濃色など複数の背景に重ね、予期しない白塗りや縁のハローがないかも確認してください。変換画面内のプレビューだけでは、保存済みファイルの状態を十分に確認できません。
最後に、その同じPNGを目的のページ、アプリ、文書へ配置します。最小と最大の予定表示サイズで見て、システムが想定以上に拡大していないかを確認します。ぼけがあれば、出力ピクセル不足なのか、変換時のフォントや画像欠落なのか、掲載先による再縮小・再拡大なのかを切り分けてから再出力します。承認した版には寸法を含む名前を付け、将来別サイズをきれいに作れるようSVG原本を保持してください。主要なブラウザーやビューアーでも一度確認すると、変換の問題と表示環境の問題を区別しやすくなります。
- 保存ファイルの実ピクセル寸法を確認する
- 最小と最大の掲載先へ同じファイルを置く
利用者が見る環境で正しく表示されて初めて、そのPNGを承認します。
要点まとめ
- viewBoxはSVG内部の座標範囲であり、PNGの必須ピクセル数ではありません。
- 最大の実表示サイズと必要な画面密度から出力寸法を逆算します。
- 意図的な変形や切り抜きでない限り、元の縦横比を維持します。
- 細い線、文字、外部リソース、余白、透明部分を出力後に確認します。
よくある質問
viewBoxが100×100ならPNGも100×100ピクセルですか？
いいえ。viewBoxは内部座標の範囲です。PNGのピクセル寸法は、表示先と必要な密度に合わせて書き出し時に決めます。
PNGを大きくすれば必ず鮮明になりますか？
必ずではありません。表示に十分なピクセルは役立ちますが、外部フォントの欠落、下流の拡大、細かすぎるデザインなどは別に確認が必要です。
幅と高さを別々に変えるとどうなりますか？
元の縦横比が変わり、設定によって伸び、切り抜き、余白が生じます。意図的でなければ比率を維持してください。
大きなPNGの中で図形が小さく見えるのはなぜですか？
SVGのviewBox内に広い内部余白が含まれている可能性があります。外側の寸法だけでなく、図形が占める範囲も確認します。
書き出し後に何を確認すればよいですか？
寸法、比率、余白、切れ、透明度、文字、線、外部リソースを確認し、最終的な掲載先に実ファイルを配置してください。