UserAgent图标的SVG化尝试：从纯色到渐变与高光

最近折腾了一下 useragent 插件里的设备图标，把常见设备的 PNG 基本都替换成了 SVG。最大的感受就是：在手机、Retina 屏这类高 DPI 设备上，SVG 的显示效果确实会清晰很多，边缘不会再有明显发虚的问题。

很多图标我都是直接在 iconfont上找的，毕竟现成资源比较多。不过也有不少设备品牌根本找不到合适的图标。

本着“没有就自己造”的原则，我发挥了一下主观能动性，并把这些图标的制作和优化分成了两个方向。

纯色 SVG 图标

像荣耀（HONOR）、OPPO、vivo、三星（SAMSUNG）这类品牌，如果直接使用完整的字母 Logo，在 useragent 这种小尺寸场景下实际显示会特别小，可读性并不好。后来我换了个思路：直接参考它们官网favicon来重绘图标。这样既能保留品牌辨识度，小尺寸下看起来也更加清晰。

当然，自己做 SVG 也不一定非得从零开始。一个比较偷懒但实用的方法是：

• 先把图标保存为透明 PNG
• 再通过 PNG 转 SVG 工具进行矢量化，比如 PNG to SVG 、 PNG转SVG

虽然这种方式生成的 SVG 精度会比手工绘制稍差一点，但用在 useragent 这种尺寸很小的设备信息展示里，其实已经完全够用了。

渐变 SVG 图标

真正比较麻烦的，其实是带渐变色的图标。iconfont 也不支持上传有渐变代码的SVG图标。

很多在 iconfont 上看起来像“渐变”的图标，本质上其实是多个纯色色块拼接出来的。尺寸小的时候还好，但放大之后会发现过渡并不自然，有些甚至会出现明显的断层感。

后来想着，既然 SVG 本身支持渐变，那不如直接用代码实现。

AI 很快给了答案：使用 <defs> 配合 <linearGradient> 定义渐变。

例如：

<defs>
<linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="0%">
	<stop offset="0%" style="stop-color:#F8672C;stop-opacity:1" />
	<stop offset="50%" style="stop-color:#90C300;stop-opacity:1" />
	<stop offset="100%" style="stop-color:#0881d8;stop-opacity:1" />
</linearGradient>
</defs>

这里的 <defs> 用来存储可复用的图形元素、样式、滤镜、渐变等内容，而 <linearGradient> 则定义线性渐变。

其中：x1 y1 ：渐变起点；x2 y2 ：渐变终点

本质上，它们定义的是“渐变线”的方向。

常见方向大概如下：

然后通过 fill="url(#gradient)" 来引用对应的渐变。

其中 gradient 就是前面定义的 id，当然也可以定义多套渐变，分别用于不同路径。

Windows 11的图标

我会让左上角颜色稍微淡一点，这样会更接近官方图标的视觉效果。

<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient_win8" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4dd0fd;stop-opacity:1" />
<stop offset="50%" style="stop-color:#1e9ae4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0179d3;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M538.624 538.648h485.352V1024H538.624z m-538.6 0h485.352V1024H0.024zM538.624 0h485.352v485.352H538.624zM0.024 0h485.352v485.352H0.024z" fill="url(#gradient_win8)"></path></svg>

QQ邮箱的图标

它的图标则更有意思，渐变层次很明显，而且由 3 段路径组成，中间两块区域相对更小。所以我最后定义了两套渐变色：

• 外层使用跨度较大的渐变
• 中间区域使用颜色跨度更短的渐变

这样缩小之后，整体的颜色过渡会自然很多，不会出现“中间突然变色”的情况。

<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient_qqmail1" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#cff016;stop-opacity:1" />
<stop offset="50%" style="stop-color:#f8c30b;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff6a00;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradient_qqmail2" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#e5e412;stop-opacity:1" />
<stop offset="50%" style="stop-color:#f8c30b;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff9002;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M183.597744 1.612154l8.814462-0.049293c9.737583-0.049293 19.475167-0.067218 29.21275-0.085142l20.958434-0.089624c22.943592-0.089623 45.887185-0.138916 68.830777-0.183728L335.146445 1.146112c37.184752-0.085142 74.369504-0.147879 111.554256-0.183728 42.848951-0.044812 85.697903-0.161322 128.551335-0.34505 33.160661-0.134435 66.321322-0.201653 99.486464-0.215096 19.788848-0.008962 39.568735-0.049293 59.357583-0.161322 18.637188-0.107548 37.274375-0.125473 55.911563-0.080662 6.806898 0 13.613796-0.022406 20.425175-0.089623C873.236424-0.462628 923.927424 12.608946 970.845278 56.04493c34.464682 36.073422 53.532062 77.828967 53.715789 127.628215l0.049293 8.814462c0.049293 9.737583 0.067218 19.475167 0.085142 29.212749l0.089624 20.958434c0.089623 22.943592 0.138916 45.887185 0.183728 68.830778l0.058255 23.732278c0.085142 37.184752 0.147879 74.369504 0.183728 111.554256 0.044812 42.848951 0.161322 85.697903 0.34505 128.551335 0.134435 33.160661 0.201653 66.321322 0.215096 99.486464 0.008962 19.788848 0.049293 39.568735 0.161322 59.357583 0.107548 18.637188 0.125473 37.274375 0.080661 55.911563 0 6.806898 0.022406 13.613796 0.089624 20.425175 0.53774 62.803603-12.533834 113.494603-55.9743 160.412456-36.073422 34.464682-77.828967 53.532062-127.628214 53.71579l-8.814462 0.049293c-9.737583 0.049293-19.475167 0.067218-29.21275 0.085142l-20.958434 0.089624c-22.943592 0.089623-45.887185 0.138916-68.830777 0.183728l-23.732278 0.058255c-37.184752 0.085142-74.369504 0.147879-111.554256 0.183728-42.848951 0.044812-85.697903 0.161322-128.551335 0.34505-33.160661 0.134435-66.321322 0.201653-99.486464 0.215096-19.788848 0.008962-39.568735 0.049293-59.357583 0.161322-18.637188 0.107548-37.274375 0.125473-55.911563 0.080661-6.806898 0-13.613796 0.022406-20.425175 0.089624-62.803603 0.53774-113.494603-12.533834-160.412457-55.9743-34.464682-36.073422-53.532062-77.828967-53.715789-127.628214l-0.049293-8.814462c-0.049293-9.737583-0.067218-19.475167-0.085142-29.21275l-0.089624-20.958434c-0.089623-22.943592-0.138916-45.887185-0.183728-68.830777l-0.058255-23.732278c-0.085142-37.184752-0.147879-74.369504-0.183728-111.554256-0.044812-42.848951-0.161322-85.697903-0.34505-128.551335-0.134435-33.160661-0.201653-66.321322-0.215096-99.486464-0.008962-19.788848-0.049293-39.568735-0.161322-59.357583-0.107548-18.637188-0.125473-37.274375-0.080661-55.911563 0-6.806898-0.022406-13.613796-0.089624-20.425175C-0.538029 152.936797 12.533545 102.245797 55.96953 55.327943 92.042951 20.863262 133.798497 1.795882 183.597744 1.612154zM175.563005 295.787547c-13.905072 20.59994-12.753411 40.904123-12.838553 65.147255l-0.089623 10.960943c-0.089623 11.951281-0.138916 23.898082-0.183728 35.849363l-0.058256 12.399398c-0.089623 21.661978-0.156841 43.319474-0.197171 64.976971-0.049293 22.32071-0.206134 44.641419-0.3809 66.957648-0.120992 17.207694-0.156841 34.415389-0.170284 51.623083a3298.822549 3298.822549 0 0 1-0.156841 24.677805 2839.538433 2839.538433 0 0 0-0.07618 34.612561l-0.174766 10.190181c0.241983 24.601625 6.6635 43.386692 20.205598 64.000076 19.224221 18.287656 33.644627 22.952555 59.742964 23.033215l15.020883 0.080662 16.486226 0.013443 17.355573 0.067218c15.719946 0.058255 31.444373 0.089623 47.164318 0.107548 9.827207 0.013444 19.649932 0.031368 29.477139 0.053774 30.749791 0.058255 61.499583 0.103067 92.249374 0.120991 35.481907 0.017925 70.959333 0.098586 106.44124 0.224059 27.433725 0.103067 54.871931 0.147879 82.305657 0.15236 16.383159 0.004481 32.761837 0.031368 49.140514 0.112029 18.283175 0.089623 36.561869 0.067218 54.840563 0.035849l16.401084 0.125473c35.72389-0.058255 35.72389-0.058255 67.625343-15.164281 23.727797-25.049743 28.231373-47.724465 28.119344-81.409422l0.067217-10.983349c0.062736-11.951281 0.058255-23.898082 0.044812-35.849363l0.062736-24.991487c0.031368-17.45864 0.031368-34.912799 0.008963-52.366958-0.026887-22.329672 0.044812-44.650382 0.15236-66.975572 0.067218-17.207694 0.071699-34.415389 0.058255-51.623083 0-8.23191 0.022406-16.459339 0.067217-24.691249 0.058255-11.52557 0.026887-23.051141-0.026887-34.581192l0.103067-10.217069c-0.246464-25.211065-4.871032-47.173281-22.09217-66.715664-19.425874-14.406963-28.657085-19.636489-52.662714-19.739556l-15.231498-0.098586-16.790946-0.035849-17.619962-0.089623a18638.263157 18638.263157 0 0 0-47.944042-0.161323l-29.956624-0.080661c-31.24272-0.085142-62.48544-0.147879-93.72816-0.183728-36.059978-0.044812-72.119956-0.161322-108.179935-0.34505-27.87288-0.134435-55.74576-0.201653-83.618639-0.215096-16.647548-0.008962-33.295096-0.049293-49.938163-0.161322-18.583414-0.125473-37.162346-0.107548-55.74576-0.07618l-16.678916-0.174766c-36.723191 0.224059-53.379702 4.140601-78.599729 31.408524z" fill="url(#gradient_qqmail1)"></path><path d="M235.216346 387.65154c25.596445 14.218754 49.875427 28.186562 73.939311 44.533871l20.743338 13.931959 12.09916 8.146768A33372.754724 33372.754724 0 0 0 424.187301 509.404939c10.082633 6.748643 20.147342 13.519691 30.216532 20.286259l18.852284 12.614494 8.818943 5.946514c11.758591 7.842048 21.971178 14.151536 35.450539 18.64615a338.910917 338.910917 0 0 0 30.427147-17.888833l9.437345-6.04958c49.086741-31.672912 97.210029-64.842536 145.458791-97.765694 12.843034-8.756207 25.699512-17.485527 38.560471-26.210366l11.951282-8.187098 10.98783-7.447705 9.656922-6.587321C781.919134 392.13271 781.919134 392.13271 790.881475 392.13271v295.757246H235.216346V387.65154z" fill="url(#gradient_qqmail2)"></path><path d="M288.99039 338.358665h452.59821c-13.044687 13.044687-22.916705 21.980141-37.847965 31.81631l-11.825809 7.837567-12.659306 8.290165-13.085017 8.630735c-9.114701 6.004768-18.238364 11.996093-27.362027 17.978455-13.990214 9.177437-27.958022 18.390723-41.921349 27.612972l-26.582303 17.476565-12.686193 8.375307-11.785478 7.707613-10.360466 6.802417C526.492421 486.237288 526.492421 486.237288 513.04891 490.718459a429.076547 429.076547 0 0 1-33.259247-20.532723l-10.006453-6.632132a6160.556219 6160.556219 0 0 1-31.793904-21.285559c-6.923408-4.615606-13.846817-9.217768-20.779187-13.81993a11008.891312 11008.891312 0 0 1-40.96686-27.379951 5405.41179 5405.41179 0 0 0-40.137843-26.671926l-9.522487-6.287082a5128.565083 5128.565083 0 0 0-17.852983-11.722742A827.761796 827.761796 0 0 1 288.99039 342.839836v-4.481171z" fill="url(#gradient_qqmail2)"></path></svg>

IE的图标

IE11的图标可以理解为径向渐变，中心亮→边缘暗。

<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="gradient_ie11" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#9bf6fc;stop-opacity:1" />
<stop offset="30%" style="stop-color:#8df1fc;stop-opacity:1" />
<stop offset="100%" style="stop-color:#40bbea;stop-opacity:1" />
</radialGradient>
</defs>
<path d="M970.43 687.21c-64.64 0-129.29 0.61-193.91-0.39-18.57-0.29-29.87 4.93-41.8 20.42-53.34 69.22-124.92 96.66-209.99 76.83-82.91-19.32-134.04-73.96-153.67-157.12-2.28-9.66-2.37-19.83-3.7-31.71h32.02c198.77 0 397.53-0.27 596.29 0.43 16 0.06 23.2-3.52 26-15.55 1.51-15 2.29-30.21 2.32-45.6-0.25-44.76-6.38-88.34-18.63-130.9-14.25-48.42-36.25-93.52-64.57-133.87C890 199.46 828.04 148.4 752.31 113.79 694.54 87.77 630.45 73.3 562.96 73.3h-0.15c-0.62 0.04-1.25 0.08-1.87 0.1-195.9 9.16-336.19 101.82-419.18 279.5-12.75 27.3-19.74 57.29-29.4 86.04l5.92 3.32c57.1-75.43 125.98-137.45 205.86-186.96 1.59 1.4 3.18 2.81 4.78 4.21-5.8 6.33-11.57 12.69-17.39 19-75.79 82.08-146.93 167.75-203.84 264.37a858.76 858.76 0 0 0-5.39 9.27c2.13 53.76 13.51 105.15 32.57 152.63 0.34-0.52 0.66-1.05 1-1.57 40.01 94.38 101.75 168.59 193.2 226.2-0.32 0.13-0.63 0.25-0.95 0.38a457.524 457.524 0 0 0 44.73 23.27c4.18 0.85 8.51 2.24 13.14 4.2 129.77 54.87 270.74 45.42 387.34-13.98C869.74 893.83 946.42 811.44 988.48 711c2.78-7.03 5.52-14.62 9.08-23.8h-27.13zM556.99 280.64c108.64-6.04 202.01 69 215.87 176.43h-401.7c2.04-87.93 90.44-171.12 185.83-176.43z" fill="url(#gradient_ie11)"></path><path d="M1009.88 195.95c16.88-84.44-19.14-154.26-94.05-175.8-33.95-9.76-71.89-11.41-107.41-8.71-68.58 5.19-134.19 25.08-198.08 50.63-0.01 0-0.01 0-0.02 0.01-3.35 1.16-6.85 2.52-10.5 4.07-11.79 4.09-24.58 6.43-37 7.16h0.15c6.91 0 13.77 0.16 20.61 0.46-94.52 48.03-254.64 185.76-254.64 185.76s-146.53 144.1-226.63 292.62C49.2 644.49 11.87 742.49 1.22 849.42c-10.3 103.32 45.3 163.21 148.64 164.29 68.09 0.72 127.25-27.19 186.47-54.88 13.05-6.1 24.08-8.31 36.54-5.76a461.938 461.938 0 0 1-44.73-23.27c-40.91 16.25-74.79 33.17-110.61 43.03-65.86 18.12-123.59-23.71-131.91-91.75-6.24-51 12.3-119.14 49.26-176.3 0.33-0.52 0.67-1.03 1-1.56 235.04-422.5 584.91-572.24 606.72-593.66 3.25 1.37 6.49 2.78 9.7 4.23a492.96 492.96 0 0 0-9.63-4.29c40.12-35.95 142.38-49.37 188.24-25.34 40.36 21.14 60.42 68.13 49.68 121.07-5.6 27.59-14.28 54.57-23.37 88.58a579.372 579.372 0 0 0-16.45-24.04c28.32 40.36 50.32 85.46 64.57 133.87-6.28-21.8-14.15-43.33-23.67-64.62-4.62-10.32-4.71-24.68-1.91-35.93 8.96-36 22.87-70.88 30.12-107.14z" fill="#ffc124"></path></svg>

IE8的图标，他的扩展不是从中心发散的，有一些偏下，类似椭圆。椭圆渐变在 SVG 中没有直接的 <ellipseGradient> 标签，需要用 radialGradient + gradientUnits="objectBoundingBox" 配合不同的 rx/ry 来实现，或者通过 gradientTransform 拉伸。

<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="gradient_ie8" cx="50%" cy="50%" r="70%" gradientUnits="objectBoundingBox" gradientTransform="scale(1, 1.5)">
<stop offset="0%" style="stop-color:#82e5fa;stop-opacity:1" />
<stop offset="20%" style="stop-color:#39bbf5;stop-opacity:1" />
<stop offset="70%" style="stop-color:#005cb0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#003269;stop-opacity:1" />
</radialGradient>
</defs>
<path d="M970.43 687.21c-64.64 0-129.29 0.61-193.91-0.39-18.57-0.29-29.87 4.93-41.8 20.42-53.34 69.22-124.92 96.66-209.99 76.83-82.91-19.32-134.04-73.96-153.67-157.12-2.28-9.66-2.37-19.83-3.7-31.71h32.02c198.77 0 397.53-0.27 596.29 0.43 16 0.06 23.2-3.52 26-15.55 1.51-15 2.29-30.21 2.32-45.6-0.25-44.76-6.38-88.34-18.63-130.9-14.25-48.42-36.25-93.52-64.57-133.87C890 199.46 828.04 148.4 752.31 113.79 694.54 87.77 630.45 73.3 562.96 73.3h-0.15c-0.62 0.04-1.25 0.08-1.87 0.1-195.9 9.16-336.19 101.82-419.18 279.5-12.75 27.3-19.74 57.29-29.4 86.04l5.92 3.32c57.1-75.43 125.98-137.45 205.86-186.96 1.59 1.4 3.18 2.81 4.78 4.21-5.8 6.33-11.57 12.69-17.39 19-75.79 82.08-146.93 167.75-203.84 264.37a858.76 858.76 0 0 0-5.39 9.27c2.13 53.76 13.51 105.15 32.57 152.63 0.34-0.52 0.66-1.05 1-1.57 40.01 94.38 101.75 168.59 193.2 226.2-0.32 0.13-0.63 0.25-0.95 0.38a457.524 457.524 0 0 0 44.73 23.27c4.18 0.85 8.51 2.24 13.14 4.2 129.77 54.87 270.74 45.42 387.34-13.98C869.74 893.83 946.42 811.44 988.48 711c2.78-7.03 5.52-14.62 9.08-23.8h-27.13zM556.99 280.64c108.64-6.04 202.01 69 215.87 176.43h-401.7c2.04-87.93 90.44-171.12 185.83-176.43z" fill="url(#gradient_ie8)"></path><path d="M1009.88 195.95c16.88-84.44-19.14-154.26-94.05-175.8-33.95-9.76-71.89-11.41-107.41-8.71-68.58 5.19-134.19 25.08-198.08 50.63-0.01 0-0.01 0-0.02 0.01-3.35 1.16-6.85 2.52-10.5 4.07-11.79 4.09-24.58 6.43-37 7.16h0.15c6.91 0 13.77 0.16 20.61 0.46-94.52 48.03-254.64 185.76-254.64 185.76s-146.53 144.1-226.63 292.62C49.2 644.49 11.87 742.49 1.22 849.42c-10.3 103.32 45.3 163.21 148.64 164.29 68.09 0.72 127.25-27.19 186.47-54.88 13.05-6.1 24.08-8.31 36.54-5.76a461.938 461.938 0 0 1-44.73-23.27c-40.91 16.25-74.79 33.17-110.61 43.03-65.86 18.12-123.59-23.71-131.91-91.75-6.24-51 12.3-119.14 49.26-176.3 0.33-0.52 0.67-1.03 1-1.56 235.04-422.5 584.91-572.24 606.72-593.66 3.25 1.37 6.49 2.78 9.7 4.23a492.96 492.96 0 0 0-9.63-4.29c40.12-35.95 142.38-49.37 188.24-25.34 40.36 21.14 60.42 68.13 49.68 121.07-5.6 27.59-14.28 54.57-23.37 88.58a579.372 579.372 0 0 0-16.45-24.04c28.32 40.36 50.32 85.46 64.57 133.87-6.28-21.8-14.15-43.33-23.67-64.62-4.62-10.32-4.71-24.68-1.91-35.93 8.96-36 22.87-70.88 30.12-107.14z" fill="#f5bc22"></path></svg>

联想的图标

它是一个比较典型的案例，favicon 本身带有高光效果，而这个高光并不是简单的“左上到右下”线性渐变。

一开始我直接用：x1="0%" y1="0%" x2="100%" y2="100%"

虽然方向对了，但高光位置始终不自然。后来才发现，需要配合 gradientUnits="userSpaceOnUse" 来使用真实坐标系控制渐变位置。

当时我的 SVG 视窗定义是 viewBox="0 0 1024 1024"。在实际调试中，我靠着感觉硬调出了一组参数：x1="0%" y1="0%" x2="500" y2="1250"。视觉效果虽然完美对齐了，但具体怎么计算出来的，当时我脑子里也没什么头绪。

<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient_lenovo" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="500" y2="1250">
<stop offset="0%" style="stop-color:#ec9796;stop-opacity:1" />
<stop offset="50%" style="stop-color:#e65752;stop-opacity:1" />
<stop offset="51%" style="stop-color:#e2231b;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e2231b;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M0 0h1024v1024H0V0z m312 208v576h400v-108h-280V208H312z" fill="url(#gradient_lenovo)"></path></svg>

理论上来说，x2 和 y2 似乎应该和 viewBox 有一定关系，但实际调的时候我发现并没有一个特别固定的公式。

尤其是一些带高光、拟物感或者品牌特殊视觉风格的 Logo，很难单纯通过数学计算直接得出“正确答案”，最后往往还是需要靠肉眼慢慢调整。

不过也正因为这样，SVG 渐变其实比想象中灵活很多。

以前总觉得 SVG 只是“矢量图”，真正折腾之后才发现，它更像是一套完整的绘图语言。很多过去只能在 PS 里做的效果，现在直接写代码也能实现，而且还能无限缩放、不失真。

对于 useragent 这种本身图标尺寸很小、但显示场景又特别多的插件来说，SVG 确实是个很合适的方案。