SVG to PNG コンバーター

SVG とは何か、なぜ PNG に変換するのか

SVG (Scalable Vector Graphics) は、図形、パス、テキストを数学的に記述する XML ベースのフォーマットです。ベクターは解像度非依存なので、SVG は 16px のファビコンから 4K ビルボードまで、どのサイズでも鮮明に表示されます。しかし、多くの場面ではラスター画像が必要です。メールクライアント、インライン SVG をサポートしていないアプリ、ソーシャルメディアのサムネイル、PNG や JPEG のみを受け入れる画像処理パイプラインなどです。SVG を PNG に変換することで、ベクターの必要な寸法でピクセルパーフェクトなスナップショットを得られます。

Canvas API によるラスタライゼーションの仕組み

このツールはブラウザのネイティブ Canvas API を使用して、サーバー側の処理なしに SVG をラスタライズします。変換パイプラインは 3 つのステップで動作します。第一に、SVG 文字列が Object URL に変換され HTMLImageElement に読み込まれます。第二に、HTML5 Canvas が目的の寸法 (元のサイズに選択したスケール係数を乗じたもの) で作成されます。第三に、drawImage() を使ってイメージをキャンバスに描画し、canvas.toBlob() で PNG Blob としてエクスポートされます。プロセス全体はメモリ内で実行され、出力 URL はローカル Blob URL です。ネットワークリクエストは発生しません。

高 DPI スクリーン用の SVG スケーリング

最新のディスプレイ (Retina、HiDPI、OLED) は 2× 以上のデバイスピクセル比を使用しており、CSS ピクセルが 2 個以上の物理ピクセルにマップされます。1× で SVG をエクスポートして 2× スクリーンに表示すると、PNG がわずかにソフトに見えます。2× でエクスポートすると、ピクセル密度が 2 倍の PNG になり、どの HiDPI ディスプレイでもクリアにレンダリングされます。印刷品質の出力が必要な場合や、複数用途のために画像をダウンスケールする計画がある場合は、3× または 4× を使用してください。このツールのスケール倍率は、レンダリング前のキャンバスの寸法を直接制御します。

変換結果を最適にするためのヒント

• 常に SVG に viewBox を定義してツールが幅と高さを自動的に導出できるようにする
• 最新スクリーンの Web アセットには 2× スケールを使用。解像度が 2 倍になり、ファイルサイズへの影響は最小限
• Transparent 背景を選択して PNG のアルファチャネルを保持し、色付き背景での使用に対応
• SVG が外部フォントを使用している場合、変換前に <style> ブロック内に base64 データ URI として埋め込む
• 複雑な SVG では非常に大きなスケール値 (4×) を避ける。Canvas レンダリングは CPU バウンドで遅くなる可能性
• すべての <image> href を base64 としてインライン化し、ラスタライゼーション時のクロスオリジンエラーを回避