生成可被Draw.io识别为可编辑SVG而非图片的文件规范要求

当你自己生成的SVG导入Draw.io后显示为图片而非可编辑图形，核心原因是未符合Draw.io对可编辑SVG的专属解析规则，以下是关键要求：

1. 必须包含有效的Draw.io专属content属性 #

Draw.io导出的SVG在<svg>标签中携带了content属性，里面是经过HTML转义的mxfile格式数据——这是Draw.io识别并还原可编辑图形的核心依据。

• 你虽然添加了content属性，但其中的mxfile内容是复制的旧数据，和当前SVG的图形结构完全不匹配，Draw.io无法关联解析，只能当作普通图片处理。
• 正确做法：生成与你当前SVG图形对应的mxfile结构（参考Draw.io导出的格式），转义后填入content属性。

2. 遵循SVG基础属性规范 #

• 指定SVG版本：必须添加version="1.1"属性，Draw.io对SVG版本兼容性有明确要求，你的SVG缺少该声明。
• 匹配Draw.io坐标体系：
  • 官方SVG的viewBox包含半像素偏移（如viewBox="-0.5 -0.5 411 61"），用于避免线条模糊，你的viewBox无此偏移。
  • 移除transform="scale(1,-1)"翻转属性，Draw.io默认使用标准SVG坐标系，翻转会导致图形位置识别混乱。
• 显式设置宽高：建议添加width和height属性（如width="5000px" height="3000px"），帮助Draw.io确定初始渲染尺寸。

3. 图形元素属性要求 #

• 使用内联样式而非自定义类：你的SVG用了class="rectStyle"但未定义样式，Draw.io优先识别内联样式（如官方的fill="rgb(255,255,255)" stroke="rgb(0,0,0)"），自定义类会导致样式丢失或无法解析。
• 添加交互属性：给每个图形元素（如<rect>、<line>）添加pointer-events="all"，确保Draw.io能捕获交互事件，标记为可编辑元素。
• 移除冗余元素/属性：删除tabindex="0"、空的<g id="line">等非标准内容，避免干扰Draw.io的解析逻辑。

4. 文件结构完整性 #

• 建议保留XML声明（<?xml version="1.0" encoding="UTF-8"?>）和DOCTYPE声明，确保Draw.io正确识别文件类型。
• 保持SVG结构简洁，避免不必要的嵌套分组，官方SVG的图形仅在单个<g>标签内，结构清晰。

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