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

No SVG element found in the input string.

Error message

No SVG element found in the input string.

What it means

This error is thrown while decoding an embedded draw.io diagram from a base64 data-URI SVG: after stripping the 26-char prefix, base64-decoding, and parsing as image/svg+xml, no <svg> root element could be found. The library expects the input to be a draw.io-exported SVG (one starting with 'data:image/svg+xml;base64,'). A parse failure (e.g. decode produced garbage) leaves querySelector('svg') null.

Source

Thrown at lib/utils.ts:1685

    // so we can see what was fixed and what error remains
    return {
        valid: false,
        error,
        fixed: fixes.length > 0 ? fixed : null,
        fixes,
    }
}

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")

View on GitHub (pinned to 155ef4f7ac)

Solutions

1. Verify the input starts with 'data:image/svg+xml;base64,' (26 chars) before calling; strip whitespace/BOM
2. If you have raw SVG, base64-encode it first: 'data:image/svg+xml;base64,' + btoa(svgString)
3. Check the decoded string with atob yourself and confirm it parses as SVG
4. URL-decode the value first if it came from a query parameter

Example fix

// before
extractDiagramFromSvg(rawSvgMarkup) // throws: No SVG element found

// after
const dataUri = 'data:image/svg+xml;base64,' + btoa(rawSvgMarkup)
extractDiagramFromSvg(dataUri)

const PREFIX = 'data:image/svg+xml;base64,'
if (!str.startsWith(PREFIX) || str.length <= PREFIX.length) throw new Error('expected base64 svg data URI')
const decoded = atob(str.slice(26))
if (!new DOMParser().parseFromString(decoded, 'image/svg+xml').querySelector('svg')) throw new Error('not an svg payload')

function isBase64SvgDataUri(s: string): boolean {
  return /^data:image\/svg\+xml;base64,[A-Za-z0-9+/=]+$/.test(s.trim())
}

try { extract(str) } catch (e) { if ((e as Error).message.includes('No SVG element')) throw new Error(`input is not a draw.io svg data URI: ${str.slice(0, 40)}...`) }

When it happens

Trigger: Passing a string whose first 26 characters are not a valid base64 SVG data-URI prefix, passing an uncompressed .svg file content directly instead of the base64-encoded data URI, or corrupt base64 that atob decodes into non-SVG bytes.

Common situations: Reading the 'xml_svg_string' from a database or clipboard where the prefix was trimmed or URL-encoded; passing raw SVG markup instead of the data-URI form; encoding mismatches (UTF-16 vs UTF-8) before base64.

Related errors

• No encoded data found in the diagram element
• SVG element does not have a 'content' attribute.
• No diagram element found
• addPageToDoc: opts.xml must be a bare <mxGraphModel>.
• Page id "${id}" already exists

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