【妙啊~】 SVG圖標的高級用法！
點擊 ▲ 三分設 關注，和 6 萬設計師一起學習進步
知識庫 2022 · 第 161 篇
前言
SVG格式圖標在軟件界面中有廣泛應用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現非常完美。SVG是一個基于XML標記語言的開放網絡標準格式，擁有跨設備多平臺的兼容效果。前面我們有分享過一篇關于WPS圖標的文章《探索WPS 3000個圖標設計背后的故事》，得到了很多網友的積極反饋。相信界面設計的小伙伴們都很熟悉SVG格式了，這次，我有一個棒的想法想分享給大家：利用SVG圖標套色，來完成不同界面的適配。
什么是SVG圖標套色？
圖標套色的簡單來說就是利用SVG格式的文本屬性，使用XML格式標準，在SVG文檔中增加CSS樣式，通過修改CSS樣式屬性，精準控制SVG格式圖標顏色，通過修改透明度控制圖形顯示與否，從而變換圖標的風格外觀。
▲ 基本原理：修改SVG的樣式，生成不同風格的圖標
用處一：顏色適配
這里有幾個插件，都用到了“保存”、“打印”這些功能。因為主題色不同，即使是同樣外形的圖標，還是需要根據主題色的不同輸出適配各個插件的圖標。采用圖標套色的方法，就可以避免這類圖標資源的重復輸出。
▲ 相同功能需要兩套不同主題色的圖標
用處二：皮膚適配
現在多數軟件一般都有皮膚功能，不同用戶需求，衍生出風格各異的皮膚，各種顏色，深淺不一，一套圖標滿足不了所有，為了視覺效果需要對每個皮膚輸出特定顏色、風格的圖標。圖標數量如果很多，投入的成本將隨皮膚數量呈幾何倍增加，圖標套色就可以很好的解決這類問題，只需要通過修改圖標顏色和風格即可適配。
▲ 通過修改映射配置，可以得到不同顏色的圖標
套色方法
我們先看看圖標套色之后的效果：
▲ 修改映射配置，可以得到線、面不同風格的圖標
簡單來說，實現這種效果有下方五個步驟:
▲ 套色方法五個步驟
以下方幾個圖標來做示例：
▲ SVG示例圖標
第一步，確定圖標線、面風格
設計師將圖標線、面風格確定下來，并保證兩者效果上可以兼容，即輪廓一致。
▲ 同時兼容線、面兩種風格效果
第二步，定義圖標顏色
在確定了圖標的風格之后，將圖標中用到的7種顏色，根據一深一淺再拆分為14種（具體幾種顏色可根據圖標設計需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。
▲ 根據線、面風格需要，定義圖標的顏色
第三步，給顏色定義樣式名
給14種顏色，分別定義好CSS樣式名（樣式名遵循CSS規(guī)則即可）。
▲ 給顏色定義樣式名
第四步，給SVG圖標添加CSS內部樣式
SVG格式圖標默認是沒有CSS樣式，需要手動將CSS內部樣式添加到SVG文檔中，并將SVG路徑顏色與CSS樣式名關聯起來。
▲ 給SVG添加CSS樣式
第五步，樣式屬性配置機制
添加內部樣式之后，需要開發(fā)小哥哥在軟件中增加對SVG圖標CSS樣式屬性的映射機制。修改映射機制配置文件中CSS樣式屬性，就可以控制圖標風格變化。
▲ 修改配置代碼即可改變圖標顏色
完成了以上五個步驟，通過修改軟件中的映射機制配置文件，就可以改變圖標風格。
應用案例
了解了步驟方法，我們以WPS為例來講解圖標套色在實際案例中的應用：
案例一：前面有提到我們的四大組件，WPS由文字、表格、演示、PDF四組件組成。每個組件都有各自的主題色，文字主題色為藍色，表格綠色，演示橘黃色，PDF紅色。多數圖標都含有主題色，但外形是一樣的，因各組件主題色不同而導致了很多圖標的重復輸出。
套色用處之一的顏色適配，可以讓圖標變色以適應不同的組件色，避免圖標的重復。
▲ 不同主題色圖標的變換效果
案例二：WPS有推出多個風格各異的皮膚，因為圖標數量的關系，無法每個皮膚都輸出一套圖標，目前只能使用默認的線性圖標。也因時間和維護成本而導致圖標風格的單一。
套色用處之二的皮膚適配，能使圖標改變風格以適應不同的皮膚，既能滿足圖標風格多樣，又能滿足時間和維護成本的可控。
▲ 不同風格圖標的變換效果
案例三：深色模式的配色與淺色模式大相徑庭，圖標使用的顏色也截然不同，適配需要輸出兩套圖標資源，因不同深淺色模式而導致的圖標資源重復輸出。WPS組件功能區(qū)的圖標有幾千個，輸出和維護都很費精力。
套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標顏色以適應不同的深淺色模式，避免圖標的重復輸出。
▲ 深淺色模式下圖標的變換效果
總結
通過以上的案例不難發(fā)現，SVG圖標套色技術的價值，主要有以下幾個方面：
1. 時間和維護成本的降低
利用圖標套色方法，設計師只需要輸出一套圖標資源，就完成了多組件、多風格、深淺色模式適配。開發(fā)小哥哥也可以刪掉適配用的冗余代碼，提升了圖標的管理和軟件運行效率；
2. 個性化需求的滿足
后期可以增加自定義擴展，讓用戶配置圖標風格，更好地滿足個性化需求；
3. 服務器資源的節(jié)約
更少圖標資源，更小壓縮包，更少空間和寬帶的占用。
采用新技術，幫助設計、開發(fā)更好地完成多場景適配，降低了整體流程的執(zhí)行難度，為項目節(jié)省了大量時間，避免過多精力投入在重復工作中，為最終完成目標創(chuàng)造了有利條件。同時也解放了生產力，有了更多的時間可以去關注高價值的項目。
工作中經常能遇到重復的內容，這都有提升和優(yōu)化的空間，尋找更高效的方法，讓工作變得輕松簡單。
記得關注我們，下次還有更多好玩、有趣的內容分享給你～
虛擬校園產品的用戶體驗升級 OOUX一個面向對象的體驗設計思維 2022 年 UXUI 設計趨勢 欺騙、迷惑、拖延...五宗罪：用戶體驗的陰暗模式 設計師們應該多玩電子游戲，游戲化設計背后的極致體驗 為數字項目制定用戶體驗策略的 6 個實用工具！ 符號學分析導論，圖標構建的 3 大要素 在校的學弟學妹們，想要進大廠實習， 請務必提前準備！ Google 最新的設計語言 MATERIAL YOU 來了，7 年以來最大更新 解密設計系統的 11 大優(yōu)點，終于可以說服你的管理層