从需求到生产 SVG：完整文字 Logo 工作流

文字 Logo 很容易开始，也很容易在“能下载”时过早结束。选择字体并导出，只能证明文件是合法 SVG，不能证明它能经受小尺寸导航栏、深色主题、Figma 交接或实体标识。

下面使用虚构产品名 Northline 做完整示例。名称是为了公开讨论而创建的，不代表真实客户；其中的检查方法可以直接复用到实际项目。

目标是建立一个主字标，同时支持：

• 120–180 像素宽的网站导航；
• 能继承颜色的 React 组件；
• 高分辨率演示文稿；
• 约 80 毫米宽的刻字膜测试；
• 不要求接收方安装字体的设计交付。

1. 把模糊需求改成可验证约束

“做得现代一点”不是生产约束。打开生成器前，先把需求变成可以通过或失败的检查项。

Northline 的约束是：

1. 宽度低于 140 像素时仍可读。
2. 轮廓安静、技术化，不偏 playful。
3. o、e 与小写 h 的内部空间不能堵塞。
4. 单色也能成立。
5. 不能依赖描边来保证可读性。
6. 开发团队无需编辑路径即可改色。

这些条件会排除脆弱手写体和高对比衬线，也说明超细字重不是可靠起点。

2. 必须用真实名称比较字体

不要只用 Text To SVG 或字体样张决定方案。输入真实名称，逐对观察字母关系。

本例比较 Inter、Roboto、Montserrat 与 Open Sans：

• Inter 紧凑，像数字产品；
• Roboto 中性、熟悉；
• Montserrat 展示感更强，但占用宽度更多；
• Open Sans 友好易读，较宽节奏却让导航约束更难满足。

最终以 Inter 700 作为工作方向。不是因为 Inter 永远“最适合 Logo”，而是它用更少修正满足了这次约束。

3. 转路径前完成基础间距判断

间距必须在预期显示尺寸判断，不能只看大型编辑画布。

先开启字偶距，把字符距保持为零，再把预览缩到约 140 像素宽。Northline 的 thl 过渡略紧，line 相对开放。极小的统一调整可能有帮助，但大幅增加字符距会让整个词碎裂。

工作设置如下：

设置	数值	原因
字体	Inter	紧凑的产品气质
字重	700	小导航中仍稳定
字偶距	开启	保留字体内置字对关系
字符距	0	避免人工空洞
连字	开启	对当前词组安全
填充	实色	简化资产
描边	关闭	避免重叠与缩放问题
曲线精度	中	兼顾轮廓与节点数量

如果后续需要个别字对校正，可在矢量工具中调整。不要用一个全局 tracking 数值解决所有光学问题。

4. 导出一个主 SVG，而不是五个“最终版”

主文件应保留设计并方便适配。导出时确认：

• viewBox 紧贴图形且不裁切；
• 使用填充路径；
• 没有背景矩形；
• 没有无必要描边；
• 不包含位图；
• 没有可以直接合并的多余变换；
• 整个词保持一个视觉单元。

下载实际生成的轮廓样本

下载 Northline SVG 样本。文件使用 Inter 700、96 px 字号、开启字偶距和标准连字、黑色填充且无描边生成。保存的 SVG 含 1 个 path 元素，viewBox 为 439.047 × 120.156。你可以在浏览器或矢量软件中打开文件检查真实轮廓。它仍是设计演示，下文提出的网页最小尺寸和 80 mm 贴膜测试尚未记录为通过。

在文件旁记录字体、来源、字重、生成设置与日期。转成路径后，SVG 不再保留可编辑文字，这份小记录能避免未来猜测。

建议命名为 northline-wordmark-master.svg。比起 logo-final-final-2.svg，明确用途更可靠。

5. 用三个缩放层级检查路径

正常观看尺寸

判断是否一眼可读、间距是否均匀，并测试深浅背景。某个字腔只在其中一种背景消失，仍然属于问题。

最小真实尺寸

分别以 120、140、180 像素宽渲染。不要只缩放浏览器，要设置真实 CSS 宽度，重点检查 o、e 和紧连接。

高倍节点视图

检查：

• 意外自交；
• 重复轮廓；
• 曲线连接尖刺；
• 异常密集节点；
• 超出 viewBox 的形状；
• 边缘抗锯齿被裁切。

节点更多不等于质量更高，目标只是用足够几何准确表达形状。

6. 让 React 版本支持主题

单色组件最实用的改动通常是把固定 fill 替换为 currentColor。组件应：

• 接受 className；
• 保留 viewBox；
• 品牌名只由 SVG 表达时使用 aria-label="Northline"；
• 同样名称已作为可见文字出现时才使用 aria-hidden="true"；
• 除非设计系统要求，不固定宽高。

路径是视觉图形，不是语义文字。转轮廓解决的是字体交付，不是无障碍。

7. 准备设计交付包

交给设计师的内容包括：

1. 主 SVG；
2. 用于快速识别的预览 PNG；
3. 字体与字重记录；
4. 已测试最小宽度；
5. 允许使用的颜色规则；
6. 禁止非等比拉伸的说明。

在 Figma 导入后，确认边界与浏览器预览一致。如果工具改变 frame，应修复 frame，不要横向或纵向拉伸路径。

8. 实体测试后再称为“生产可用”

把刻字膜版本设为 80 毫米宽，结合刀具与材料容差检查最小内部空间。先切一个样品，不要直接做整批。

实体测试会回答显示器无法回答的问题：

• 小字腔是否容易揭膜；
• 窄连接是否翘起；
• 材料是否让字重看起来更粗；
• 目标观看距离下是否易读。

如果失败，应回到字重、尺寸或间距，而不是不断加描边直到字形失真。

最终复检清单

• 使用真实名称而非样张；
• 最小数字尺寸仍可读；
• viewBox 没有裁切；
• 填充与改色规则已记录；
• 代码中有正确可访问名称；
• 接收方无需字体也能显示；
• 字体来源和字重可追溯；
• 实体用途已按真实尺寸测试；
• 只有一个明确主版本。

核心结论是：转换只是工作流的一步。间距、几何、无障碍、集成方式和最终目的全部通过检查后，才算真正完成生产 SVG。