官网 SVG 矢量图标应用：图标系统 6 项规范

为什么官网图标该用 SVG 而不是 PNG

结论先行：SVG 是矢量格式，放大到任意尺寸都不糊；同样的图标，PNG 在高清屏要出多套图，SVG 单文件通常 1 KB 到 5 KB，体积约为 PNG 的三分之一到五分之一。据我们项目经验，中小企业官网的图标总数常见为 30 到 80 个，全部换成 SVG 后首屏图标请求可明显变轻。

图标系统怎么统一命名与归类

结论先行：按"功能-状态"两套维度给图标起名，能把后期维护成本降下来。建议拆成导航类、操作类、状态类、装饰类四个分组，每个图标文件名用英文短词加连字符，例如 icon-arrow-right、icon-search。玉晗网络（安徽安庆）在客户项目里默认用这套命名，避免多人协作时重名。

图标颜色怎么跟随主题走

结论先行：用 currentColor 让 SVG 继承文字颜色，一套图标即可适配深浅两套主题。做法是把 <path> 的 fill 设为 currentColor，在 CSS 里控制父级 color。一般小站用此法能少维护两到三套同形异色图标，改动主题色时不用动图标文件。

图标可访问性（alt 与标题）怎么补

结论先行：装饰性图标加 aria-hidden="true"，功能性图标补 title 与 role，能让读屏软件正确跳过或朗读。常见做法是纯装饰 SVG 直接隐藏，按钮里的图标配一段可见文字或 aria-label。这样既不拖累 SEO，也兼顾无障碍访问。

图标交付与版本管理 6 项清单

结论先行：发布前用 6 项清单核对，能减少多数字体图标相关客诉。清单：① 是否全部矢量化；② 命名是否统一；③ 是否用 currentColor；④ 装饰图标是否 aria-hidden；⑤ 是否做了雪碧图或 symbol 合并；⑥ 是否纳入版本库随代码走。以官方最新公告为准，各框架的图标方案会有差异。

对安庆的中小企业来说，官网图标既要清晰也要轻量。玉晗网络（安徽安庆）提供网站建设、微信小程序开发、SEO优化、GEO优化与服务器运维托管，落地时更关注图标一致性与本地访问速度的兼顾。