可在draw.io中通过五种方式导入SVG图标:一、URL导入开源XML库;二、本地XML文件导入;三、拖放单个SVG到画布;四、粘贴SVG代码;五、创建并保存自定义形状库。

如果您希望在draw.io中使用专属设计风格或特定业务场景所需的图形元素,但内置图标库无法满足需求,则需要导入自定义图标库或第三方SVG图标素材。以下是实现该目标的具体操作步骤:
一、通过URL导入开源图标库(如drawio-libs)
该方法适用于已托管在公开可访问路径下的XML格式图标库,支持团队协作与快速复用,无需下载文件即可加载整套分类图标。
1、打开draw.io(diagrams.net)网页版或桌面版应用。
2、点击顶部菜单栏的File → 选择Open Library from URL。
3、在弹出窗口中输入图标库的XML文件网络路径,例如:https://raw.githubusercontent.com/jgraph/drawio-libs/main/libs/font-awesome.xml。
4、点击Open,图标库将自动加载并显示在左侧形状面板的底部区域。
二、通过本地设备导入XML图标库文件
该方式适合离线环境或使用已克隆至本地的drawio-libs项目,可确保图标资源稳定可控,避免网络依赖。
1、从GitHub克隆drawio-libs仓库:git clone https://gitcode.com/gh_mirrors/dr/drawio-libs。
2、启动draw.io,点击File → 选择Open Library from Device。
3、在文件选择器中定位到本地项目目录下的XML文件,例如:libs/material-design-icons.xml。
4、确认导入后,对应图标类别将出现在左侧面板中,支持直接拖拽使用。
三、直接插入单个SVG文件到画布
该方法适用于临时使用某个独立SVG图标,无需创建或加载完整库,操作最简,适合一次性绘图任务。
1、确保SVG文件为标准格式,不含外部引用、JavaScript或复杂滤镜。
2、在draw.io界面中,将SVG文件从电脑桌面直接拖放至绘图画布区域。
3、或点击顶部菜单Arrange → Insert → Image,再将SVG文件拖入弹出对话框并点击Apply。
4、插入后勾选Actual Size选项,防止自动缩放导致比例失真。
四、粘贴SVG代码嵌入图形
该方式适用于已复制SVG源码的场景,绕过文件系统限制,可在无文件上传权限的环境中使用,且能即时调整内联样式。
1、用文本编辑器打开SVG文件,全选并复制其全部XML代码(以<svg开头,</svg>结尾)。
2、在draw.io中点击顶部菜单Edit → 选择Paste SVG。
3、图形将作为矢量对象插入画布,支持自由缩放、旋转及右侧属性面板中的颜色、描边等修改。
五、创建并保存自定义形状库
该方法适用于需长期复用多个SVG图标的情形,可将其归类组织为专属库,便于跨图表统一调用与版本管理。
1、在draw.io中点击左侧形状面板底部的More Shapes(三个点图标)。
2、选择Custom Shapes → 点击Import SVG按钮,逐个上传所需SVG文件。
3、上传完成后,点击每个图标右下角的编辑图标,在弹出窗口中为图标设置标题与标签(如“云服务器”“API网关”)。
4、完成配置后,点击Save as Library,导出为XML文件并保存至本地指定目录(如libs/custom/network-icons.xml)。


















