SVGからPNGへのオンライン変換、カスタムサイズと透明背景保持

SVGの図形を、用途に合うピクセル画像へ

SVGは線や図形などをベクターとして記述し、表示サイズに応じて描画できる形式です。PNGへ変換すると、選んだ幅・高さの画素に描き直された画像になり、元のパスを編集できるデータではなくなります。PNGはラスター形式で、透明度を表すアルファチャンネルにも対応しています。これらの形式上の違いはW3CのSVGおよびPNG仕様で確認できます（2026年10月1日確認）。W3C SVG 1.1仕様・W3C PNG 第3版仕様

出力サイズは倍率か幅で決める

倍率指定では、元画像の幅と高さそれぞれに倍率を掛け、整数ピクセルに丸めて出力します。幅指定では、指定した幅を使い、高さを元画像との比率から計算します。たとえば元画像が480×240ピクセルで2倍を選ぶと960×480ピクセル、幅を1200ピクセルにすると高さは600ピクセルです。幅指定は比率を保つため、幅と高さを別々の値にして引き伸ばす設定ではありません。

初期値は2倍で、倍率は0.1〜10の範囲、出力幅は1〜20,000ピクセルの範囲で入力できます。大きなピクセル寸法ほど細部を大きく描けますが、必要な表示サイズに合わせて選ぶと、確認や保存がしやすくなります。

背景とファイル形式の選択

背景は透明が初期設定です。透明部分があるSVGなら、その部分を透過したPNGとして書き出せます。単色を選ぶと、指定した色を背景に敷いてからPNGを作ります。元のSVGに塗りつぶしの背景図形が含まれている場合、その図形は画像内容として描画されます。

このツールは複数のSVGをまとめて読み込み、各ファイルを個別のPNGとして出力できます。処理が完了した画像は一枚ずつ保存でき、複数の結果がある場合はZIPにまとめてダウンロードできます。

ファイルをまとめて書き出す

1. 「クリックまたはSVGファイルをドラッグ」の領域から、1つまたは複数の.svgファイルを追加します。追加したファイル名と元の幅・高さを確認します。

2. 倍率で指定するか、出力幅をピクセルで入力します。納品先の指定が幅だけなら幅指定、元の寸法を基準に拡大・縮小したいなら倍率指定が便利です。

3. 背景を透明のままにするか、単色を選んで色を設定します。設定を決めたら処理を開始し、各ファイルの結果寸法やエラー表示を確認します。

4. 完成した画像は個別にダウンロードします。複数の画像を一度に保存する場合は、ZIPダウンロードを利用します。

例として、元サイズが320×180ピクセルのロゴを幅960ピクセルで出力すると、比率を保った960×540ピクセルになります。出力欄に表示される寸法を確認し、配置先の要件に合っているか確かめてください。

変換結果で確認したいこと

確認してから配布・入稿する

出力はSVGをピクセル画像にしたもので、レイヤー、ベクターパス、アニメーションの編集情報を引き継ぐものではありません。大きな出力寸法や多数のファイルは端末のメモリーを多く使い、処理に失敗することがあります。その場合は寸法を下げるか、ファイルを分けて処理してください。文字の置き換わり、外部素材、複雑な効果による差がないか、ダウンロード前後の画像を目視で確かめることをおすすめします。