SVGからPNG／JPGへの変換ツール — 無料、アップロード不要

SVGベクターファイルを、必要な解像度でPNGやJPG画像に変換できます。SVGのアップロードが受け付けられないプラットフォーム（オフィス文書、ソーシャルメディア、メールの署名、印刷ワークフローなど）に最適です。レンダリングはブラウザ上でローカルに行われるため、ファイルはデバイス上に残ります。

このツールとは？

SVGはベクター形式であり、数学的な式で記述された形状で構成され、無限に拡大縮小が可能であるため、ロゴやアイコンに最適です。しかし、Word文書、ほとんどのソーシャルプラットフォーム、メールクライアント、そして数え切れないほどのアップロードフォームなど、多くの場面ではSVGが利用できません。これらの環境ではピクセル画像が求められます。変換（ラスタライズ）を行うと、ベクターデータが特定のサイズのPNGやJPGとして出力されます。

ベクター画像には固定の解像度がないため、出力幅は自由に選択できます。また、元データが数式であるため、2048pxでエクスポートしても256pxでエクスポートしても、鮮明さはまったく変わりません。PNG形式で出力するとSVGの透明な背景が維持されますが、JPG形式では背景が白で塗りつぶされます。

なぜこれを使うのか？

1つのソースからあらゆる解像度に対応：256pxのファビコンから2048pxの印刷用アセットまで、すべてピクセルパーフェクトです。
PNG出力では透明度が保持されるため、ロゴはどのような背景にも自然に溶け込みます。
「SVGはサポートされていません」という理由でアップロードが拒否される問題を、数秒で解決します。
一括変換、ローカル処理、アップロード不要。
明示的な幅や高さが指定されていないSVGについては、viewBoxを読み取ることで処理します。

使い方

.svg ファイルをボックスにドラッグするか、クリックして選択してください。
出力幅を選択してください。— 「自動」を選択すると、SVGで指定されたサイズが使用されます。
PNG（透明度を維持）またはJPG（白い背景）を選択してください。
各レンダリング画像をダウンロードしてください。各ファイルのサイズが記載されています。

例

入力

logo.svg — 4 KB vector

出力

logo.png — 1024×1024, transparent background, crisp at every pixel

たった1つの小さなベクターソースから、指定したサイズに応じてピクセル単位で正確なラスター画像を生成します。

一般的な利用例

SVGの埋め込みに対応していないWordやPowerPointの文書に、会社のロゴ（通常、デザイナーからSVG形式で提供されるもの）を追加する。
1つのマスターSVGから、必要なすべてのピクセルサイズ（16、32、180、512px）のアプリアイコンやファビコンを生成する。
メールの署名にアイコンを添付する。ほとんどのメールクライアントはラスター画像しか表示できないため。
セキュリティ上の予防措置としてSVGファイルのアップロードを拒否するソーシャルメディアプラットフォームやCMSに、アートワークをアップロードする場合。

そもそもなぜSVGのアップロード制限が存在するのか

多くのプラットフォームでは、セキュリティ上の理由から、単なる見落としではなく、SVGのアップロードを意図的にブロックしています。SVGはXMLベースであり、技術的にはJavaScriptを埋め込むことができるため、プラットフォームがSVGをサニタイズせずにレンダリングした場合、悪意のあるSVGがスクリプト注入の媒介となる可能性があるからです。 SVGをPNGやJPGにラスタライズすると、ピクセルデータ以外の要素がすべて除去されます。これが、この変換が単なる利便性だけでなく、しばしば必須とされる理由の一つです。つまり、特定のSVGが無害であるかどうかに関わらず、対象プラットフォームはベクター形式を安全に受け入れることができないのです。

解像度独立性が実際にどのように機能するのか

SVGファイルにはピクセルデータは一切保存されていません。代わりに、数学的なパス定義（「この点からあの点へ線を引く」、「この曲線をこの色で塗りつぶす」）と、それらのパスが存在する座標空間を定義するviewBoxが保存されています。これをラスタライズすると、ブラウザのレンダリングエンジンは、ユーザーが指定したピクセル寸法に合わせて、すべての曲線や塗りつぶしを毎回一から再計算します。これは、既存のラスタ画像（JPGやPNG）のサイズ変更とは根本的に異なります。既存の画像を拡大する場合、もともと存在しなかったピクセルを新たに生成することになり、必然的に画質がぼやけてしまいます。4000pxでレンダリングされたSVGも、100pxでレンダリングされたSVGも、どちらも同じ数学的計算に基づいて新たに計算されたものであり、小さなソース画像から引き伸ばされたものではないため、鮮明さは全く変わりません。

よくある質問

どの解像度でエクスポートすればいいですか？

表示する最大サイズに合わせて、さらに少し余裕を持たせてください。512pxあれば、Web上のロゴ用途のほとんどをカバーできます。Retinaディスプレイやプレゼンテーション用には1024px以上、印刷用には2048pxが必要です。写真の拡大とは異なり、SVGから高解像度でエクスポートしても、鮮明さが損なわれることはありません。

なぜ私のSVGが空白になったり、表示が崩れたりしてしまうのでしょうか？

通常、外部参照：外部の画像、フォント、またはCSSにリンクしているSVGは、ブラウザのセキュリティサンドボックス内ではそれらを読み込むことができません。埋め込み（インライン）コンテンツを含むSVGは問題なく変換されます。また、システムにインストールされていないフォントが使用されている場合、テキストの位置がずれることがあります。

PNGかJPGか――どちらを選べばいい？

PNGをほぼ常に選択してください。ロゴやアイコンには透明度とシャープなエッジが必要ですが、PNGはこれらを保持できるのに対し、JPGでは損なわれてしまいます。JPGを選択するのは、対象が厳密にそれを要求している場合、またはSVGが写真のようなイラストである場合に限ってください。

ここでPNGをSVGに戻すことはできますか？

いいえ――それは（ピクセルをトレースして図形を作成する）根本的に異なる作業であり、せいぜい近似値しか得られません。このツールはベクター→ラスターの変換を行うため、正確な結果が得られます。

私のSVGファイルは変換のためにアップロードされましたか？

いいえ。ブラウザはSVGをローカルのキャンバス上に描画し、お使いのデバイス上でPNG/JPGとしてエンコードします。何も送信されることはありません。

SVGをPNGまたはJPGにオンラインで変換