DayuanJiang/next-ai-draw-io · error · Error

SVG element does not have a 'content' attribute.

Error message

SVG element does not have a 'content' attribute.

What it means

The decoded SVG parsed successfully, but its root <svg> element has no 'content' attribute. draw.io's 'editable' SVG export embeds the original diagram XML (HTML-entity-encoded) in a content attribute specifically so it can be round-tripped back into the editor. This error means the SVG was exported without that embedded content — typically a plain final render.

Source

Thrown at lib/utils.ts:1691

    }
}

export function extractDiagramXML(xml_svg_string: string): string {
    try {
        // 1. Parse the SVG string (using built-in DOMParser in a browser-like environment)
        const svgString = atob(xml_svg_string.slice(26))
        const parser = new DOMParser()
        const svgDoc = parser.parseFromString(svgString, "image/svg+xml")
        const svgElement = svgDoc.querySelector("svg")

        if (!svgElement) {
            throw new Error("No SVG element found in the input string.")
        }
        // 2. Extract the 'content' attribute
        const encodedContent = svgElement.getAttribute("content")

        if (!encodedContent) {
            throw new Error("SVG element does not have a 'content' attribute.")
        }

        // 3. Decode HTML entities (using a minimal function)
        function decodeHtmlEntities(str: string) {
            const textarea = document.createElement("textarea") // Use built-in element
            textarea.innerHTML = str
            return textarea.value
        }
        const xmlContent = decodeHtmlEntities(encodedContent)

        // 4. Parse the XML content
        const xmlDoc = parser.parseFromString(xmlContent, "text/xml")
        const diagramElement = xmlDoc.querySelector("diagram")

        if (!diagramElement) {
            throw new Error("No diagram element found")
        }
        // 5. Extract base64 encoded data

View on GitHub (pinned to 155ef4f7ac)

Solutions

1. Re-export from draw.io with 'Include a copy of the diagram' checked (embedImages/Editable SVG options)
2. If you still have the .drawio source file, use that XML instead of the SVG
3. Check svgElement.hasAttribute('content') before calling and fall back to asking the user for the source file
4. If an optimizer stripped it, recover the attribute from a pre-optimization copy

Example fix

// before
const xml = extractDiagramFromSvg(plainExportedSvg) // no content attr

// after (guard first)
const doc = new DOMParser().parseFromString(atob(svg.slice(26)), 'image/svg+xml')
if (!doc.querySelector('svg')?.hasAttribute('content')) throw new Error('re-export with embedded diagram')

const decoded = new DOMParser().parseFromString(atob(dataUri.slice(26)), 'image/svg+xml')
const svg = decoded.querySelector('svg')
if (!svg?.hasAttribute('content')) throw new Error('svg lacks embedded diagram content; re-export with "Include a copy of the diagram"')

function hasEmbeddedContent(svg: Element): boolean {
  return Boolean(svg.getAttribute('content')?.trim())
}

try { extract(dataUri) } catch (e) { if ((e as Error).message.includes("'content' attribute")) fallbackToSourceFile() }

When it happens

Trigger: Calling the extract function on an SVG exported via 'File > Export as > SVG' without the 'Include a copy of the diagram' option, or on an SVG produced by another tool (Inkscape, Figma, hand-written).

Common situations: Users exporting 'clean' SVGs for production and then trying to programmatically recover the source diagram; SVGs that passed through optimizers (svgo) that strip unknown attributes; expecting lossless conversion from a plain SVG.

Related errors

• No SVG element found in the input string.
• No diagram element found
• No encoded data found in the diagram element
• Page id "${id}" already exists
• addPageToDoc: opts.xml must be a bare <mxGraphModel>; receiv

AI-assisted analysis of DayuanJiang/next-ai-draw-io@155ef4f7ac (2026-08-27). Data as JSON: /api/errors/885d13b14777a69f. Report an issue: GitHub.