SVG to PNG変換 - SVGをPNG/JPEGに変換 オンライン
SVGファイルやコードをカスタマイズ可能なサイズ、スケール、背景で高品質なPNG/JPEG画像に変換。100%クライアントサイド処理、アップロード不要。
よくある質問
SVG to PNG変換ツールとは何ですか？なぜ必要ですか？
SVG to PNG変換ツールは、XMLベースのベクター画像であるSVG（Scalable Vector Graphics）ファイルを、ピクセルで構成されたPNG（Portable Network Graphics）ラスター画像に変換します。SVGはその拡張性と小さなファイルサイズのためにWeb利用に最適ですが、多くのプラットフォームやアプリケーションではラスター画像が必要です：SVGをレンダリングしないメールクライアント、PNG/JPEGアップロードのみ受け付けるSNSプラットフォーム、プレゼンテーションソフト、PDFジェネレーター、ゲームエンジンなどがあります。
このSVG to PNG変換ツールの使い方は？
SVGを入力する方法は2つあります：(1) SVGファイルをアップロードエリアにドラッグ＆ドロップするか、クリックしてファイルを参照します。(2) テキストエリアにSVGコードを直接貼り付けます。SVGが読み込まれると、ツールが自動的にサイズを検出してプレビューを表示します。設定パネルでスケール係数（1x、2x、3x、4x）、背景色、出力形式（PNG/JPEG）を選択し、ダウンロードをクリックして画像を保存します。
SVGデータは安全ですか？ファイルはサーバーにアップロードされますか？
SVGデータは100%安全で、ブラウザから外に出ることはありません。すべての変換はブラウザに内蔵されたHTML5 Canvas APIを使用してクライアントサイドで実行されます。SVGデータはサーバーに送信されず、ファイルはどこにも保存されず、トラッキングも行われません。
PNG出力とJPEG出力の違いは？
PNGは完全な透明度（アルファチャンネル）、ロスレス圧縮をサポートし、アイコン、ロゴ、UI要素に最適です。JPEGはより小さなファイルサイズを実現するために非可逆圧縮を使用しますが、透明度をサポートしません。透明度やピクセルパーフェクトな品質が必要な場合はPNGを、より小さなファイルサイズが必要で透明度が不要な場合はJPEGを使用してください。
スケール係数（1x、2x、3x、4x）は何を意味しますか？
スケール係数はSVGの固有サイズ（width/height属性またはviewBoxで定義）を乗算して出力ピクセルサイズを生成します。例えば、SVGのviewBoxが'0 0 24 24'の場合：1xは24x24 PNG、2xは48x48 PNG、3xは72x72 PNG、4xは96x96 PNGを生成します。これはモバイルおよびWeb開発の標準的な手法です。
透明な背景でSVGを変換できますか？
はい。PNG形式は透明度（アルファチャンネル）を完全にサポートしています。背景色として透明（デフォルト）を選択すると、SVGのすべての透明領域がPNG出力に保持されます。プレビューではチェッカーボードパターンで透明領域を視覚化します。JPEG形式は透明度をサポートしません。
変換したPNGがぼやけたりピクセル化されるのはなぜですか？
出力がぼやけて見える場合、出力サイズがSVGの詳細レベルに対して小さすぎる可能性があります。スケール係数を2xまたは3xに上げるか、より大きなカスタムサイズを手動で入力してみてください。SVGは解像度に依存しないベクターグラフィックスなので、品質を落とさずにどのサイズにもエクスポートできます。
最大サイズとファイルサイズの制限は？
SVG入力ファイルの最大サイズは10MBです。最大出力サイズは8192x8192ピクセルで、これはほとんどのブラウザのCanvas実装による実質的な制限です。
コード例
// SVG to PNG conversion using Canvas API (Browser)
function svgToPng(svgString, options = {}) {
const {
width = null,
height = null,
scale = 1,
backgroundColor = null,
format = 'png',
quality = 0.92,
} = options;
return new Promise((resolve, reject) => {
const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');
const svg = doc.documentElement;
let svgWidth = parseFloat(svg.getAttribute('width')) || 0;
let svgHeight = parseFloat(svg.getAttribute('height')) || 0;
if (!svgWidth || !svgHeight) {
const viewBox = svg.getAttribute('viewBox');
if (viewBox) {
const [, , vbW, vbH] = viewBox.split(/[\s,]+/).map(Number);
svgWidth = vbW;
svgHeight = vbH;
}
}
const outWidth = width || svgWidth * scale;
const outHeight = height || svgHeight * scale;
const canvas = document.createElement('canvas');
canvas.width = outWidth;
canvas.height = outHeight;
const ctx = canvas.getContext('2d');
if (backgroundColor) {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, outWidth, outHeight);
}
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0, outWidth, outHeight);
URL.revokeObjectURL(url);
canvas.toBlob(
(resultBlob) => {
resolve({
blob: resultBlob,
dataUrl: canvas.toDataURL(
format === 'jpeg' ? 'image/jpeg' : 'image/png', quality
),
width: outWidth,
height: outHeight,
size: resultBlob.size,
});
},
format === 'jpeg' ? 'image/jpeg' : 'image/png',
quality
);
};
img.onerror = () => reject(new Error('Failed to load SVG'));
img.src = url;
});
}
// Usage
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3b82f6"/></svg>';
svgToPng(svg, { scale: 2 }).then(r => console.log(`${r.width}x${r.height}, ${r.size} bytes`));