> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG変換で透明な背景を保つ方法：白い四角の原因と除去

> SVGの白い四角を診断し、PNGの透明部分を保つか、変換後に対応するベクター背景を除去します。保存前に内側の白い図形も確認してください。

Source: https://perfectvector.com/ja/blog/transparent-background-svg

Language: ja
Author: Claire Yoon
Published: 2026-06-02T08:00:00+09:00
Updated: 2026-10-07T08:00:00+09:00

SVGには既定で塗られた背景はありませんが、背景の図形や、不透明なピクセルを持つラスター画像が含まれることがあります。変換後に白い四角が現れたら、何かを消す前に、どのオブジェクトが白を作っているか特定してください。透明なPNGはトレースでも空白を保てます。不透明な元画像でも、トレースされた背景が削除可能な別のベクターオブジェクトなら、透明にできます。

未加工の元画像と結果を残してください。SVG対応エディター、またはロック解除済みのPerfectVector結果エディターと、確認用にコントラストのある背景が必要です。白いページでは、白が空白なのか、背景オブジェクトなのか、意図した作品の一部なのか判断できません。

## 白を作っているものを見つける

ラスター画像はピクセルを保存します。アルファチャンネルは不透明度を保存し、PNGが本当に透明なピクセルを持てるのはこのためです。[PNG仕様](https://www.w3.org/TR/png-3/)は透明部分に対応し、[MDNの形式ガイド](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types)はJPEGがアルファ透明度に対応しないことを説明しています。

SVGは形状と描画の指示を保存しますが、PNGやJPEGも埋め込めます。[SVGの埋め込みコンテンツ仕様](https://www.w3.org/TR/SVG2/embedded.html)を読むと、ラスターの白いピクセルが`.svg`ファイル内に残る理由が分かります。

| 見えているもの               | 確認                  | 適切な対処                     |
| --------------------- | ------------------- | ------------------------- |
| エディターの作業領域だけが白い       | SVGを別の色の上に置く        | すでに作品が透明なら、ファイル変更は不要      |
| 被写体の背後に1つの四角やパスがある    | オブジェクトを選ぶか、SVG構造を確認 | 実際の背景オブジェクトを削除            |
| 内部の細部を含む複数の白い図形       | 各図形の役割を特定           | 背景だけを削除するか、意図的に広い範囲を切り抜く  |
| 不透明な白ピクセルを持つ1枚の埋め込み画像 | 画像オブジェクトとラスター原本を確認  | ラスターの背景を編集してから置き換えるか再トレース |
| 別の色に重ねても見える市松模様       | アルファとダウンロードした画像を確認  | 透明と扱わず、描き込まれた模様を除去        |

## トレース前と後のどちらで整えるか

**JPEGから背景が透明なSVGにできますか？** はい。JPEGは透明部分を保存できませんが、見えるピクセルからベクター形状をトレースできます。結果の背景が、対応する独立したベクターオブジェクトなら、後から削除します。背景が複雑、被写体と図形を共有している、埋め込み画像に残っている場合は、先に透明なラスターを準備するか、ベクターを手で編集してください。

有用な方法は2つあります。

* **先にラスターを準備します。** 画像エディターで被写体を分離し、本物のアルファを持つPNGを書き出してトレースします。写真の背景、描き込まれた市松模様、前景と背景を分ける判断が必要な場合に使います。
* **後からベクター背景を削除します。** フラットな作品をトレースし、生成されたオブジェクトを確認して、独立した背景図形を除去します。内側の意図的な白い要素も透明にしたい場合を除き、それらは残してください。

`.jpg`を`.png`に変えても、被写体の周りにアルファは作られません。形式変換と背景除去は別の操作です。JPEG特有の準備は、[JPGをSVGに変換する方法](https://perfectvector.com/ja/blog/how-to-convert-jpg-to-svg)をご覧ください。

## 変換中も透明部分を保つ

1. **コントラストのある色に元画像を重ねて確認します。** 透明に見える場所が、白や描かれた市松模様ではなく、本当に空であることを確かめます。ラスターの修正が必要なら、準備したPNGを保存します。
2. **トレースし、プレビューを比較します。** PerfectVectorで[PNGをSVGに変換し](https://perfectvector.com/ja/convert-png-to-svg)、無料プレビューを元画像と比較します。外側の輪郭、意図した穴、内部の白い作品部分を確認してください。
3. **編集前にロックを解除します。** 結果のロックを解除するとエディターと書き出しを使えます。[製品の事実情報](https://perfectvector.com/product-facts.md)は、これを無料の変換とプレビューから区別しています。
4. **適切な背景操作を選びます。** エディターが除去可能な背景を検出したら、Remove Backgroundを開き、以下の2つの選択肢を比較します。適切なオブジェクトが検出されなければ、ベクターエディターで確認するか、ラスターの準備に戻ります。
5. **変更後の結果を確認し、必要なら元に戻します。** 外周、文字、白い細部、穴を確認します。残すつもりだった作品部分が消えたら、変更を取り消してください。
6. **SVGを書き出し、別の色に重ねて試します。** 保存したファイルを使用先のアプリで開き直します。透明にしたい場所だけから、背景色が見えるはずです。

## PerfectVectorのBackground onlyとBackground color

結果エディターは、除去可能な背景を検出すると2つの操作を提供します。

| 設定                   | 範囲                                      | 確認すること                      |
| -------------------- | --------------------------------------- | --------------------------- |
| **Background only**  | 検出した最下部の背景オブジェクトを除去                     | 内部の白い作品部分がそのオブジェクトと別なら、残ること |
| **Background color** | 検出した背景色に一致するオブジェクトを除去し、レイヤーを考慮した切り抜きを適用 | 同色の細部も消えたり、穴になったりする可能性      |

検出は対応するベクター構造とキャンバスを覆う範囲に基づいており、任意の写真の被写体を識別するものではありません。広い色の操作は、一致する領域を透明にしたい場合に役立ちますが、内部の白い図形を白のまま残したい場合には不適切です。

白い背景、オレンジの三角形、内部の小さな白い長方形を使ったエディター確認では、Background onlyは内部の長方形を残しました。Background colorは両方の白いオブジェクトを削除し、三角形に透明な穴を残しました。Undoでは元の3つの図形が戻りました。これは写真の背景認識ではなく、それらの単色図形の操作を確認したものです。

白い文字、目、内部の細部を残したい場合は、Background onlyから始めます。適用前に効果をプレビューしてください。背景と前景が1つのオブジェクトを共有している場合、全体の色変更や自動検出だけでは確実に分離できません。オブジェクト単位で編集するか、より良いラスター原本を準備します。

すでに持っているSVGは、SVG対応エディターで開いて実際の背景オブジェクトを確認してください。ここで説明したPerfectVectorの変換結果エディターは、結果のロック解除後に使うものであり、アップロードしたすべてのSVGを無制限に直接編集できるという意味ではありません。

**白い四角**

![青緑色の上に白い背景の四角が見えるロゴのイラスト](https://perfectvector.com/blog/transparent-background-svg/svg-white-box.webp)

*白いオブジェクトがロゴの外側の背景を覆っています。ファイルを確認し、何が白を作っているか特定してください。*

**被写体の外側は空白**

![青緑色の上に置いたロゴのイラスト。被写体の外に白い四角はありません](https://perfectvector.com/blog/transparent-background-svg/svg-transparent.webp)

*空いた領域から背景色が見えます。外周だけでなく、内部の細部も確認してください。*

## サムネイルだけでなく書き出したファイルを確認する

使用先のアプリで、SVGを暗い色や鮮やかな色の背景に置きます。被写体の外側の空間と、内部の意図した白い細部の両方を確認してください。白いキャンバスでは、白いオブジェクトが残っていても正しく見えることがあります。

カット用途では、パスも確認します。透明な色の値で形状を見えなくしても、ファイル内にオブジェクトは残る場合があります。背景オブジェクトを削除することと、塗りを隠すことは別の操作です。素材制作に使う前に、[カット前のSVG監査](https://perfectvector.com/ja/blog/check-svg-before-cutting)を使ってください。

保存したファイルにまだ四角があれば、開き直して原因の背景パスや埋め込み画像を探します。使用先のアプリだけで四角が出るなら、再トレースする前に別のビューアーで同じSVGを比較し、そのアプリの読み込みと書き出しの扱いを確認してください。

## AI画像と描き込まれた市松模様

市松模様は、表示上の慣習にすぎません。別の色に画像を重ねても四角が見えるなら、空白ではなく作品の一部です。生成ツールのサムネイルで判断せず、ダウンロードしたファイルのアルファを確認してください。

本物の透明設定を提供する生成ツールもあります。OpenAIの[Images APIリファレンス](https://developers.openai.com/api/reference/resources/images)は、透明、不透明、自動の背景モードを案内しています。ただし、その設定だけでは特定のダウンロードファイルの中身は分かりません。背景がピクセルに描き込まれているなら、トレース前にラスターを整え、本物のアルファを書き出します。

## よくある質問

**SVGは透明な背景に対応していますか？**
はい。SVGには既定で塗られた背景はありませんが、図形や埋め込みラスター画像が不透明な背景を作ることがあります。実際のファイルを、コントラストのある色に重ねて確認してください。

**背景が透明なSVGを保存するには？**
実際の背景オブジェクトを削除するか、埋め込まれたラスターの透明部分を準備し、内部の意図した作品部分を保ってSVGを書き出します。使用先のアプリで別の色に重ねて開き直し、保存結果を確認してください。

**変換後のSVGに白い背景があるのはなぜですか？**
元画像に不透明な白ピクセルがある、トレースに背景オブジェクトがある、ラスター画像が埋め込まれたまま、といった可能性があります。ラスターの修正かベクターオブジェクトの削除かを選ぶ前に、元画像とSVG構造を確認してください。

**JPGを背景が透明なSVGにできますか？**
はい。準備中に背景を除去するか、変換後に適したベクター形状から除去できれば可能です。JPEG自体はアルファを保存できません。トレースされた背景が独立していれば、そのオブジェクトを削除します。複雑な背景や埋め込みラスターの背景なら、先に透明なPNGを準備するか、手で編集します。

**PNGをSVGにするときに透明部分を保つには？**
PNGが本物のアルファを持つことを確認し、トレースして、結果を元画像と比較します。不要な背景オブジェクトが現れたら、編集が使えるようになってから適切なオブジェクトを削除します。書き出したSVGを別の色に重ねて確認してください。

**PerfectVectorでSVGの白い背景を削除するには？**
編集前に変換結果のロックを解除します。除去可能な背景が検出されたら、Background onlyで検出した背景だけを除去し、別オブジェクトである内部の白い作品部分を保ちます。Background colorは範囲が広く、一致する内部の細部も除去する場合があります。プレビューし、必要なら元に戻してください。

**AI画像の背景が透明ではなく市松模様なのはなぜですか？**
模様がピクセルに描かれている可能性があります。別の色に重ねても残るなら、ラスターを整え、本物のアルファを持つPNGを書き出します。生成ツールの透明設定も、ダウンロードしたファイルで確認する必要があります。

## 出典

1. [W3C：PNG仕様、第3版](https://www.w3.org/TR/png-3/)：PNGの不透明度とアルファチャンネルの透明部分を説明します。
2. [MDN：画像ファイルの種類と形式ガイド](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types)：JPEGとPNGの透明部分の違いです。
3. [W3C：SVGの埋め込みコンテンツ](https://www.w3.org/TR/SVG2/embedded.html)：SVG文書内にラスターピクセルが残ることを説明します。
4. [PerfectVector：製品の事実情報](https://perfectvector.com/product-facts.md)：結果のプレビュー、ロック解除、編集、書き出しの利用条件です。
5. [OpenAI：Images APIリファレンス](https://developers.openai.com/api/reference/resources/images)：生成画像について文書化された背景モードです。

***

[PNGのSVG変換をプレビューし](https://perfectvector.com/ja/convert-png-to-svg)、元画像と再構築された背景を確認してから、編集前にロックを解除してください。透明にしたい領域だけを除去し、保存したファイルを別の色に重ねて確認します。

## Explore

- [Read the HTML article](https://perfectvector.com/ja/blog/transparent-background-svg)
- [BMPをベクター化する：ピクセルの欠点までトレースしないために](https://perfectvector.com/ja/blog/bmp-image-to-vector.md)
- [DTFの半透明ピクセル：最終PNGを確認する](https://perfectvector.com/ja/blog/dtf-semi-transparent-pixels.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)