SVG→PNG
SVGベクター画像をブラウザ内で完全に無劣化PNGラスター形式に変換——ファイルがデバイスから出ることは一切ありません。JPG変換と異なりPNGはSVGの透明性をクリーンなアルファチャンネルで完全に保持するため、透明背景が必要なアイコン・ロゴ・UI要素・デザイン素材に最適です。ブラウザのネイティブベクターエンジンがフル解像度でSVGをレンダリング——鮮明でピクセルパーフェクトなPNGを出力し、あらゆる画像エディタ・デザインツール・アプリケーションでシームレスに動作します。
関連おすすめ
ユースケース
- SVGアイコン・ロゴをPhotoshop・Figma・その他デザインツールで使用するため透明背景保持が必要。
- アプリ開発向けSVG UI要素・アイコンを変換——無劣化PNGは全プラットフォームSDKで動作。
- SVGファイルがPowerPoint・Keynote等のプレゼンテーションソフトにインポートできない——PNGは汎用的に対応。
- Favicon・アプリアイコン作成に特定サイズの透明PNGが必要——SVGソースからレンダリング。
- 透明SVG素材が一部ビューアーで黒背景表示される——PNGは透明を正常にハンドリング。
- SVGベクターアートを文書・SNS・メッセンジャーアプリ向けにラスター画像化。
- SVGアップロードをブロックするECプラットフォームに——透明背景を保持したままPNGに変換。
- マーケティング素材内の色付き背景にSVGロゴを重ねる——PNG透明なら自然に合成。
- デザインハンドオフで特定サイズのラスターアセットが必要——SVGをネイティブまたはリサイズ後のサイズでPNGレンダリング。
- メール署名・マーケティングメールで透明画像が必要——SVGはメーラーの対応が進んでいない。
- 写真上にSVGロゴを重ね商品モックアップ作成——PNG透明なら自然に合成。
- ウェブデザインアセットを汎用閲覧可能なPNGとしてアーカイブ——編集用に元SVGは保持。
使い方
- アップロード領域をクリックするか、SVGベクターファイルをページにドラッグ&ドロップ。.svg形式ファイルのみ受け付けます。
- ファイル選択後、ブラウザ内で自動的にローカルレンダリングが開始——アルファチャンネルは完全に保持されます。
- レンダリングとエンコードの完了を待ちます。エフェクトを含む複雑なSVGは数秒かかる場合があります。
- 変換後のPNG解像度とファイルサイズをプレビューし、「ダウンロード」をクリックして保存。
特徴
- 100%クライアントサイド処理:SVGレンダリングとPNGエンコードはネイティブCanvas APIを使用しブラウザ内で実行——ファイルがどのサーバーにもアップロードされない
- 透明完全保持:PNGアルファチャンネルによりSVGの透明背景が完全維持——黒縁やアーティファクトのないクリーンなエッジ
- 鮮明なベクターレンダリング:ブラウザのネイティブSVGエンジンがフル解像度でベクターを描画——ギザギザのない鮮明なPNG出力
- 無劣化出力:PNGは無劣化圧縮を採用——レンダリング後の追加品質劣化ゼロ
- アップロードで自動変換:SVGファイルを選択するとレンダリングが即座に開始——余分なクリック不要
- 複雑なSVG対応:グラデーション・フィルター・埋め込みテキスト・グループを含む単体.svgファイルに対応
- 元サイズ完全保持:出力PNGはSVGのviewBoxで指定された正確なサイズに一致——拡大縮小や切り抜きなし
SVG→PNG vs JPG vs WebP:どの出力フォーマットを選ぶべき?
| 機能 | PNG | JPG | WebP |
|---|---|---|---|
| 透明対応 | ✅ 完全保持 | ❌ 白塗りつぶし | ✅ 保持 |
| 圧縮方式 | 無劣化 | 劣化圧縮 | 劣化/無劣化 |
| ファイルサイズ | 大きめ | 最小 | 小さめ |
| エッジ品質 | ✅ 鮮明(テキスト・アイコン最適) | アーティファクトが出る場合あり | 良好 |
| デザインツール対応 | ✅ 全エディタ | ✅ 全エディタ | 比較的新しいエディタのみ |
| 最適な用途 | ロゴ・アイコン・透明素材 | フォームアップロード・写真・汎用共有 | ウェブ最適化・小ファイル化 |
よくある質問
変換後のPNGはSVGのように無限に拡大縮小できますか?
いいえ。SVGは形状を数式で記述するベクターフォーマットのため無限拡大縮小に対応しますが、PNGは固定サイズのラスターフォーマットで——拡大するとぼやけます。本ツールではSVGのviewBox属性で指定されたサイズでレンダリングします。大きなラスター出力が必要な場合はデザインツール内でスケールしてからエクスポートするか、[画像リサイザー](/image/resize/)を使用してください。
SVGの透明背景は保持されますか?
はい、完全に保持されます。本ツールはSVGの透明情報をPNGアルファチャンネルに正しくレンダリングします。ロゴ・アイコン・UI要素の透明背景もエッジ周囲の白黒の縁取りなし——クリーンに変換されます。
出力PNGの解像度が小さいのはなぜですか?
SVGは固定ピクセルサイズを持たないベクターフォーマットです。出力サイズはSVGのviewBox属性によって決まります。アイコン用途のSVGは(例えば24×24や48×48のように)小さい場合が多いです。大きな出力が必要な場合はアップロード前にベクターエディタでviewBoxのサイズを変更してください。
SVGファイルはサーバーにアップロードされますか?
一切アップロードされません。変換は全てブラウザ内蔵のSVGレンダリングエンジンとCanvas APIを使用しローカルで実行されます。ロゴ・アイコン・デザイン素材がデバイスから外に出ることは一切なく——外部サーバーに送信されることもありません。
SVG内のテキストは正常にレンダリングされますか?
システムにフォントがインストールされている場合、テキストは正常にレンダリングされます。特殊フォント・カスタムフォントを使用するSVGはフォールバックフォントでレンダリングされる場合があります。全デバイスで一貫したレンダリング結果を得るには、デザインツールでSVGエクスポート前にテキストをアウトライン化(パス化)してください。
外部リソースを参照するSVGに対応していますか?
自己完結型のSVGファイルの使用を推奨します。外部画像やフォントを参照するSVGの場合、クロスオリジンの制限により正常にレンダリングできない場合があります。最良の結果を得るには画像を埋め込みテキストをアウトライン化してからアップロードしてください。
バッチ変換に対応していますか?
ブラウザ側の安定性確保のため、現在は1枚のSVGを順次処理します。複数件の変換は1ファイルずつ処理してください。バッチ機能は今後のバージョンで追加される可能性があります。
SVG変換でPNGとJPGどちらを選ぶべきですか?
透明性・無劣化品質・ロゴ・アイコン・テキスト・UI要素の鮮明なエッジが必要な場合はPNGを選択してください。透明性が不要な写真・フォームアップロード用途では最小ファイルを実現するJPG([SVG→JPG](/image/svg-to-jpg/))を選択します。