SVG跨程序渲染差异问题及解决方案技术问询

一、统一代码规范，搞定大小写敏感问题 #

• 所有SVG元素、属性名全改成小写（比如把Stroke换成stroke，Fill换成fill），SVG标准本身推荐小写写法，能避免不同渲染器的大小写解析偏差；
• 所有CSS样式的选择器、属性名也统一小写，部分小众渲染器（比如你提到的Delphi库）对CSS大小写特别敏感。

二、解决Word无法转内部矢量格式的问题 #

• 把SVG精简到纯SVG 1.1基础规范内容：删掉Inkscape专属扩展（比如inkscape:*开头的属性）、JS脚本、外部CSS引用；别用网格渐变这类只有少数工具支持的特性，换成线性/径向渐变替代；
• 存SVG的时候选“纯SVG”格式（Inkscape里选“Plain SVG”），别存成带大量元数据的Inkscape专用格式；
• 如果还是不行，先把SVG导出成PDF再插Word——Word对PDF的矢量支持更稳，能保留矢量特性。

三、统一字体大小单位解析 #

• 优先用绝对单位：别用em、rem这类相对单位，换成px或者pt（Word对pt支持更好）；
• 字体大小别省略单位，比如写font-size:12pt，别只写font-size:12；所有文本的字体大小单位保持一致；
• 要是完全不考虑文本可编辑性，直接把文本转成路径（Inkscape里选“Path > Object to Path”），这样所有渲染器显示的大小就完全一致了。

四、修复文本垂直定位异常 #

• 明确文本基线对齐：给文本元素加dominant-baseline属性，比如dominant-baseline:middle或者dominant-baseline:alphabetic，别依赖渲染器的默认值；
• 别用dy做垂直偏移，改用transform:translateY()来调位置，不同渲染器对dy的解析差得特别多；
• 多行文本别依赖自动换行，用<tspan>分组并统一设置基线，或者用<textPath>来控制布局。

通用踩坑提示 #

• 测试的时候拆成小的测试用例，逐步加特性，定位到底是哪段代码导致的差异；
• 针对那个Delphi库，先查它支持的SVG版本（一般是SVG 1.1基础版），别用超出范围的高级特性；
• 字体尽量嵌入SVG里（用<font>元素或者base64编码嵌入），别依赖系统字体，避免不同机器字体缺失导致的渲染问题。

内容的提问来源于stack exchange，提问作者zvavybir