直接の回答
クライアントサイドのSVGからPNGへの変換は、ブラウザメモリ上でベクターマークアップを安全にサニタイズし、viewBoxから固有の寸法を抽出して、透明なRGBAキャンバスバッファへ直接ラスタライズすることで、外部サーバーへデータを送信することなく高画質なPNGを可逆圧縮で生成します。
このツールの使い方
SVGベクターファイルのアップロード
ワークベンチのドロップゾーンに単一または複数のSVGファイルを選択またはドラッグ＆ドロップします。
透明度と固有サイズの確認
変換ツールはベクターファイルの固有寸法で安全にサニタイズされた透過PNGをデフォルトで生成します。
任意の追加画像編集
ページを移動したり再アップロードすることなく、同一セッション内でトリミング、リサイズ、回転、圧縮を実行できます。
エクスポートとダウンロード
変換後のPNGファイルを個別にダウンロードするか、一括してZIPアーカイブとしてダウンロードします。
ブラウザローカルでのベクターサニタイズと固有解像度ラスタライズ
Scalable Vector Graphics (SVG) は数学的ベクター、XML構造、座標パスによって形状を定義します。PNGへの変換には、悪意のあるスクリプトや外部リソース参照を無害化するXML解析・サニタイズ処理と、ネイティブのviewBox寸法に基づいたHTML5 Canvasバッファへの描画が必要です。ラスタライズされた画像は透過背景を保持したまま32ビットRGBAのPNG形式としてエンコードされます。
- ゼロサーバー通信：XML解析、セキュリティサニタイズ、キャンバスラスタライズのすべてがブラウザメモリ内で完結します。
- セキュリティサニタイズ：レンダリング前に悪意のあるスクリプト、イベントハンドラ、foreignObjectを確実に除去します。
- ネイティブ寸法の忠実性：viewBoxの縦横比と解像度を歪みなく正確に保持します。
- 確定的一括処理：最大20個のSVGファイルを衝突防止ファイル名で同時変換し、ZIP形式でまとめて保存可能です。
具体例
ベクターブランドロゴをWeb用透過PNGに変換
入力: ファイル: brand-logo.svg (ベクターXML, viewBox 0 0 800 600, 透過背景, 42 KB)
出力: 変換後: brand-logo-800x600.png (800×600 px, 32-bit RGBA 透過PNG, 96 KB)
ベクターロゴをサニタイズした上で鮮明な透過PNGにラスタライズし、Webヘッダーやプレゼン資料に最適な形式へ変換します。
制限事項
- SVGからPNGへのラスタライズは無限解像度のベクターを固定ピクセルに変換するため、固有サイズを超えて拡大するとピクセル化が生じます。
- SMILやCSSキーフレームアニメーションを含む動的SVGは静止画PNGに変換できず、フレーム脱落を防ぐため厳格に拒否されます。
よくある質問
SVGからPNGへの変換時に透明度は維持されますか？
はい。デフォルトでベクターグラフィックの透明な背景が完全に保持され、アルファチャンネルを備えた32ビットRGBAのPNGが出力されます。
アニメーション付きのSVGファイルをPNGに変換できますか？
いいえ。SMILやCSSアニメーションを含むSVGファイルは、静的PNG変換によって動きが失われ不完全なグラフィックとなるため明示的に変換を拒否します。
SVGファイルやベクターコードが外部サーバーへ送信されることはありますか？
いいえ。SVGの構文解析、サニタイズ、キャンバス描画、PNGエンコードの全工程が100%お使いの端末のブラウザ内で実行されます。データが外部へ流出することはありません。
信頼できる参考文献・標準規格
- W3C Scalable Vector Graphics (SVG) 2 Specification ↗ — Official W3C recommendation governing SVG document trees, coordinates, and rasterization rendering.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — Official standard defining PNG chunk structures, lossless compression, and alpha channel handling.
- MDN Web Docs: Pixel Manipulation with HTML5 Canvas ↗ — Technical documentation for direct ImageData extraction, RGBA buffer access, and client-side rendering.