SVG 颜色与渐变：fill、stroke 和 gradient

三个基本属性

fill 填充色、stroke 描边色、stroke-width 描边粗细。颜色可以写十六进制（#2563eb）、rgb()，也可以写 none 表示不要填充/描边——线型图标就是 fill="none" + 统一 stroke 画出来的。

currentColor：一处改色，全图跟随

把图标的 stroke 或 fill 写成 currentColor，图标颜色就跟随 CSS 的 color 值。按钮变色、深色模式切换时图标自动跟着变，网站上用图标最推荐这个写法。

<svg viewBox="0 0 24 24" stroke="currentColor" fill="none">…</svg>

线性渐变 linearGradient

<defs>
  <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0" stop-color="#38bdf8"/>
    <stop offset="1" stop-color="#2563eb"/>
  </linearGradient>
</defs>
<rect width="100" height="100" fill="url(#g1)"/>

先在 <defs> 里定义渐变，给个 id，形状上用 fill="url(#g1)" 引用。x1/y1→x2/y2 决定方向，对角线渐变最常用。

径向渐变 radialGradient

写法同上，把标签换成 radialGradient 即可，颜色从圆心向外扩散，适合做光晕、球体高光。在编辑器的填充面板里也能直接给形状选渐变，先动手试比看代码快。