SVG変換で透明な背景を保つ方法：白い四角の原因と除去
SVGの白い四角を診断し、PNGの透明部分を保つか、変換後に対応するベクター背景を除去します。保存前に内側の白い図形も確認してください。
目次
SVGには既定で塗られた背景はありませんが、背景の図形や、不透明なピクセルを持つラスター画像が含まれることがあります。変換後に白い四角が現れたら、何かを消す前に、どのオブジェクトが白を作っているか特定してください。透明なPNGはトレースでも空白を保てます。不透明な元画像でも、トレースされた背景が削除可能な別のベクターオブジェクトなら、透明にできます。
未加工の元画像と結果を残してください。SVG対応エディター、またはロック解除済みのPerfectVector結果エディターと、確認用にコントラストのある背景が必要です。白いページでは、白が空白なのか、背景オブジェクトなのか、意図した作品の一部なのか判断できません。
白を作っているものを見つける
ラスター画像はピクセルを保存します。アルファチャンネルは不透明度を保存し、PNGが本当に透明なピクセルを持てるのはこのためです。PNG仕様は透明部分に対応し、MDNの形式ガイドはJPEGがアルファ透明度に対応しないことを説明しています。
SVGは形状と描画の指示を保存しますが、PNGやJPEGも埋め込めます。SVGの埋め込みコンテンツ仕様を読むと、ラスターの白いピクセルが.svgファイル内に残る理由が分かります。
| 見えているもの | 確認 | 適切な対処 |
|---|---|---|
| エディターの作業領域だけが白い | SVGを別の色の上に置く | すでに作品が透明なら、ファイル変更は不要 |
| 被写体の背後に1つの四角やパスがある | オブジェクトを選ぶか、SVG構造を確認 | 実際の背景オブジェクトを削除 |
| 内部の細部を含む複数の白い図形 | 各図形の役割を特定 | 背景だけを削除するか、意図的に広い範囲を切り抜く |
| 不透明な白ピクセルを持つ1枚の埋め込み画像 | 画像オブジェクトとラスター原本を確認 | ラスターの背景を編集してから置き換えるか再トレース |
| 別の色に重ねても見える市松模様 | アルファとダウンロードした画像を確認 | 透明と扱わず、描き込まれた模様を除去 |
トレース前と後のどちらで整えるか
JPEGから背景が透明なSVGにできますか？ はい。JPEGは透明部分を保存できませんが、見えるピクセルからベクター形状をトレースできます。結果の背景が、対応する独立したベクターオブジェクトなら、後から削除します。背景が複雑、被写体と図形を共有している、埋め込み画像に残っている場合は、先に透明なラスターを準備するか、ベクターを手で編集してください。
有用な方法は2つあります。
- 先にラスターを準備します。 画像エディターで被写体を分離し、本物のアルファを持つPNGを書き出してトレースします。写真の背景、描き込まれた市松模様、前景と背景を分ける判断が必要な場合に使います。
- 後からベクター背景を削除します。 フラットな作品をトレースし、生成されたオブジェクトを確認して、独立した背景図形を除去します。内側の意図的な白い要素も透明にしたい場合を除き、それらは残してください。
.jpgを.pngに変えても、被写体の周りにアルファは作られません。形式変換と背景除去は別の操作です。JPEG特有の準備は、JPGをSVGに変換する方法をご覧ください。
変換中も透明部分を保つ
- コントラストのある色に元画像を重ねて確認します。 透明に見える場所が、白や描かれた市松模様ではなく、本当に空であることを確かめます。ラスターの修正が必要なら、準備したPNGを保存します。
- トレースし、プレビューを比較します。 PerfectVectorでPNGをSVGに変換し、無料プレビューを元画像と比較します。外側の輪郭、意図した穴、内部の白い作品部分を確認してください。
- 編集前にロックを解除します。 結果のロックを解除するとエディターと書き出しを使えます。製品の事実情報は、これを無料の変換とプレビューから区別しています。
- 適切な背景操作を選びます。 エディターが除去可能な背景を検出したら、Remove Backgroundを開き、以下の2つの選択肢を比較します。適切なオブジェクトが検出されなければ、ベクターエディターで確認するか、ラスターの準備に戻ります。
- 変更後の結果を確認し、必要なら元に戻します。 外周、文字、白い細部、穴を確認します。残すつもりだった作品部分が消えたら、変更を取り消してください。
- SVGを書き出し、別の色に重ねて試します。 保存したファイルを使用先のアプリで開き直します。透明にしたい場所だけから、背景色が見えるはずです。
PerfectVectorのBackground onlyとBackground color
結果エディターは、除去可能な背景を検出すると2つの操作を提供します。
| 設定 | 範囲 | 確認すること |
|---|---|---|
| Background only | 検出した最下部の背景オブジェクトを除去 | 内部の白い作品部分がそのオブジェクトと別なら、残ること |
| Background color | 検出した背景色に一致するオブジェクトを除去し、レイヤーを考慮した切り抜きを適用 | 同色の細部も消えたり、穴になったりする可能性 |
検出は対応するベクター構造とキャンバスを覆う範囲に基づいており、任意の写真の被写体を識別するものではありません。広い色の操作は、一致する領域を透明にしたい場合に役立ちますが、内部の白い図形を白のまま残したい場合には不適切です。
白い背景、オレンジの三角形、内部の小さな白い長方形を使ったエディター確認では、Background onlyは内部の長方形を残しました。Background colorは両方の白いオブジェクトを削除し、三角形に透明な穴を残しました。Undoでは元の3つの図形が戻りました。これは写真の背景認識ではなく、それらの単色図形の操作を確認したものです。
白い文字、目、内部の細部を残したい場合は、Background onlyから始めます。適用前に効果をプレビューしてください。背景と前景が1つのオブジェクトを共有している場合、全体の色変更や自動検出だけでは確実に分離できません。オブジェクト単位で編集するか、より良いラスター原本を準備します。
すでに持っているSVGは、SVG対応エディターで開いて実際の背景オブジェクトを確認してください。ここで説明したPerfectVectorの変換結果エディターは、結果のロック解除後に使うものであり、アップロードしたすべてのSVGを無制限に直接編集できるという意味ではありません。
サムネイルだけでなく書き出したファイルを確認する
使用先のアプリで、SVGを暗い色や鮮やかな色の背景に置きます。被写体の外側の空間と、内部の意図した白い細部の両方を確認してください。白いキャンバスでは、白いオブジェクトが残っていても正しく見えることがあります。
カット用途では、パスも確認します。透明な色の値で形状を見えなくしても、ファイル内にオブジェクトは残る場合があります。背景オブジェクトを削除することと、塗りを隠すことは別の操作です。素材制作に使う前に、カット前のSVG監査を使ってください。
保存したファイルにまだ四角があれば、開き直して原因の背景パスや埋め込み画像を探します。使用先のアプリだけで四角が出るなら、再トレースする前に別のビューアーで同じSVGを比較し、そのアプリの読み込みと書き出しの扱いを確認してください。
AI画像と描き込まれた市松模様
市松模様は、表示上の慣習にすぎません。別の色に画像を重ねても四角が見えるなら、空白ではなく作品の一部です。生成ツールのサムネイルで判断せず、ダウンロードしたファイルのアルファを確認してください。
本物の透明設定を提供する生成ツールもあります。OpenAIのImages APIリファレンスは、透明、不透明、自動の背景モードを案内しています。ただし、その設定だけでは特定のダウンロードファイルの中身は分かりません。背景がピクセルに描き込まれているなら、トレース前にラスターを整え、本物のアルファを書き出します。
よくある質問
SVGは透明な背景に対応していますか？ はい。SVGには既定で塗られた背景はありませんが、図形や埋め込みラスター画像が不透明な背景を作ることがあります。実際のファイルを、コントラストのある色に重ねて確認してください。
背景が透明なSVGを保存するには？ 実際の背景オブジェクトを削除するか、埋め込まれたラスターの透明部分を準備し、内部の意図した作品部分を保ってSVGを書き出します。使用先のアプリで別の色に重ねて開き直し、保存結果を確認してください。
変換後のSVGに白い背景があるのはなぜですか？ 元画像に不透明な白ピクセルがある、トレースに背景オブジェクトがある、ラスター画像が埋め込まれたまま、といった可能性があります。ラスターの修正かベクターオブジェクトの削除かを選ぶ前に、元画像とSVG構造を確認してください。
JPGを背景が透明なSVGにできますか？ はい。準備中に背景を除去するか、変換後に適したベクター形状から除去できれば可能です。JPEG自体はアルファを保存できません。トレースされた背景が独立していれば、そのオブジェクトを削除します。複雑な背景や埋め込みラスターの背景なら、先に透明なPNGを準備するか、手で編集します。
PNGをSVGにするときに透明部分を保つには？ PNGが本物のアルファを持つことを確認し、トレースして、結果を元画像と比較します。不要な背景オブジェクトが現れたら、編集が使えるようになってから適切なオブジェクトを削除します。書き出したSVGを別の色に重ねて確認してください。
PerfectVectorでSVGの白い背景を削除するには？ 編集前に変換結果のロックを解除します。除去可能な背景が検出されたら、Background onlyで検出した背景だけを除去し、別オブジェクトである内部の白い作品部分を保ちます。Background colorは範囲が広く、一致する内部の細部も除去する場合があります。プレビューし、必要なら元に戻してください。
AI画像の背景が透明ではなく市松模様なのはなぜですか？ 模様がピクセルに描かれている可能性があります。別の色に重ねても残るなら、ラスターを整え、本物のアルファを持つPNGを書き出します。生成ツールの透明設定も、ダウンロードしたファイルで確認する必要があります。
出典
- W3C：PNG仕様、第3版：PNGの不透明度とアルファチャンネルの透明部分を説明します。
- MDN：画像ファイルの種類と形式ガイド：JPEGとPNGの透明部分の違いです。
- W3C：SVGの埋め込みコンテンツ：SVG文書内にラスターピクセルが残ることを説明します。
- PerfectVector：製品の事実情報：結果のプレビュー、ロック解除、編集、書き出しの利用条件です。
- OpenAI：Images APIリファレンス：生成画像について文書化された背景モードです。
PNGのSVG変換をプレビューし、元画像と再構築された背景を確認してから、編集前にロックを解除してください。透明にしたい領域だけを除去し、保存したファイルを別の色に重ねて確認します。
