SVG から PNG へ:アプリやウェブ向けにベクター画像を変換する
SVG を PNG にエクスポートするたびに、適切なピクセルサイズと背景を取得できます
SVG を PNG に変換するSVG ファイルはどんなサイズでも完璧に表示されます。ベクターグラフィックスであるため、ピクセルではなく数学的なパスで構成されており、鮮明さを失うことなく無限に拡大縮小できます。しかし、SVG を受け付けないプラットフォームに画像をアップロードしたり、メールにグラフィックを追加したり、モバイルアプリでアイコンを使用したりする必要がある場合は、ラスター形式が必要になります。PNG は透明度を保持し、ロスレス品質をサポートし、SVG グラフィックスをシャープに見せる鮮明なエッジをレンダリングするため、この変換に最適な選択肢です。
SVG を PNG に変換する際の課題は、ピクセルサイズを選択しなければならないことです。ベクターには固有の解像度がないため、選択した寸法が結果の PNG の大きさと詳細度を決定します。小さすぎると画像がぼやけて見えます。大きすぎると不必要に重いファイルになります。適切なサイズと正しい背景設定を選ぶことが、きれいな SVG から PNG へのエクスポートの鍵です。
pic2PNG はこのプロセスを高速かつ簡単にします。SVG をアップロードし、出力サイズを選択すれば、数秒でピクセルパーフェクトな PNG をダウンロードできます。コンバーターは透明度に対応し、バッチワークフローをサポートし、ブラウザ内で変換を実行するためファイルのプライバシーが守られます。PNG が優れた出力形式である理由について詳しくは、PNG 形式の総合ガイドをご覧ください。
SVG を PNG に変換する方法
pic2PNG で SVG ファイルを PNG に変換するのは、わずか数ステップです。このガイドに従って、どんな SVG グラフィックからもきれいで正しいサイズの PNG を取得してください。
ステップ 1:pic2PNG を開く
任意のモダンブラウザで pic2png.com にアクセスします。コンバーターはデスクトップ、タブレット、モバイルで動作します。インストール不要、アカウント作成も不要です。ページが読み込まれた瞬間からツールをご利用いただけます。
ステップ 2:SVG ファイルをアップロードする
SVG ファイルをコンバーターエリアにドラッグ&ドロップするか、アップロードゾーンをクリックしてデバイスからファイルを選択します。pic2PNG は最大 10 MB の SVG ファイルに対応しています。ファイルは即座に読み込まれ、正しい画像であることを確認できるプレビューが表示されます。
ステップ 3:出力サイズを設定する
SVG を扱う際に最も重要なステップです。ソースは固定ピクセル数のないベクターであるため、コンバーターに結果の PNG のサイズを指定する必要があります。リサイズコントロールを使って幅、高さ、またはその両方を指定します。正確なピクセル値、パーセンテージでリサイズするか、一般的な画面サイズプリセットを選択できます。一方の寸法のみ設定した場合、コンバーターがアスペクト比を維持するようにもう一方を自動計算します。
ステップ 4:背景を選択する
SVG に透明な背景がある場合、PNG でも透明のままにするか、単色で塗りつぶすかを決定します。PNG はアルファ透明度を完全にサポートしているため、デフォルトのエクスポートでは透明な部分がそのまま保持されます。白色やカラーの背景が必要な場合は、変換前に透明度ツールをご利用ください。
ステップ 5:変換してダウンロードする
変換ボタンをクリックします。PNG はブラウザ内で即座に生成されます。ファイルを直接ダウンロードするか、複数の SVG を変換した場合は、すべてを ZIP アーカイブとしてダウンロードできます。
適切な出力サイズの選び方
SVG には固有のピクセル寸法がないため、PNG サイズを自由に選択できます。適切な選択は、画像がどこで使用されるかによって異なります。最初から正しい寸法でエクスポートすれば、後でぼやけた拡大や膨らんだファイルを避けることができます。
| 使用ケース | 推奨サイズ | 備考 |
|---|---|---|
| ファビコン | 32x32, 48x48 | 小さなピクセルヒントアイコンが最適です |
| アプリアイコン(iOS/Android) | 512x512, 1024x1024 | アプリストアには特定のサイズが必要です |
| ウェブアイコン / UI 要素 | 64x64, 128x128 | デザインシステムのグリッドに合わせてください |
| ソーシャルメディアグラフィック | 1200x630 | Open Graph 推奨サイズ |
| ドキュメント用ロゴ | 300x100 ~ 600x200 | ロゴは高さよりも幅が重要です |
| ヒーローイラスト | 1920x1080 | 大画面での鮮明な表示のためのフル HD |
| 印刷(300 DPI) | 2400x3000+ | 印刷解像度にはインチ × 300 で計算します |
pic2PNG にはこれを簡単にする複数のリサイズモードがあります。正確な幅と高さをピクセルで入力する、SVG のデフォルトレンダリングサイズに対するパーセンテージでリサイズする、一般的な画面解像度プリセットを選択するなどの方法があります。また、アップスケールトグルもあり、コンバーターが SVG のデフォルトレンダリングサイズよりも大きく出力をスケーリングすることを許可するかどうかを制御できます。
背景と透明度
ロゴ、アイコン、UI グラフィックに使用されるほとんどの SVG は透明な背景を持っています。PNG に変換すると、PNG はピクセルあたり 256 レベルの透明度を持つ完全なアルファチャンネルをサポートしているため、この透明度はデフォルトで保持されます。これにより、ロゴはどんな背景にもきれいに浮かび、ドロップシャドウは自然にフェードし、半透明のオーバーレイはデザイン通りに正確にレンダリングされます。
ただし、単色の背景が必要な場合もあります。一部のプラットフォーム、メールクライアント、ドキュメントエディターは、透明な PNG を白または暗いキャンバス上に表示し、画像と合わないことがあります。そのような場合は、pic2PNG の透明度ツールを使ってエクスポート前に背景を白やその他の色で塗りつぶすことができます。これにより、最終的な PNG が目的の環境でどのように表示されるかを完全に制御できます。
SVG に透明であるべきなのに現在単色で塗りつぶされている部分がある場合、pic2PNG の色を透明にする機能を使用すると、その色を選択してエクスポート時に透明に変換できます。これは、元々白い背景が組み込まれた状態でデザインされ、色やパターンのある表面に配置する必要がある SVG に特に便利です。
PNG の透明度の仕組みと一般的な落とし穴について詳しくは、PNG 変換トラブルシューティングガイドをご覧ください。
PNG 出力ファイルを小さく保つ
PNG ファイルは、特に高解像度では大きくなることがあります。色の詳細が多い 1920x1080 の PNG は簡単に 2 MB を超えることがあります。ウェブ用の画像を準備している場合、ファイルサイズはページの読み込み速度とユーザー体験に直接影響します。品質を犠牲にすることなく、エクスポートした PNG を軽量に保つ方法がいくつかあります。
PNG 最適化は最初に使うべきツールです。pic2PNG はピクセルデータの内部格納方法を最適化することでファイルサイズを削減するロスレス圧縮を適用します。これにより画像のピクセルは一つも変更されません。色、透明度、シャープネスはすべて同一のままです。ファイルがより効率的に格納されるだけで、通常、最適化されていない PNG と比較して 10~30% のサイズ削減が可能です。
メタデータの削除は、ファイルサイズを増加させるが画像の見た目には影響しない EXIF データ、カラープロファイル、その他の埋め込み情報を除去します。ウェブ用途では、メタデータの削除はほぼ常に正しい選択です。ファイルサイズを削減し、ソース画像に添付されている可能性のあるカメラの詳細や GPS 座標などの情報を除去することでプライバシーも向上します。
最後に、適切な寸法を選択してください。PNG ファイルサイズに最も影響する要因はピクセル数です。2000x2000 の PNG は 1000x1000 の PNG の 4 倍のピクセルを持ち、ファイルサイズもおおよそ 4 倍になります。利用可能な最大サイズではなく、実際に必要なサイズでエクスポートしてください。
PNG 圧縮テクニックの完全なウォークスルーについては、PNG ファイルサイズを削減する方法のガイドをお読みください。
適切なサイズと背景を選んでエクスポート
SVG から PNG への変換は、最も重要な 2 つの決定、すなわち出力サイズと背景設定に集中すれば簡単です。ターゲットプラットフォームに合った寸法を選び、透明度が必要か単色背景が必要かを決め、残りは pic2PNG にお任せください。コンバーターは SVG グラフィックスをプロフェッショナルに見せる鮮明なエッジときれいなラインを保持しながら、どこでも使える汎用的な PNG ファイルを提供します。
単一のロゴのエクスポートでも、アイコンセット全体のバッチ変換でも、pic2PNG はそのプロセスを高速、プライベート、無料で実現します。SVG をアップロードし、サイズを設定して、数秒でピクセルパーフェクトな PNG をダウンロードしてください。