2022-6-14 博博
SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 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. 服务器资源的节约
更少图标资源，更小压缩包，更少空间和宽带的占用。
采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。
工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
