网页 SVG 文字路径：无障碍与性能指南

把文字转换为 SVG path 解决的是一个具体交付问题：外观不再依赖字体文件。它不会自动改善无障碍、性能、响应式或搜索可见性。

轮廓文字应被当作图形资产。下面说明何时值得交换，以及如何在网页或 React 项目中负责任地交付结果。

1. 先判断文字是否应该变成图形

以下情况应保留 HTML 文字：

• 用户需要阅读标题或段落；
• 需要选择和复制；
• 界面会本地化；
• 内容需要被搜索；
• 用户会通过辅助设置放大文字；
• 内容频繁更新；
• 用户要输入或编辑。

以下情况适合转路径：

• Logo 或字标；
• 固定活动组合；
• 装饰徽章；
• 插画中的固定标签；
• 无法交付字体的设计交接；
• 明确操作路径的动画。

区别不在技术，而在语义。产品标题是内容，字标是图像，即使两者都显示字母。

2. 保留可访问名称

路径数据没有可读词值。屏幕阅读器无法从一串坐标推断它拼成品牌名。

有意义的 SVG 可使用：

• 内联 SVG 的 aria-label；
• 由 aria-labelledby 引用的 <title>；
• 图形旁边的可见 HTML；
• 通过图片元素加载时的 alt 文本。

如果相同文字已在附近可见，而 SVG 只是装饰，应使用 aria-hidden="true" 隐藏重复。不要在没有评估的情况下同时提供完整标签和完全相同的相邻文字，应检查真实无障碍树或屏幕阅读器输出。

3. 让语义内容留在装饰路径之外

首屏可以显示轮廓化活动短语，但页面仍应有真实标题来描述内容。

各层职责：

• HTML 承载结构与含义；
• CSS 控制布局；
• SVG 提供固定图形；
• 可访问命名连接视觉资产与用途。

不要为了补偿路径文字而隐藏堆满关键词的 HTML。可见的语义标题应真实代表页面，否则既影响用户，也会制造欺骗体验。

4. 必须保留 viewBox

viewBox 定义内部坐标并允许响应式缩放。可复用资产应：

• 保留 viewBox；
• 移除意外空白；
• 不裁切伸出笔画；
• 不独立拉伸宽高；
• 用 CSS 调整外层尺寸；
• 不需要基线空隙时使用 display: block。

紧凑不等于贴到裁切边缘，还要容纳抗锯齿、斜体伸出和有意描边。必须在窄移动容器、高像素密度与浏览器缩放下测试。

5. 使用 currentColor 支持主题

单色 Logo 如果固定黑色 fill，会为深浅主题制造重复文件。内联 SVG 可把 fill 改为 currentColor，让组件继承 CSS color。

适用于导航字标、图标式 Logo、按钮徽章、禁用状态和深色模式。不适用于必须保持固定多色关系的资产；这类文件应保留设计令牌或固定值，并写清规则。

6. 控制路径复杂度

每个字母都会增加命令和节点。长字符串、复杂文字、高曲线精度与逐字输出都可能形成大型文件。

检查：

• 原始 SVG 大小；
• 压缩传输大小；
• path 元素数量；
• 节点与命令数量；
• 是否重复字符；
• 同一页面是否渲染大量副本。

只有在目标尺寸产生可见改善时，高贝塞尔精度才有价值。多余节点增加解析、内存和编辑成本。大量重复界面文字通常应使用网页字体，而不是每个标签都生成单独 SVG。路径适合少量固定资产。

7. 有意识地选择内联或外部文件

内联 SVG 便于使用 currentColor、CSS、直接动画、组件 props 和同 DOM 可访问标题。外部 SVG 图片便于跨页面缓存、缩小 HTML、简化安全边界和避免重复路径。

没有通用答案。小型主题化 Logo 往往适合内联；多个页面重复的大型装饰字图可能更适合外部缓存。应测量真实页面，而不是按习惯优化。

8. 不要默认拆分每个字符

只有每个字母需要独立动画、改色或移动时，分离路径才有意义。否则会增加 DOM 节点与不一致变换机会。

静态资产应：

• 优先一个组合视觉单元；
• 删除未引用 ID；
• 移除编辑器元数据；
• 简化 transform；
• 避免多层空 group。

动效只隔离真正移动的元素。整词可以淡入、遮罩、裁切或移动，无需拆成二十个字符。

9. 防止布局偏移

SVG 可缩放，但浏览器仍要在布局前知道宽高比。提供与 viewBox 比例一致的 width/height、CSS aspect-ratio 或组件固定布局尺寸，再在保留空间内响应式缩放。

外部文件如果没有尺寸，尤其容易造成布局偏移。

10. 测试失败路径

生产检查包括：

1. 深浅主题；
2. 200% 浏览器缩放；
3. 高对比或强制颜色模式；
4. CSS 缺失；
5. 外部文件慢网；
6. 移动端宽度；
7. 支持时的 RTL 布局；
8. 无障碍树；
9. 打印与 PDF；
10. 外部 SVG 的 CSP 规则。

路径资产应可预测地失败。装饰 SVG 缺失只是视觉损失，语义标题缺失则是内容失败。

React 交付清单

• 转路径有明确理由，文字确实是固定图形；
• 原文与字体设置可追溯；
• viewBox 存在且不裁切；
• 组件有正确可访问名称；
• 重复装饰已隐藏；
• 改色行为明确；
• 宽高比预留布局空间；
• 路径复杂度与视觉收益相称；
• 不在页面内重复内联数百次；
• 主题、缩放、移动端和无障碍检查通过。

SVG 文字路径的价值正是冻结外观。只在固定外观真正重要时使用它；只要文字仍需像内容一样工作，就保留真实、有语义的文字。