SVGをPNGに変換
SVGは決まった解像度を持たない描画命令の集まりです。PNGに変換すると、その命令がピクセルの格子に描き出されます。そのため、決めるべきなのは仕上がりの幅を何ピクセルにするかという一点だけです。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
SVGファイルをアップロード
ロゴ、アイコン、イラストなどの .svg ファイルをアップローダーにドロップします。1回につき最大20個、1ファイル95 MBまで対応しています。
- 2
出力する幅を設定
出力画像のサイズ変更は幅1024 pxに設定されています。別のサイズを入力するか、高さを指定または長辺を指定に切り替えてください。図の縦横比は常に維持されます。
- 3
PNGに変換
PNGに変換を押して、画像を1枚ずつ、または全件をZIPでダウンロードします。SVGの透明部分は透明のまま残ります。
SVGを指定サイズのPNGに変換するには?
SVGをアップロードし、必要な幅をピクセルで入力して(初期値は1024 px)、PNGに変換を押します。高さは図の縦横比に合わせて決まり、背景は透明のままです。
SVGを必要なサイズでPNGに変換する
SVGは2001年からW3C標準となっている形式で、「ここに円を描き、この色で塗る」というように座標で図形を記述します。そのため、SVGのロゴは名刺でも看板でも鮮明なままです。PNGにはこのような拡大縮小はできません。幅512 pxになった時点で拡大すればピクセルを作り出すことになり、輪郭がぼやけます。だからサイズは、ベクター情報が残っている変換の時点で決める必要があります。
多くのSVGファイルは、コード内に小さな幅と高さを宣言しており、アイコンでは24 pxや48 pxのこともあります。そのサイズで描画すると、サムネイル程度のPNGになってしまいます。このページでは出力幅を1024 pxに設定し、図をそれに合わせて拡大することでこの落とし穴を避けています。高さは図の縦横比から算出されます。数値は20,000 pxまで変更できます。サイズごとにベクター図形から描き直すため、大きくしても画質は劣化しません。
印刷用にSVGをPNGに変換：インチ・DPI・ピクセル
| インチ | Pixels at | ||
|---|---|---|---|
| 72 DPI | 150 DPI | 300 DPI | |
| 1 | 72 | 150 | 300 |
| 2 | 144 | 300 | 600 |
| 3.5 | 252 | 525 | 1050 |
| 8.5 | 612 | 1275 | 2550 |
| 11 | 792 | 1650 | 3300 |
SVGをラスター化する前に確認したい4つのポイント
フォントをアウトライン化する
お使いの環境にはあっても変換側にないフォントを使った文字は、別のフォントに置き換わります。先に文字をパスに変換してください。
リンク画像を埋め込む
SVGは別の写真ファイルをパスで参照できます。そのファイルがSVGの中に含まれていないと、PNGでは本来の位置が空白になります。
キャンバスを確認する
SVGのキャンバスで作品の周囲に余白があると、PNGでは透明な余白になります。書き出す前にアートボードを作品に合わせてください。
用途ごとに幅を選ぶ
すべて同じサイズにせず、用途別にPNGを書き出しましょう。たとえばプロフィール画像は512 px、スライドは2048 pxです。
SVG
Scalable Vector Graphics(SVG)
SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。
- 圧縮方式
- –
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2001 · W3C
PNG
Portable Network Graphics
PNG は、1996年に PNG Development Group が公開し、のちに W3C と ISO が標準化した可逆のラスター形式です。すべてのピクセルを正確に保持し、完全なアルファ透明に対応し、文字、シャープな輪郭、単色の面をノイズなく扱えます。この正確さから、スクリーンショット、ロゴ、アイコン、UI グラフィックに最適です。代償はサイズで、PNG で保存した写真は、同じ写真の JPEG や WebP の数倍になることがよくあります。すべてのブラウザ、OS、編集ソフトで PNG を開けます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- 1996 · PNG Development Group
SVGからPNGへの変換は、解像度に依存しないベクター画像を固定サイズのビットマップにして、SNSへのアップロード、メール、オフィス文書などSVGが使えない場所で使えるようにするものです。逆方向は、ピクセルから拡大縮小できる形を復元しようとする試みです。
SVGをPNGに変換：よくある質問
SVGはどの解像度でPNGに変換すればよいですか？
PNGを表示する最大サイズを基準に、高密度のスマートフォンやノートPCの画面向けにその2倍で書き出します。Webサイトで幅300 pxで表示するロゴなら600 px前後、アプリアイコンなら通常1024 pxです。印刷用は「インチ数×300」で、3インチなら900 pxになります。
PNGに変換してもSVGの透過背景は保たれますか？
はい。SVGで塗りのない部分は完全な透明になり、半透明の図形は透明度が保たれます。単色の背景が必要な場合は、SVGをJPGに変換で塗りの色を選んで変換してください。
PNGの文字がSVGと違って見えるのはなぜですか？
SVGの文字は、描画する環境にインストールされているフォントで表示されます。SVGが指定するフォントが埋め込まれていない場合は、代替フォントに置き換わります。書き出す前に文字をアウトライン化してください。Illustratorでは「書式」→「アウトラインを作成」、Inkscapeでは「パス」→「オブジェクトをパスへ」です。
DPIを設定するとPNGは鮮明になりますか？
いいえ。詳細設定のDPIタグは、印刷機やレイアウトソフトが物理的なサイズを判断するために読み取る数値をファイルに書き込むだけです。鮮明さはピクセル数で決まり、これは幅で指定します。印刷会社から指定サイズで300 dpiを求められた場合は、両方を変更してください。
そもそもSVGをPNGに変換するのはなぜですか？
画像を受け付けても、SVGには対応していない場所は多くあります。SNSのプロフィールや投稿のアップロード、ほとんどのメールソフト、多くのマーケットプレイス、古いバージョンのMicrosoft Officeなどです。適切なサイズのPNGなら、これらの場所でも表示されます。
変換したPNGを後からSVGに戻せますか？
トレースによる方法のみ可能です。ピクセルから図形を描き直すもので、シンプルなロゴで最も効果的です。元のSVGは保管しておいてください。紛失した場合は、PNGをSVGに変換するガイドでトレースの仕組みと結果の目安を説明しています。