SVGに透明度を適用する方法

Adobe Illustrator CCのSVGグラフィックは、背景のあるデジタルデザイナーに渡されることはめったにありません。通常、グラフィックは、Webサイト、アプリ、アニメーション、またはインタラクティブコンテキストに存在する背景の上に浮かんでいます。

SVGアートワークの背後にある背景をノックアウトすることに関係するものについて説明する前に、SVGグラフィックに透明度を適用することに焦点を当ててください。透明度パネルを使用してアートワークの不透明度を定義する必要があります。たとえば、図の黄色の形状に50％の透明度が適用されており、透明度が有効になっていることがわかります。はい、その画像はSVGファイルであり、すべての軽量、高速読み込み、および無限にスケーラブルな機能がSVGに組み込まれています。

色付きの背景の上にある半透明のSVG形状。

背景が透明なSVGを出力する方法

デザイナーは、透明にするか、表示したままにする背景の観点から考えることに慣れています。背景をノックアウトすることを考えています。PNG画像とGIF画像はそのように機能します。背景を使用して作成するか、IllustratorやPhotoshopなどのプログラムで透明な背景を選択してその背景をノックアウトします。

GIFとPNGを使用すると、背景色や画像をWebページに表示できる1つの透明色を使用できます。ただし、SVGファイルでは、背景をノックアウトするロジックがPNGやGIFとは異なります。基本的に、背景がないため、背景が不透明なSVGグラフィックのようなものはありません。言い換えると、デフォルトでは、 SVGグラフィックは背景なしで保存およびエクスポートされます。

だから問題は何ですか？そうですね、SVGファイルを保存またはエクスポートするときに、誤って背景が透明になってしまうことは簡単です。次の図は、背景が白であるか、背景が透明である可能性があります。Illustratorの画面を見ただけではわかりません。[表示]→[透明グリッドの表示]を選択する必要があります。

このグラフィックの背景は白であるか、背景がない可能性があります。

示されているように、透明グリッドを有効にすると、鳥の後ろに白い長方形があり、ファイルをSVGとして保存するか、SVGとしてエクスポートすると、白い背景がグラフィックに「一致」することがわかります。

透明度グリッドを表示すると、グラフィックの後ろに白い長方形が表示されます。

これを別の角度から強調して光を当てましょう。この画像をSVGとしてエクスポートしようとすると、表示されている[画面のエクスポート]ダイアログに、透明色を選択するオプションがありません。

背景色がないため、SVGで透明色を選択することはできません。

ターゲットメディア（Webページやアプリなど）の色で背景を付けたときにグラフィックがどのように見えるかを確認できるように、SVG宛てのアートワークの後ろに背景の長方形を配置することを主張するデザイナーによく遭遇します。SVGを保存またはエクスポートするときに背景の長方形を削除することを覚えている限り、それは問題ありません。そして、今日の高圧、高生産性、迅速なターンアラウンドの世界では、誰がもう1つ覚えておく必要がありますか？

より良い解決策は、グラフィックが配置される環境に一致する単一の色で透明度の「グリッド」を定義することです。グリッドを引用符で囲むのはなぜですか？この手法はごまかすためです。これを使用すると、両方のグリッドの色を同じ色として定義し、Webページまたはアプリの背景色を効果的にシミュレートできます。

SVGアートワークの開発中にその手法を使用してカスタム背景を作成するには、次の手順に従います。

[ファイル]→[ドキュメントの設定]を選択します。

[全般]タブで、[透明度とオーバープリントのオプション]セクションを見つけます。
必要な変更は、ダイアログのこのセクションで制御されます。
グリッドを効果的に省くことができるので、グリッドサイズの定義について心配する必要はありません。

ダイアログの[透明グリッド]セクションで、2つのグリッドカラーパネルの最初のパネルをクリックし、次の図に示す[色]ポップアップのさまざまなカラーパレットのいずれかを使用して背景色を選択します。
ちなみに、これらのカラーパレットはどれも特にデジタルフレンドリーではありません。RGBA、16進数、またはその他の標準的なWebカラー形式のパレットはありませんが、カラーピッカースポイトを使用すると、目的の背景色を取得できます。

透明グリッドを使用してプレビューの背景色を定義します。

2つのグリッドカラーパネルの2番目を選択し、同じ色を割り当てます。
カラーピッカースポイトを使用してその色を取得できることを忘れないでください。

[ドキュメントの設定]ダイアログで[OK]をクリックします。

前の一連の手順で行ったのは、透明グリッドが有効になっているときにどのように表示されるかを定義することだけでした。したがって、透明度グリッドが有効になっていない場合は、[表示]→[透明度グリッド]を選択します。

この図では、グラフィック付きのアートボードを選択し、シミュレートされた背景色に対してプロジェクトをプレビューしています。

カスタム透明グリッドを使用して出力背景色をプレビューします。

SVGに透明効果を適用する

透明度（50％の不透明度など）または色焼き、暗くする、乗算などの透明度効果をSVGグラフィックに適用すると、これらの効果はSVGのスケーラビリティを維持します。

この図は、PNGファイル（上）とSVGとしてエクスポートされた同じグラフィック（3つの半透明のオレンジ色の長方形）を示しています。ブラウザで拡大すると、PNGファイルの品質がどのように低下​​するかを確認できます。見えないのは、PNGファイルがSVGのほぼ2倍の大きさであるということです。

透明度が適用されている場合のPNG出力（上）とSVGの比較

透明効果にSVGを使用する利点の概要は次のとおりです。

• ファイルサイズは質的に小さくなっています。
• Webまたはアプリの開発者は、透明度の値を微調整または編集して、対話性を割り当てることができます。
• ファイルをどれだけ拡大しても、画像と透明度は低下しません。

ちなみに、この長方形のセットに対して生成されたSVGコードがどのように見えるか、およびWebまたはアプリ開発者がそれを操作するのがどれほど簡単かについて知りたい場合は、3つのSVGボックスの最初のコードを次に示します。 、60％の不透明度を適用：

<= "" code = "">