SVG入門 #4 SVGをPNG・JPGに変換する方法 — 画質を落とさずサイズを指定するコツ

SNSに投稿したい、スライドに貼りたい、入稿先がSVGに対応していない……そんな理由で、SVGをPNGやJPGに変換したくなったことはありませんか。

変換そのものは難しくありませんが、サイズを考えずに書き出すと、画像がぼやけたり、透明だったはずの背景が白くなったりします。

SVG入門シリーズの4回目です。

この記事では、SVGをPNG・JPG・PDFに変換する方法を、Figma・Illustrator・Inkscape・ブラウザの手順と、画質を落とさずにサイズを指定するコツとあわせて初心者向けに解説します(SVGそのものについてはSVGファイルとはで解説しています)。

SVGをPNG・JPGに変換する前に知っておきたい基本

手順に入る前に、「変換すると何が起きるのか」と「どの形式を選ぶか」を押さえておきましょう。

ここを理解しておくと、書き出すときのサイズや形式で迷わなくなります。

変換とは、決まったピクセル数の画像に焼き付けること

SVGをPNGやJPGに変換するとは、図形のデータを、決まった数のピクセルでできた画像に焼き付けることです。

SVGはベクター(点や線の位置を数値で記録する形式)なので、表示する大きさに合わせてその場で描き直され、どれだけ拡大してもなめらかに表示されます。

一方、PNGやJPGはラスター(色のついた小さな点=ピクセルを並べて絵を表す形式)なので、変換した時点で「横何px×縦何px」というピクセル数が決まり、あとから増やすことはできません。

下の見本は、同じ円をSVGのまま拡大したものと、小さなPNGに変換してから拡大したものです。

見本A(SVG):160pxに拡大しても、輪郭はなめらかなまま

見本B(小さく変換したPNG):12px四方で書き出した画像を160pxに拡大すると、ピクセルの四角が見えて輪郭がギザギザになる

見本Aは拡大しても輪郭がなめらかですが、見本Bはピクセルの四角が見えて、輪郭がギザギザにぼやけています。

つまり、変換するときに「何pxで書き出すか」を決めることが、仕上がりの画質を左右します。

PNG・JPG・PDFのどれに変換するか

変換先は、使い道に合わせて選びます。

迷ったら、ロゴやアイコンのようなSVGらしい画像はPNGを選ぶのが基本です。

変換先	向いている使い道	透明な背景	特徴
PNG	ロゴ・アイコン・図・イラストをSNSやスライドに貼る	残せる	劣化しない圧縮で、くっきりした線や文字がきれいに残る
JPG	写真と組み合わせた画像、透明が不要な画像	残せない(白などで塗られる)	劣化する代わりにファイルを小さくできる圧縮で、写真向き
PDF	印刷物の入稿、資料として配る	ツールによる	図形のデータのまま保存できることが多く、拡大しても粗くなりにくい

PNGは劣化しない圧縮(可逆圧縮)で透明に対応し、JPGは劣化する圧縮(非可逆圧縮)で透明に対応していません(MDN「画像ファイルの種類と形式ガイド」)。

ロゴのように背景が透明なSVGをJPGに変換すると、透明だった部分が白などの色で塗りつぶされます。

PNGで書き出した場合:円の周りが透明のままなので、置いた場所の背景色(ここでは緑)が見える

JPGで書き出した場合:JPGは透明を持てないため、円の周りが白い四角になる

透明を残してほかの背景の上に重ねたいなら、PNGを選びましょう。

画像形式ごとの違いはWebPって何?その他画像形式との違いでも紹介しています。

書き出すサイズ(px)の決め方

変換するときは、「表示したい大きさの2倍のピクセル数」で書き出すのが、高画質に仕上げるコツです。

スマートフォンや最近のパソコンの画面は、1つ分の表示サイズ(CSSピクセル)を、実際には2つ以上の細かい点(物理ピクセル)で描く高解像度の画面が多いからです(MDN「devicePixelRatio」)。

たとえば幅200pxで表示するロゴを幅200pxのPNGにすると、高解像度の画面では少しぼやけて見えることがあります。

デザインツールの書き出し設定にある「2x」(2倍)は、この高解像度の画面に合わせるための倍率です。

表示したい大きさ	1x(等倍)で書き出す	2x(2倍)で書き出す	3x(3倍)で書き出す
幅100px	100px	200px	300px
幅200px	200px	400px	600px
幅640px	640px	1280px	1920px

ただし、倍率を上げるほどファイルは大きくなるので、必要以上に大きく書き出す必要はありません。

SNSのアイコンや投稿画像のように、使う先で推奨サイズが決まっている場合は、そのサイズに合わせて書き出しましょう。

SVGをPNG・JPGに変換する手順

ここからは、よく使われるツールごとに変換の手順を紹介します。

どのツールでも、「書き出す範囲を選ぶ→サイズ(倍率)と形式を決める→書き出す」という流れは同じです。

Figmaで変換する

Figmaは、ブラウザやアプリで使えるデザインツールで、SVGを読み込んでPNG・JPG・SVG・PDFに書き出せます。

SVGファイルをFigmaに読み込むと、画像ではなく編集できるベクターのレイヤーとして扱われます(Figmaヘルプ「デザインへの画像と動画の追加」)。

SVGファイルを、パソコンからFigmaのキャンバスにドラッグ&ドロップして読み込みます。
書き出したいレイヤー(またはフレーム)を選択します。
右サイドバーの「エクスポート」セクションで「+」をクリックします。
サイズの欄で倍率(1x・2xなど)を選ぶか、512w(幅512px)のように幅や高さを指定し、形式でPNG・JPG・PDFのいずれかを選びます。
「エクスポート」ボタンをクリックすると、ファイルが保存されます。

END

メインメニューの「ファイル → エクスポート」(WindowsはShift+Ctrl+E、MacはShift+Command+E)からも、書き出し設定をまとめて実行できます(Figmaヘルプ「Figmaからのエクスポート」、「エクスポート形式および設定」)。

Illustratorで変換する

Adobe Illustrator(イラレ)では、「スクリーン用に書き出し」を使うと、倍率や形式を指定してまとめて書き出せます。

「ファイル → 開く」で、SVGファイルを開きます。
「ファイル → 書き出し → スクリーン用に書き出し」を選びます。
「アートボード」タブで、書き出すアートボード(作業する画面の範囲)を選びます。
形式でPNGやJPEG、PDFを選び、拡大・縮小の欄で倍率(1倍・2倍など)や幅(px)を指定します。
保存先を確認して、書き出しのボタンをクリックします。

END

1つの形式に複数の倍率を追加すると、1倍と2倍のPNGを一度に書き出すこともできます(Adobe Blog「IllustratorからWeb用素材を一気に書き出す!アセットの収集と一括書き出し」)。

メニューの位置や項目名はバージョンによって変わることがあるので、見つからないときはお使いのバージョンのヘルプで確認してください。

Inkscapeで変換する(Windows・Macで無料)

Inkscape(インクスケープ)は、Windows・macOS・Linuxで使える無料のベクター描画ソフトで、SVGを標準の保存形式にしています。

有料のソフトを持っていない人が、Windowsでサイズを指定してSVGをPNGに変換したいときに便利です。

ここでは、バージョン1.2以降のエクスポート画面で説明します。

「ファイル → 開く」で、SVGファイルを開きます。
「ファイル → エクスポート」(Shift+Ctrl+E)を選ぶと、エクスポートのパネルが開きます。
「単一ファイル」のタブで、書き出す範囲(「ページ」「描画」「選択範囲」など)を選びます。
「画像サイズ」で、幅・高さ(px)かDPI(1インチあたりの点の数)を指定します。
幅と高さはどちらか一方を変えると、もう一方も自動で変わります。
ファイル名と形式(PNG・JPEG・PDFなど)を選び、「エクスポート」をクリックします。

END

バージョン1.2でエクスポートの画面が新しくなり、PNGだけでなくJPEG・WebP・PDFなども同じ画面から書き出せるようになりました(Inkscape 1.2 リリースノート(英語))。

古いバージョンでは画面やメニュー名が異なるので、公式サイトから最新版を入れて使うと迷いにくくなります。

ブラウザでPDFにする

ソフトを入れずにSVGをPDFにしたいときは、ブラウザの印刷機能が使えます。

ここではGoogle Chromeのパソコン版で説明します。

SVGファイルをChromeのウィンドウにドラッグ&ドロップして表示します。
「印刷」(WindowsはCtrl+P、MacはCommand+P)を開きます。
送信先で「PDFに保存」を選び、保存します。

END

手順はChromeのヘルプに沿っています(Chromeヘルプ「Chrome から印刷」)。

印刷の機能なので、図は用紙の大きさに合わせて配置され、余白もつきます。

図だけをぴったり切り出したPDFが欲しい場合は、Figma・Illustrator・Inkscapeの書き出しを使いましょう。

オンラインの変換ツールを使う場合

「SVG PNG 変換」などで検索すると、ブラウザ上でファイルをアップロードするだけで変換できるオンラインツールがたくさん見つかります。

ソフトを入れずに手軽に使える反面、ファイルを運営元のサーバーに送ることになる点に注意が必要です。

社外秘のロゴや、公開前のデザインなどの機密データはアップロードしないようにしましょう。
使う前に、運営元と利用規約(アップロードしたファイルの扱い、商用利用の可否など)を確認しましょう。
出力サイズ(px)を指定できるかを確認しましょう。
指定できないツールでは、小さな画像しか作れないことがあります。

END

仕事のデータや、使い方がはっきりしないツールで迷ったときは、パソコンの中だけで変換できるInkscapeなどのソフトを使うと安心です。

実践のポイント

SVGをPNG・JPGに変換するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

表示したい大きさと同じピクセル数(1x)だけで書き出して、高解像度の画面でぼやけてしまう。
Webやスライドで使う画像は、2xで書き出しておくと安心です。
小さく書き出したPNGを、あとから拡大して使ってしまう。
ラスター画像はピクセルを増やせないので、大きく使いたくなったら元のSVGから書き出し直しましょう。
背景を透明にしたいのにJPGを選んでしまう。
JPGは透明を持てないので、透明を残したいときはPNGを選びます。
書き出す範囲に背景の塗り(白い四角やフレームの背景色など)が入ったままになっている。
PNGを選んでも、背景の塗りがあればその色ごと書き出されます。
変換したPNGだけを残して、元のSVGを消してしまう。
サイズ違いや修正が必要になったときのために、元のSVGは必ず保管しておきましょう。

END

よくある質問

Q. Windowsで、ソフトを入れずにSVGをPNGに変換できる?
A. ブラウザでSVGを表示してスクリーンショットを撮れば、PNGとして保存することはできます。
ただし、ピクセル数は画面の解像度や表示倍率で決まってしまい、狙ったサイズにはなりません。
サイズを指定してきれいに変換したいなら、無料のInkscapeを使うのがおすすめです。
Q. 変換したPNGがぼやけて見えるのはなぜ?
A. 表示している大きさに対して、書き出したピクセル数が足りないことが主な原因です。
表示したい大きさの2倍(2x)で書き出し直してみてください。
Q. SVGをPNGに変換したら、文字の形が変わってしまった
A. SVGの中の文字が、パソコンに入っていないフォントで指定されている可能性があります。
その場合、別のフォントに置き換わって表示された状態で変換されます。
デザインツールで文字をアウトライン化(文字を図形に変換すること)してから書き出すと、どの環境でも同じ形になります。
Q. 変換したPNGを、またSVGに戻せる?
A. 拡張子を変えるだけでは戻せません。
PNGからSVGを作るには「画像トレース」という別の作業が必要で、元のSVGと同じにはなりません。
元のSVGを保管しておくのがいちばん確実です。