SVGをPNGに変換

SVGをPNGに変換する手順

1. SVGファイルを追加する.svgファイルを選択するか、ボックスにドロップしてください。1ファイル5MBまで扱えます。
2. サイズと背景を決める幅を空にするとSVGの元のサイズになります。ピクセルで幅を入力することもでき、1倍から4倍の拡大も選べます。背景は、色を選ばなければ透過です。
3. PNGをダウンロードする各行の「ダウンロード」を押すか、すべてまとめてZIPで保存してください。行には最終的なピクセルサイズが表示されます。

SVGをPNGに変換する理由

SVGは図形と曲線で絵を表すので、どんなサイズにしてもぼやけません。ロゴやアイコンに最適ですが、SNS、アプリストアの申請画像、スライド、メールの署名、ワープロソフト、一部のCMSなどは、ピクセルの画像しか受け付けないことがあります。PNGはそのピクセル版で、透過も使え、劣化もありません。

SVGはベクター画像なので、変換時に出力サイズを決められます。大きめのサイズで一度書き出しておけば、高解像度のディスプレイでもくっきり表示できるPNGになります。

参考資料： MDN: SVG（日本語）

IllustratorやFigmaから書き出したSVGを変換するとき

IllustratorやFigmaでは、PNGとして直接書き出すこともできます。それでもSVGを経由する場面は多くあります。デザイナーから納品されたSVGしか手元にない、Webで使っているロゴのSVGをSNSやスライドに使いたい、アプリ開発のアイコンをPNGで用意したい、といったケースです。

SVGを書き出すときは、文字をアウトライン化しておくと、変換後の見た目が崩れません。Illustratorなら「書式」メニューの「アウトラインを作成」、Figmaなら文字レイヤーを選んで「Flatten」を実行します。viewBoxだけが書かれたSVGも、そこから大きさを読み取って変換できます。

参考資料： MDN: viewBox属性（日本語）

出力サイズの決め方

初期のサイズは、SVGファイルに書かれているサイズです。widthとheightがなくviewBoxだけのときはその値を、どちらもないときは1024 × 1024pxを使います。幅を入力すると縦横比が保たれ、高さは自動で決まります。

拡大は幅に掛け算されます。200pxのアイコンを4倍にすると800pxです。幅は16から8192pxまで指定できます。端末で扱える大きさを超える場合は自動で縮小され、その旨が行に表示されます。

安全な描画と、できないこと

SVGにはスクリプトや外部リソースへのリンクを含められます。描画の前に、スクリプト、イベントハンドラ、外部参照を取り除き、コードを実行できない通常の画像要素として描画します。そのため、リンク先の画像、フォント、スタイルシートは含まれず、見つかった場合は行にその旨が表示されます。SVGの中にデータとして埋め込まれた画像は、問題なく使えます。

文字は、いちばん見た目が変わりやすい部分です。お使いのパソコンにないフォントが指定されていると、ブラウザが別のフォントに置き換えるため、文字の形が変わります。忠実に書き出したいときは、ベクター編集ソフトで文字をアウトライン化してから書き出してください。

• 背景色を選ばない限り、透過はそのまま保たれます。
• グラデーション、マスク、フィルターはブラウザが描画するので、Webページ上と同じ見た目になります。
• すべての処理は端末の中で完結し、アップロードはありません。

よくある質問