多语言站的图表处理：内嵌 SVG、图片本地化与翻译边界
一、页面翻完了图没翻，这是多语言站最常见的半成品
多语言站上线后最容易被客户看出来的问题，不是语法，是图。英文页面里嵌着几张写着中文的流程图，客户一眼就看出这是”翻译版”。
四种半成品形态的频率与代价不一样：
| 页面部位 | 只翻文字后的效果 | 买家的直接感受 | 出现频率 |
|---|---|---|---|
| 正文插图含中文标签 | 标签看不懂，靠猜上下文 | 内容不完整 | 最高 |
| 流程图与拓扑图 | 整张图变成谜题 | 怀疑站点是临时拼的 | 高 |
| 产品参数示意图 | 单位与刻度读不了 | 不敢按图选型 | 中 |
更隐蔽的问题是：图片里的文字搜索引擎读不到，AI 也读不到。一张图若承载了只有图才讲清的三层结构，这三层信息在任何机器看来都不存在。图表本地化因此同时解决两件事——人看得懂，机器抓得到。
这套判断什么时候不适用： 站点只有中英两种语言、英文访客主要来自老客户和经销渠道时，图的优先级可以排在产品页与认证页之后。反过来，英文站要承接陌生客户的搜索流量，图里的中文标签就是硬伤。
二、图上文字为什么难处理：四种方案的成本对照
位图里的文字改不动，这是所有麻烦的起点：文字已被压成像素，要改只能回到设计源文件重做。
位图方案有三个具体的麻烦：
| 麻烦 | 原因 | 代价 |
|---|---|---|
| 改不动字 | 文字已成像素 | 每改一处都要回到设计源文件 |
| 体积翻倍 | 一种语言一份文件 | 图库文件数等于图数乘语言数 |
| 版本失同步 | 中英两版各自维护 | 中文版改了参数，英文版还是旧数字 |
四种处理方案的取舍如下，这张表基本能定掉八成的决策：
| 方案 | 做法 | 一次性成本 | 长期维护 | 适用情况 |
|---|---|---|---|---|
| 位图译本 | 每种语言导出一份图 | 中，等于重做一遍 | 高，每改一次重做一次 | 信息复杂、术语密集的图 |
| 内嵌 SVG 双语 | 一张图挂两套文本，按语言显隐 | 高，需要开发配合 | 低，改一处即全语言生效 | 结构图、流程图、表格式图卡 |
| 图内文字外置 | 图只画结构，文字用页面文字承载 | 中，需要重新排版 | 低 | 简单示意图、箭头图 |
| 不做处理 | 保持原图 | 零 | 零 | 装饰图、纯实物照片 |
选方案的判断线只有一条：这张图之后会不会改。预计两年内不会改的复杂信息图，直接做两套位图最省心；只要还会改参数、改流程、改名称，就走内嵌 SVG 或文字外置。纯实物照片属于第四种，本来没有文字要处理，不必在这类图上花预算。
三、内嵌 SVG 双语共存：一张图挂两套文本
内嵌 SVG 的好处是文字仍是文字，不是像素。同一张图里放中英两套文本，由页面语言决定显示哪一套，不必维护两份文件。
| 实现要点 | 做法 | 为什么这样定 |
|---|---|---|
| 两套文本同源 | 中英文本在同一张图里成对出现 | 改一处即可，不会漏改另一语言 |
| 按语言显隐 | 页面根元素带当前语言标识，两套文本各挂对应标识，由样式控制显示与隐藏 | 不需要为每种语言生成新文件 |
| 整块禁译 | 给整张图打上禁止翻译的标记 | 防止翻译插件把两套文本再翻一遍 |
| 长度在生成期校验 | 生成时就按两种语言的真实长度检查是否溢出 | 上线后才发现溢出的返工成本高得多 |
| 单文件承载 | 一张图一个文件，不按语言拆 | 图库文件数量与语言数解耦 |
“整块禁译”这一条最容易被漏。不加标记，翻译插件会把图里的中文标签当正文翻成英文，英文页面上于是同时出现翻过的英文和原本就有的英文，两套叠在一起，图就废了。这类问题在依赖插件自动翻译的站点上非常常见。
配套还有一条命名要求：图片文件名与替代文字不要带语言后缀。带后缀等于每加一种语言就多一批文件，图库规模和语言数一起膨胀，清理时也难判断哪张还有用。替代文字写图的内容，不写语言信息。
四、英文比中文长 1.3 到 1.5 倍，排版要按这个数留余量
这是本篇最需要记住的一个数：中文页面里刚好排满的一行标签，翻成英文后通常要长 1.3 到 1.5 倍，短标签更厉害。
| 文本类型 | 中文长度 | 英文长度常见倍数 | 说明 |
|---|---|---|---|
| 短标签，4 个汉字以内 | 例如四个字 | 1.6 到 2.0 倍 | 越短越不准，膨胀最猛 |
| 中等短语，8 到 15 字 | 一行内的一段描述 | 1.3 到 1.5 倍 | 最典型的区间 |
| 完整句子，20 字以上 | 一句完整表述 | 1.2 到 1.4 倍 | 有上下文，比例反而下降 |
| 含缩写或型号的文本 | 如参数缩写 | 接近 1.0 倍 | 型号与单位不翻译，几乎不变 |
德语、俄语这类语言还要再长一些，通常在英文基础上再多 10% 到 20%。如果站点计划上德语，余量要按德语预留，不能只按英文算。
知道了倍数，排版上要落成具体的余量规则，否则这个数字仍然用不上：
| 元素类型 | 字号下限 | 可用宽度怎么算 | 最小余量 |
|---|---|---|---|
| 图卡标题 | 不小于 15 号 | 卡片宽度减去左右内边距各 12 像素 | 预留 40% 空宽 |
| 卡片正文行 | 不小于 12 号 | 到相邻列左边界的距离 | 预留 45% 空宽 |
| 坐标轴与刻度标签 | 不小于 10 号 | 到下一个刻度的距离 | 预留 50%，必要时改为两行 |
| 图例与脚注 | 不小于 10 号 | 到版心右边界的距离 | 预留 35%，超长缩写 |
余量用来断行，不是用来缩字号。同一行放不下就换到第二行，垂直以原基线为中心向上下生长；垂直也放不下，才允许降字号，且不低于上表下限。这条顺序不要颠倒——先缩字号会让英文版整体比中文版小一号，两种语言的视觉重量不一致。
溢出有三种表现，处置方式不一样：
| 溢出形态 | 视觉表现 | 处置 |
|---|---|---|
| 横向越界 | 文字压到相邻卡片上 | 按邻居距离断行，而不是缩字号 |
| 上下遮挡 | 多行文字盖住下一行 | 行高按字号乘 1.3 到 1.4 预留 |
| 卡片越界 | 文字超出卡片边界 | 先加内边距，再考虑加高卡片 |
五、表格的本地化：列宽、数字、单位、日期
表格比图更麻烦，因为它是活的：列宽随内容变化，内容随语言变化。五项最容易出问题：
| 检查项 | 常见问题 | 处理规则 |
|---|---|---|
| 列宽 | 按中文长度定的窄列，英文表头挤成两行 | 表头按英文长度重新分配列宽 |
| 数字格式 | 用逗号作千分位与用空格作千分位混用 | 按目标语言习惯统一，一套站点一套规则 |
| 单位 | 中文表头写单位，英文表头漏单位 | 单位进表头，不进数据单元格 |
| 日期 | 年月日顺序在不同语区理解不同 | 用四位数年份加英文月份缩写，避免纯数字 |
| 超长译文换行 | 单元格文字撑高整行 | 允许换行但设定最多两行，超出改用短表头 |
数字与单位的写法最容易埋雷，几种典型差异要提前定规则：
| 内容 | 中文常见写法 | 英语区常见写法 | 注意点 |
|---|---|---|---|
| 千分位 | 10,000 或 10000 | 10,000 | 小数点与千分位符号不要混用 |
| 小数 | 0.5 | 0.5 或 .5 | 不要出现逗号作小数点 |
| 尺寸 | 200 毫米 | 200 mm | 单位符号前留空格 |
| 温度 | 20 摄氏度 | 20 °C | 度数符号与字母之间留空格 |
| 区间 | 10 到 20 | 10 to 20 或 10–20 | 连接号统一用短横或短破折号 |
| 货币 | 人民币 3 万元 | CNY 30,000 | 货币与金额之间不换行 |
表格在手机端的表现要单独测。可以横向滚动，也可以改成卡片。要避免的是把表格整体缩小到能塞进屏幕，字号会小到读不了。判断标准：手机上不放大能不能读清表头。
六、图内哪些必须翻、哪些必须禁译
图里的内容不能一刀切，各类处理方式不同：
| 内容类型 | 是否翻译 | 理由 |
|---|---|---|
| 数据标签、轴说明、图例 | 翻译 | 是读者理解图的关键，不翻等于图废掉 |
| 流程节点、模块名称 | 翻译 | 属于正文信息，与页面文字一一对应 |
| 品牌名与公司名 | 不翻 | 品牌名有唯一写法，翻译会造成不一致 |
| 产品型号与序列 | 不翻 | 型号是跨语言检索的锚点，翻了就搜不到 |
| 单位符号与公式 | 不翻，但按语言规范排版 | 符号本身通用，间距与写法有地区习惯 |
| 认证与标准编号 | 不翻 | 编号是外部固定标识 |
有一条判断可以用：这段文字翻译后，客户在别的语言里搜不到对应东西的，就不要翻。型号、编号、品牌属于这类极端情况。
还有一条一致性要求：图上的术语必须和术语表一致。同一参数中文页叫”行程”，英文页一处写 travel、一处写 stroke，读者会以为这是两个参数。多语言站要先有术语表，再谈图片本地化，顺序反了就会反复返工。参数口径的处理逻辑与此相通，可以对照 /insight/13-product-catalog-filter-search-experience/ 一起看。
七、质检清单：每张图乘每种语言的四项检查
质检不能只看中文版。做法是每张图乘每种语言各做四项检查，不合格不上线。
| 检查项 | 判定标准 | 不合格处置 |
|---|---|---|
| 溢出 | 文字不出卡片、不压相邻元素 | 断行，垂直不够再缩字号 |
| 遮挡 | 多行文字之间、文字与图形之间不重叠 | 调行高或加高容器 |
| 字号 | 不小于该元素的下限字号 | 改文案长度，不靠继续缩字号 |
| 卡片越界 | 文字与边框之间留白不小于 12 像素 | 加内边距或加宽卡片 |
什么时候老老实实做两套图
| 情况 | 判断依据 | 建议做法 |
|---|---|---|
| 术语密集的工艺流程图 | 一张图里 20 个以上专业术语 | 两套位图，由懂两种语言的人核对 |
| 复杂的多层信息图 | 图内层级超过四层 | 拆成多张简单图，再走双语 SVG |
| 三维渲染的产品剖面图 | 文字随曲面变形 | 两套位图，按语言各渲一次 |
| 需要交付印刷的图 | 印刷物料不接受 SVG | 两套位图，保留高分辨率源文件 |
| 客户指定图文版式 | 版式由客户方锁定 | 两套位图，避免改版式 |
判断逻辑很直接：图内信息越复杂、越依赖人工核对、越要交付到站外，就越倾向做两套图。反过来，站内使用的结构图、流程卡、对比图一律走双语 SVG，维护成本低一个量级。交付环节的图片与文件要求可按 /site/ 里的清单核对；涉及信任页与资质展示时，图文的可信度写法可以参照 /insight/09-trust-pages-ai-credibility-evidence/ 一篇，也可以把现有图表清单发到 /contact/ 做一次逐语言排查。
FAQ 常见问题
写在最后
图表本地化看起来是美工问题，实际是结构问题。位图把文字焊死在像素里，每加一种语言就要重做一遍；内嵌 SVG 把文字留在可以替换的位置，语言数增加时成本几乎不变。两种方案的差别不在当下，在第三次改版的时候。
需要提前拿主意的只有两件事：这张图以后还会不会改，英文比中文长多少。前者决定方案，后者决定余量。两件事都在开工前有答案，等上线后再发现，代价通常是重做。
一句话记法：图里的文字要留在能替换的地方，排版余量按英文比中文长一点三到一点五倍来留。