svg矢量图插入Word出现问题一站式解答

目录

一、前言

二、产生原因

三、解决方案

1. 图像编辑

2. 上下标处理

3.格式转换

---

一、前言

近期使用word写论文时，发现draw.io导出的svg矢量图片在插入word之后，会有各种各样的问题。如果你遇到了如下问题，那么这篇文章将会为你提供帮助：

• 文字和图像的排版错乱
• 找到了其他文章并尝试在draw.io（或其他流程图软件）中取消“格式化文本”选项，但取消该选项后无法在流程图中插入上下标或上下标插入失效
• 流程图中的渐变背景失效（无法解决）
• 流程图中的其他高级文本设置（如表格、链接、图片等）失效（无法解决）

正如标题中使用的字眼为“解答”而非“解决”，遇到的一些问题是由于软件本身导致的，难以（至少我找不到方法）解决。本文旨在解答导致这样问题的原因，并尝试解决其中的部分问题。

如果你对产生这些问题的原因不感兴趣，请移步 三、解决方案 。

二、产生原因

产生这些问题的原因总结成一句话就是：Word对于svg的支持实在是太差了。

Word支持svg格式图片吗？我的答案是：如支持。根据实际测试，Word只能正确处理svg1.0版本的图像，这甚至是2001年推出的标准，他甚至连svg1.1（2003年推出）的标准都不能支持。今夕是何年？！微软大大能不能加把劲啊！

由于如上原因，如果Word中插入高版本svg图像，那么Word就只能识别到svg1.0支持的标签，而对于其不支持的标签（如a标签等），就只能识别到文本而无法读取格式及交互信息。这其中，如果你使用的是draw.io并且勾选了“格式化文本”选项，那么draw.io就会将图像保存为svg1.1版本，而这个版本使用的文本标签是svg1.0所不支持的。这就是为什么有些svg设置好的字体格式插入Word并不能生效的原因。

除此之外，如果你使用的是draw.io生成的svg图像，如果你没有勾选“格式化文本”选项，那么draw.io生成的svg图像便保存为svg1.0，这时Word便可以正确识别了。当然，你也失去了svg1.1及以上版本支持的富文本编辑功能。

顺便一提，如果你勾选了“格式化文本”选项，那么draw.io便会在图像中加入一个“没有作用”的a标签（表示插入一个链接）。因为设置了相关样式，这个标签在支持svg1.1及以上的浏览器中是不可见的。但是如果是类似Word这种只支持到svg1.0的浏览器，它就只能识别到其中的文本，而无法解析标签以及相关样式。这也就是你可能会遇到的，插入的图像显示“Text is not SVG - cannot display”或“Viewer does not support full SVG 1.1”的原因。

所以，由于Word无法支持svg1.1及以上的图像，含有图片、链接、表格等内容的svg图片现在仍无法插入Word中。你也许只能退而求其次将图像转化为点阵图（png、jpg等），或者在Word中重新绘图。

三、解决方案

正如上文所说，如果你的流程图已经存在链接、表格、图片等高级内容，暂时没有较好的解决方案。这里假设你的流程图可以仅包含框图、文本、以及简单的色彩填充，以下给出我个人认为目前最好的svg with Word的解决方案。

1. 图像编辑

在编辑图像时，你需要注意以下几点（以draw.io为例）：

• 确保所有的流程框取消勾选“格式化文本”选项
• 在导出为svg时取消勾选“包含绘图副本”选项

2. 上下标处理

许多理工科流程图需要有上标、下标，而设置为svg1.0之后，draw.io就无法插入上下标了。为此，我们需要进行以下工作：

• 将流程图中的所有上下标替换为LaTeX语法，即
  • 如果你需要输入，请用x^{2}代替
  • 如果你需要输入，请用a_{i}代替
  • 注意，原版LaTeX如果只有一个字符，大括号（{}）是可以省略的，但这里请不要省略
  • 如果你对这种写法还有疑问，请百度“LaTeX上下标”
• 由于svg实质上是一段超文本标记语言，因此我们可以使用文本替换的方式，将我们上面写的上下标语法替换成svg1.0同样支持的标签语法。
  • 如果你会使用python，以下是一个python脚本：

  • import glob
    import os
    import re
    
    
    def convert_sub_sup_in_svg(svg_content):
        # Pattern to find text with superscript and subscript
        sup_pattern = r'\^{(.*?)}'
        sub_pattern = r'_{(.*?)}'
    
        # Define the replacement function for superscript
        def sup_repl(match):
            text = match.group(1)
            return f'<tspan baseline-shift="super" font-size="60%">{text}</tspan>'
    
        # Define the replacement function for subscript
        def sub_repl(match):
            text = match.group(1)
            return f'<tspan baseline-shift="sub" font-size="60%">{text}</tspan>'
    
        # Replace superscript and subscript in the SVG content
        new_content = re.sub(sup_pattern, sup_repl, svg_content)
        new_content = re.sub(sub_pattern, sub_repl, new_content)
    
        return new_content
    
    def process_svg_file(file_path):
        # Load SVG content
        with open(file_path, 'r', encoding='utf-8') as file:
            svg_content = file.read()
    
        # Convert superscript and subscript
        converted_content = convert_sub_sup_in_svg(svg_content)
    
        # Save the modified SVG content
        with open(file_path, 'w', encoding='utf-8') as file:
            file.write(converted_content)
    
        print(f"Processed SVG file: {file_path}")
    
    
    def process_all_svg_files(directory):
        # Get a list of all SVG files in the directory
        svg_files = glob.glob(os.path.join(directory, '*.svg'))
        
        # Process each SVG file
        for svg_file in svg_files:
            process_svg_file(svg_file)
            print(f"Finished processing {svg_file}")
    
    
    image_dir = r"C:\path\to\your\folder"    # 这里换成你保存svg图像的完整路径
    
    process_all_svg_files(image_dir)

  • 将上面的"C:\path\to\your\folder"改成你存放svg图像的完整目录（注意是图像所在文件夹，脚本会检索文件夹中的所有svg文件并处理），运行该脚本即可。
  • 当然，如果你不会使用python，也可以在这里（提取码：8pb6）下载可以直接运行的工具。你需要下载并将压缩包解压（注意，里面的svg_converter.exe可能会被杀毒软件或者Windows Defender误杀，请查阅相关资料），并选中你需要进行转换的svg文件（可多选），拖到svg_converter.exe的图标上。修改会在原图上进行，请注意备份。

进行了如上操作，再将处理完的svg图像插入Word，上下标便可以正确显示了。

3. 格式转换

还有一种理论可行的方案，就是将svg转化为word支持比较好的矢量图格式，如wmf等。但是，我即没有找到合适的python第三方库，也没有找到合适的在线工具，可以很好地完成这个任务。

---

以上便是针对svg图像插入Word中遇到的问题的总结和解决方案，如果你有其他更好的方案，欢迎在评论区进行留言补充。