前言

SVG 格式圖標在軟件界面中有廣泛應用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現非常完美。SVG 是一個基于 XML 標記語言的開放網絡標準格式，擁有跨設備多平臺的兼容效果。前面我們有分享過一篇關于 WPS 圖標的文章《探索 WPS 3000 個圖標設計背后的故事》，得到了很多網友的積極反饋。相信界面設計的小伙伴們都很熟悉 SVG 格式了，這次，我有一個棒的想法想分享給大家：利用 SVG 圖標套色，來完成不同界面的適配。

什么是 SVG 圖標套色？

圖標套色的簡單來說就是利用 SVG 格式的文本屬性，使用 XML 格式標準，在 SVG 文檔中增加 CSS 樣式，通過修改 CSS 樣式屬性，精準控制 SVG 格式圖標顏色，通過修改透明度控制圖形顯示與否，從而變換圖標的風格外觀。

基本原理：修改 SVG 的樣式，生成不同風格的圖標

用處一：顏色適配

這里有幾個插件，都用到了“保存”、“打印”這些功能。因為主題色不同，即使是同樣外形的圖標，還是需要根據主題色的不同輸出適配各個插件的圖標。采用圖標套色的方法，就可以避免這類圖標資源的重復輸出。

相同功能需要兩套不同主題色的圖標

用處二：皮膚適配

現在多數軟件一般都有皮膚功能，不同用戶需求，衍生出風格各異的皮膚，各種顏色，深淺不一，一套圖標滿足不了所有，為了視覺效果需要對每個皮膚輸出特定顏色、風格的圖標。圖標數量如果很多，投入的成本將隨皮膚數量呈幾何倍增加，圖標套色就可以很好的解決這類問題，只需要通過修改圖標顏色和風格即可適配。

通過修改映射配置，可以得到不同顏色的圖標

套色方法

我們先看看圖標套色之后的效果：

修改映射配置，可以得到線、面不同風格的圖標

簡單來說，實現這種效果有下方五個步驟:

套色方法五個步驟

以下方幾個圖標來做示例：

SVG 示例圖標

第一步，確定圖標線、面風格

設計師將圖標線、面風格確定下來，并保證兩者效果上可以兼容，即輪廓一致。

同時兼容線、面兩種風格效果

第二步，定義圖標顏色

在確定了圖標的風格之后，將圖標中用到的 7 種顏色，根據一深一淺再拆分為 14 種（具體幾種顏色可根據圖標設計需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。

根據線、面風格需要，定義圖標的顏色

第三步，給顏色定義樣式名

給 14 種顏色，分別定義好 CSS 樣式名（樣式名遵循 CSS 規則即可）。

給顏色定義樣式名

第四步，給 SVG 圖標添加 CSS 內部樣式

SVG 格式圖標默認是沒有 CSS 樣式，需要手動將 CSS 內部樣式添加到 SVG 文檔中，并將 SVG 路徑顏色與 CSS 樣式名關聯起來。

給 SVG 添加 CSS 樣式

第五步，樣式屬性配置機制

添加內部樣式之后，需要開發小哥哥在軟件中增加對 SVG 圖標 CSS 樣式屬性的映射機制。修改映射機制配置文件中 CSS 樣式屬性，就可以控制圖標風格變化。

修改配置代碼即可改變圖標顏色

完成了以上五個步驟，通過修改軟件中的映射機制配置文件，就可以改變圖標風格。

應用案例

了解了步驟方法，我們以 WPS 為例來講解圖標套色在實際案例中的應用：

案例一：前面有提到我們的四大組件，WPS 由文字、表格、演示、PDF 四組件組成。每個組件都有各自的主題色，文字主題色為藍色，表格綠色，演示橘黃色，PDF 紅色。多數圖標都含有主題色，但外形是一樣的，因各組件主題色不同而導致了很多圖標的重復輸出。

套色用處之一的顏色適配，可以讓圖標變色以適應不同的組件色，避免圖標的重復。

不同主題色圖標的變換效果

案例二：WPS 有推出多個風格各異的皮膚，因為圖標數量的關系，無法每個皮膚都輸出一套圖標，目前只能使用默認的線性圖標。也因時間和維護成本而導致圖標風格的單一。

套色用處之二的皮膚適配，能使圖標改變風格以適應不同的皮膚，既能滿足圖標風格多樣，又能滿足時間和維護成本的可控。

不同風格圖標的變換效果

案例三：深色模式的配色與淺色模式大相徑庭，圖標使用的顏色也截然不同，適配需要輸出兩套圖標資源，因不同深淺色模式而導致的圖標資源重復輸出。WPS 組件功能區的圖標有幾千個，輸出和維護都很費精力。

套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標顏色以適應不同的深淺色模式，避免圖標的重復輸出。

深淺色模式下圖標的變換效果

總結

通過以上的案例不難發現，SVG 圖標套色技術的價值，主要有以下幾個方面：

1. 時間和維護成本的降低

利用圖標套色方法，設計師只需要輸出一套圖標資源，就完成了多組件、多風格、深淺色模式適配。開發小哥哥也可以刪掉適配用的冗余代碼，提升了圖標的管理和軟件運行效率；

2. 個性化需求的滿足

后期可以增加自定義擴展，讓用戶配置圖標風格，更好地滿足個性化需求；

3. 服務器資源的節約

更少圖標資源，更小壓縮包，更少空間和寬帶的占用。

采用新技術，幫助設計、開發更好地完成多場景適配，降低了整體流程的執行難度，為項目節省了大量時間，避免過多精力投入在重復工作中，為最終完成目標創造了有利條件。同時也解放了生產力，有了更多的時間可以去關注高價值的項目。

工作中經常能遇到重復的內容，這都有提升和優化的空間，尋找更高效的方法，讓工作變得輕松簡單。

作者：金山辦公CED

轉載請注明：優設網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南

圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格

圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！

圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！

圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！

圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！

圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？

圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范

圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考

圖標定制設計之十：這6種類型的菜單圖標和用法，這篇全總結了！