解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法


解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法

    • 起因
    • 解决办法
    • 操作步骤
    • 修改后效果
    • 关于Word加载项draw.io工具
    • 流程图等推荐用Xmind
    • 图表数据等也可以用Python的matplotlib函数库来画

起因 最近因为要着手开始写论文了,寻觅了好久终于找到一款好用的画图工具:draw.io(现在已更名叫diagrams.net)。之所以用它而不用VISIO,是因为整体的操作细节上要比VISIO强很多,而且图库也更丰富美观。但是当我画好之后导出矢量图SVG文件插入Word的时候,总会有一部分内容被隐藏,而且最下面还会冒出一行英文小字,感觉很是恼火。而直接输出JPEG格式或者PNG格式可以保证图形的原样但是清晰度不够。(如下图所示)
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

图1 在drow.io里画出的图形完全没有问题
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

图2 当单独打开或者在Word中插入图片的时候就会发现,好好的字显示不完了,而且最下面还会出来一行英文提示!
解决办法 原来上图的那行英文是可以点击的,是个超链接网址:https://desk.draw.io/support/solutions/articles/16000042487
在这个网址上,说明了为什么会出现这些问题的原因,以及解决办法!
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

原文为英文,截图为Edge浏览器翻译的截图。只要按照图中红框的办法操作一遍,就可以得到想要额正确格式了!(如果不想读流程文字,可以直接看上面链接,里面附了操作动图)
操作步骤
  1. Ctrl+A全选对象,然后在右侧将格式化文本的勾取消(此时你可能会发现你的一些字体字号发生变化,需要手动调整)
    解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
    文章图片
  2. 在图中空白处右键,选择顶点
    解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
    文章图片
  3. 将自动换行的勾取消
    解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
    文章图片
  4. 手动调整你的图片到合适的效果,然后最后导出SVG格式图片,成功
修改后效果 经过上面几步的操作后,即可得到没有错误的SVG矢量图,此时可以插入Word或者各种文档,我对Word转PDF文档也做过测试,完全没问题。
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

图3 修改之后的SVG文件,上面的错误都没有复现,可以正常使用
关于Word加载项draw.io工具 其实还有一种更为简单的办法,那就是直接从微软商店下载draw.io加载项。这样的话,你可以先在draw.io里编辑好保存成软件特有的格式,然后选择插入就行了。不过注意:如果你的文档只是局限在Word,那没问题,可以放心使用。
但是如果你还是要通过Word最后导出PDF文件的话,这个方法并不行。我经过多次测试,这种方法插入的图片在Word里面是矢量图,但是在转成PDF的时候会出问题,并不是以矢量格式存储的,会再次出现图片模糊的状况!所以还是上面啰嗦的那一种方式更靠谱。
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

流程图等推荐用Xmind 上述所讲的这些都是画结构框图或者UML等自由度比较大的、比较复杂的图。如果只是画一个思维导图、简单流程图或者具有明确层级关系的树状图,强烈推荐Xmind软件,导出的SVG图不存在格式问题。
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

图表数据等也可以用Python的matplotlib函数库来画 除了MATLAB、Origin等作图软件,还有一个比较好用的Python绘图工具matplotlib,可以直接输出SVG格式矢量图,效果很好,各种元素均可以自定义,而且学习成本很低,入手很快,很是推荐。网上相关教程也非常多,在这里不做赘述。
我是在ANACONDA的Spyder环境下直接调用的,软件装好即包含了matplotlib函数库,直接impor就行。
下面展示一些 作图代码
此段所要绘制的是 y = x 3 y = x^3 y=x3
import matplotlib.pyplot as plt #列出x的取值范围 x_values = list(range(1, 5000)) #列出y与x的函数关系 y_values = [x**3 for x in x_values]#列出要展示的数据,锚点的粒度(大小),锚点的表示形状,以及数据变化的色彩 plt.scatter(x_values, y_values, s = 20, marker = '*', c= y_values, cmap = plt.cm.rainbow_r)#表题及字号 plt.title("Cubic Number", fontsize = 20) #x轴及字号 plt.xlabel("Value", fontsize = 12) #y轴及字号 plt.ylabel("Cubic of Value", fontsize = 12) #要在图上呈现的坐标系范围 plt.axis([1, 5000, 0, 5000**3]) #输出图像 plt.show()

【解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法】解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

上述代码画出的SVG矢量图
解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法
文章图片

具有20万个绘制点的随机漫步图

    推荐阅读