如何將透明度應用於 SVG

來自Adobe Illustrator CC 的SVG 圖形很少交給有背景的數字設計師。通常，圖形會漂浮在網站、應用程序、動畫或交互式上下文中存在的任何背景之上。

在討論消除 SVG 藝術作品背後的背景所涉及的內容之前，請重點關注對 SVG 圖形應用透明度。您需要使用透明度面板定義圖稿的不透明度。例如，圖中的黃色形狀應用了 50% 的透明度，您可以看到效果中的透明度。是的，該圖像是一個 SVG 文件，具有內置於 SVG 中的所有輕量級、快速加載和無限可擴展功能。

彩色背景上的半透明 SVG 形狀。

如何輸出具有透明背景的 SVG

設計師習慣於考慮透明或保持可見的背景。我們考慮剔除背景。PNG 圖像和 GIF 圖像就是這樣工作的——您可以使用背景創建，或者在 Illustrator 或 Photoshop 等程序中選擇透明背景來剔除該背景。

使用 GIF 和 PNG，您可以擁有一種透明顏色，允許​​背景顏色或圖像在網頁中顯示出來。但是去除背景的邏輯在 SVG 文件中與在 PNG 和 GIF 中不同。本質上，不存在具有不透明背景的 SVG 圖形，因為沒有背景。換句話說：默認情況下， SVG 圖形在沒有背景的情況下保存和導出。

所以有什麼問題？好吧，在保存或導出 SVG 文件時，很容易意外地以透明背景結束！下圖可能有白色背景，也可能有透明背景。您無法僅通過查看 Illustrator 屏幕來判斷；你必須選擇查看→顯示透明網格。

此圖形可能有白色背景，也可能沒有背景。

如圖所示，啟用透明網格後，您可以看到小鳥背後有一個白色矩形，如果您將文件另存為 SVG 或將其導出為 SVG，則該白色背景將與圖形“搭配”。

查看透明網格會在圖形後面顯示一個白色矩形。

讓我從另一個角度強調並闡明這一點。當我將此圖像導出為 SVG 時，顯示的“導出屏幕”對話框沒有用於選擇透明度顏色的選項。

您無法在 SVG 中選擇透明顏色，因為沒有背景顏色。

我經常遇到一些設計師，他們堅持在以 SVG 為目標的藝術品後面放置一個背景矩形，以便他們可以看到圖形在目標媒體（例如網頁或應用程序）中以顏色作為背景時的外觀。沒關係，我提醒他們，只要您記得在保存或導出 SVG 時刪除該背景矩形。在當今壓力大、生產力高、周轉速度快的世界中，誰還需要記住一件事？

一個更好的解決方案是定義一個透明的“網格”，它的顏色與放置圖形的環境相匹配。為什麼我把網格放在引號中？因為這種技術作弊：使用它，您可以將兩種網格顏色定義為相同的顏色，從而有效地模擬網頁或應用程序背景顏色。

要在開發 SVG 圖稿時使用該技術創建自定義背景，請執行以下步驟：

選擇文件→文檔設置。

在常規選項卡中，找到透明度和疊印選項部分。
您想要的更改在對話框的這一部分中進行控制。
不要擔心定義網格大小，因為您可以有效地免除網格。

在對話框的透明網格部分中，單擊兩個網格顏色面板中的第一個，並使用下圖所示顏色彈出窗口中的各種調色板之一選擇背景顏色。
順便說一下，這些調色板都不是特別適合數字化的。沒有適用於 RGBA、十六進製或其他標準 Web 顏色格式的調色板，但顏色選擇器吸管可以幫助您獲得想要匹配的背景顏色。

使用透明網格定義預覽背景顏色。

選擇兩個網格顏色面板中的第二個，並為其指定相同的顏色。
請記住，您可以使用顏色選擇器吸管來抓取該顏色。

在“文檔設置”對話框中單擊“確定”。

我在上一組步驟中所做的只是定義了啟用透明度網格時的顯示方式。因此，如果您的透明網格未啟用，請選擇查看→透明網格。

在此圖中，我選擇了帶有圖形的畫板，並且我正在針對模擬背景色預覽項目。

使用自定義透明網格預覽輸出背景顏色。

將透明效果應用於 SVG

當透明度（如 50% 不透明度）或透明度效果（如顏色加深、變暗或倍增）應用於 SVG 圖形時，這些效果保留了 SVG 的可擴展性。

該圖顯示了相同的圖形——三個半透明的橙色矩形——導出為 PNG 文件（頂部）和 SVG。當我在瀏覽器中放大 PNG 文件時，您可以看到它的質量如何下降。你看不到的是PNG文件幾乎是SVG的兩倍大。

應用透明度時將 PNG 輸出（頂部）與 SVG 進行比較

下面總結了使用 SVG 實現透明效果的優點：

• 文件大小在質量上更小。
• Web 或應用程序開發人員可以調整或編輯透明度值並分配交互性。
• 無論文件放大多少，圖像和透明度都不會降低。

順便說一句，如果您對為這組矩形生成的 SVG 代碼感到好奇，以及 Web 或應用程序開發人員使用它的難易程度，這裡是三個 SVG 框中第一個的代碼，應用 60% 的不透明度：

<=""代碼="">