解决draw.io生成SVG矢量图导入Word显示有误的问题以及推荐几种SVG绘图方法 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里画出的图形完全没有问题

文章图片

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

文章图片

原文为英文，截图为Edge浏览器翻译的截图。只要按照图中红框的办法操作一遍，就可以得到想要额正确格式了！（如果不想读流程文字，可以直接看上面链接，里面附了操作动图）
操作步骤

Ctrl+A全选对象，然后在右侧将格式化文本的勾取消（此时你可能会发现你的一些字体字号发生变化，需要手动调整）

文章图片
在图中空白处右键，选择顶点

文章图片
将自动换行的勾取消

文章图片
手动调整你的图片到合适的效果，然后最后导出SVG格式图片，成功

修改后效果经过上面几步的操作后，即可得到没有错误的SVG矢量图，此时可以插入Word或者各种文档，我对Word转PDF文档也做过测试，完全没问题。

文章图片

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

文章图片

文章图片

流程图等推荐用Xmind 上述所讲的这些都是画结构框图或者UML等自由度比较大的、比较复杂的图。如果只是画一个思维导图、简单流程图或者具有明确层级关系的树状图，强烈推荐Xmind软件，导出的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绘图方法】