SVGの背景を透明にする

SVGはデフォルトで透明です。白い背景が表示されているなら、その白は設定ではなく、ファイルの中に保存されたシェイプです。Rayziaの無料エディタはSVGを編集可能なオブジェクトとして開くので、背景シェイプをクリックして削除し、きれいなSVGか、透過を保持したPNGをエクスポートできます。

SVGに白い背景がある理由

SVG形式には背景というものがありません。何も描かれていない場所は透明で、後ろにあるものが透けて見えます。つまりSVGが白や色付きの背景付きで表示されるとき、その背景はオブジェクトです。ファイルに焼き込まれた長方形で、たいてい一番下にあります。よくあるドローイングアプリやエクスポートパイプラインが、白地でのプレビューをきれいに見せるために追加するのです。

つまりSVGから背景を取り除くことは、フィルタでも特別なモードでもありません。ごく普通の編集です。背景として働いているシェイプを選択して削除するだけ。RayziaはファイルをネイティブSVGとして読み込むため、そのシェイプはクリックできる通常の編集可能なオブジェクトとして届きます。

SVGから背景を削除する方法

  1. エディタを開きます。 rayzia.com にアクセスし、エディタを次の場所で開きます: /vector/。ダウンロード不要、開始にアカウントも要りません。Windows、Mac、Linux、ChromeOS、タブレットのどのブラウザでも動作します。
  2. .svg をドラッグして読み込みます。 ファイルをキャンバスにドロップするか、「ファイル」→「開く」を使います。RayziaはネイティブSVGとして読み込むため、背景の長方形はロックされた画像の一部ではなく、それ自体が編集可能なオブジェクトとして届きます。
  3. 背景シェイプをクリックします。 白い長方形をクリックして選択します。アートワークが上に重なっている場合は、 Alt+クリックを同じ場所で行うと背後のオブジェクトが選択されます。Alt+クリックのたびに1階層ずつ奥へ進みます。
  4. 削除します。 キーは Delete で選択を削除します。違うオブジェクトを選んでしまっても、アンドゥ1回で戻せます。
  5. エクスポートします。 「ファイル」→「エクスポート」からSVGを選べばきれいなベクターファイルが得られ、ラスター版が必要ならPNGを選びます。PNGは透過を保持するので、いま消した領域は透明のままです。

エクスポート時に透過を保持する

背景シェイプが消えれば、SVGエクスポートは何も描かれていない場所すべてで透明になります。これはオンにするオプションではなく形式そのものの仕組みで、SVGは透過や部分的な不透明度を、しばしばPNGより柔軟に扱えます。

透過が失われやすいのはラスターエクスポートなので、各形式が何をするか正確に知っておくと役立ちます。RayziaではPNGは透過を保持します。JPGは先に白背景が塗られます。JPEGにはアルファチャンネルがないためです。透過付きの固定ラスターが必要ならPNGを使い、どのみち白いページに載る画像にはJPGを使いましょう。探すべきトグルはありません。アートワークの背後のキャンバスが空なら、エクスポートされたPNGはそこが透明になります。

SVGの透過: よくある質問

RayziaでのSVG背景の削除は無料ですか?

はい。編集は無料で、SVGとPNGのエクスポートも無料です。50+ のツールすべてもAIアシスタントも無料。無料プランにはクラウドファイル3件が含まれ、無制限のクラウドファイルとPDFエクスポート、バッジなしの共有リンクが欲しければProは月額 $8 です。

そもそもなぜ私のSVGに白い背景があるのですか?

白い長方形がファイルの中に、たいてい一番下のオブジェクトとして保存されているからです。SVG形式自体はデフォルトで透明なので、見えている背景はほぼ必ず、どこかのプログラムが白地でのプレビューのために追加したシェイプに由来します。そのシェイプを削除すれば透過が戻ります。

PNGにエクスポートしても透過は保たれますか?

はい。PNGは透過を保持するので、キャンバスが空の場所はエクスポート後のピクセルも透明です。JPGは保持しません。JPEGにはアルファチャンネルがないため、白背景が塗られます。

背景を削除する代わりに追加できますか?

はい。覆いたい領域に長方形を描いて塗りを設定します。最初に描けばスタックの一番下に置かれます。長方形のオプションバーには単位を選べる正確なWとHのフィールドがあるので、アートボードのサイズにぴったり合わせられます。