透明背景のあるSVGをPNGへ変換する
Webサイトや文書にラスター画像が必要なら、SVGからPNGへを使います。描画されたSVGにある透明部分はPNGでも保持できます。不透明な背景を自動削除する機能ではありません。
なぜ透明PNGが必要なのか？
透明PNGは以下の用途に欠かせません：
- ロゴ配置 - どんな色の背景でも使用可能
- アイコンセット - どこでも一貫した見た目
- オーバーレイ - デザインや合成のレイヤー
- Webグラフィック - 白い枠なしで柔軟に配置
- アプリアセット - テーマに適応するUI要素
SVGと透明
PNGはアルファチャンネルを保存できますが、拡張子だけで透明かどうかは判断できません。PNG-24やPNG-32はエディター側の名称で、当サイトに色モードの選択はありません。SVG内の背景図形は元ファイルで編集する必要があります。
SVGが透明を扱う仕組み
SVGはネイティブで透明をサポートしています：
- デフォルトでは背景なし（透明）
- 半透明フィル用のRGBAカラー
- 要素の透明度属性
- 複雑な効果のためのブレンドモード
PNGでの維持
PNGは完全なアルファチャンネルをサポートします：
- 256段階の透明度（8ビット）
- 滑らかなアンチエイリアスエッジ
- 半透明グラデーション
SVGを1つ変換する
- 20 MB以下のSVGを選んでアップロードを待ちます。
- 元サイズなら寸法を空欄にします。指定する場合は各辺8192 pxまでで、両方を指定すると縦横比を保って範囲内に収めます。
- PNG圧縮は「バランス（推奨）」から試します。強い圧縮は容量を減らす場合がありますが、画質や透明度は高めません。
- 変換して保存し、明暗両方の背景でPNGを確認します。
透明度保持、アルファ強度、背景削除、PNG色モードの設定はありません。サーバー処理後は早めに保存し、元SVGも残してください。
元の図柄を準備する
不要な背景矩形はベクトルエディターで削除します。画像とスタイルは可能ならSVG内にまとめてください。利用できないフォントは見た目が変わるため、重要な文字は元エディターでアウトライン化します。
PNGは固定画素で、編集可能なパスやレイヤーを保持しません。埋め込み画像を拡大しても不足した細部は戻りません。用途に合う寸法で出力して確認してください。
ユースケース
ロゴ変換
ロゴファイルの場合：
- SVG内の背景を削除する
- 複数のサイズでエクスポートする
- 明るい背景と暗い背景で確認する
- 透明版と白背景版の両方を含める
アイコンセット
アプリやWebアイコンの場合：
- 寸法を標準化する（例：512x512）
- 一貫したパディングを維持する
- アイコンを1つずつ変換し、元の透明部分が残っているか確認する
- 実際の使用サイズでテストする
Webグラフィック
ウェブサイト要素の場合：
- 適切な解像度でエクスポートする
- レティナ版（2x）を検討する
- ファイルサイズが適切か確認する
- 異なる背景でのオーバーレイをテストする
複数ファイル・複数サイズ
1回に入力できるSVGは1つです。複数の出力は個別に変換・確認します。フォルダー入力、全体の透明度設定、一括出力はありません。
透明のテスト
保存したPNGを確認します。元画像に描かれた市松模様は普通の画素で、ビューアーの市松模様は表示の補助です。2色以上の背景で比べて区別してください。HTML例は自分のテストページ用です。
クイックテスト方法
- 画像エディタでPNGを開く
- チェッカー柄の背景（透明）を確認する
- 背面に色付きレイヤーを追加する
- グラフィックが正しく見えるか確認する
ブラウザテスト
<div style="background: linear-gradient(45deg, #333, #666)">
<img src="your-graphic.png" alt="Transparency test">
</div>
白い枠が表示されないことを確認してください。
エッジケース
SVGレンダラーごとに同じ画素になると仮定せず、出力の効果を確認します。埋め込み写真の不透明な背景は、その元画像を編集する必要があります。パスの不透明度を変えても下の白い矩形は消えません。
ラスター画像が埋め込まれたSVG
SVGにラスター画像が含まれる場合：
- ラスター部分は元の透明を維持する
- ベクター部分は通常通り変換される
- 埋め込み画像に透明があるか確認する
複雑な透明効果
以下のようなSVGの場合：
- ぼかし効果
- ドロップシャドウ
- ブレンドモード
これらは変換が異なる場合があります。テストして必要に応じて調整してください。
半透明要素
透明度値を持つSVG：
- 描画後の不透明度を元のSVGと照合する。
- ファイルサイズが増える可能性がある
- 変換後の視覚的な正確性を確認する
よくある質問
強い圧縮で透明度も改善しますか？
いいえ。PNGの可逆圧縮処理が変わるだけです。
白背景や輪郭の違いはどう調べますか？
白が元画像かビューアの背景か確認します。透明度トラブルの確認も参照してください。
PNGを編集可能なSVGに戻せますか？
このツールはベクトル化しません。元SVGを保管してください。