GraphiteEditor/Graphite · error

Error reading SVG file

Error message

Error reading SVG file

What it means

imageToCanvasContext special-cases files with MIME image/svg+xml: it parses the text via DOMParser and queries for an <svg> root. If querySelector("svg") finds nothing — a parsererror document, a non-SVG root, or a namespace-prefixed root like <svg:svg> that the tag-name selector does not match — it throws this generic error before rasterization begins.

Source

Thrown at frontend/src/utility-functions/rasterization.ts:69

	return blob;
}

/// Convert an image source (e.g. PNG document) into pixel data, a width, and a height
export async function extractPixelData(imageData: ImageBitmapSource): Promise<ImageData> {
	const canvasContext = await imageToCanvasContext(imageData);
	const width = canvasContext.canvas.width;
	const height = canvasContext.canvas.height;

	return canvasContext.getImageData(0, 0, width, height);
}

export async function imageToCanvasContext(imageData: ImageBitmapSource): Promise<CanvasRenderingContext2D> {
	// Special handling to rasterize an SVG file
	let svgImageData;
	if (imageData instanceof File && imageData.type === "image/svg+xml") {
		const svgSource = await imageData.text();
		const svgElement = new DOMParser().parseFromString(svgSource, "image/svg+xml").querySelector("svg");
		if (!svgElement) throw new Error("Error reading SVG file");

		let bounds = svgElement.viewBox.baseVal;

		// If the bounds are zero (which will happen if the `viewBox` is not provided), set bounds to the artwork's bounding box
		if (bounds.width === 0 || bounds.height === 0) {
			// It's necessary to measure while the element is in the DOM, otherwise the dimensions are zero
			const toRemove = document.body.insertAdjacentElement("beforeend", svgElement);
			bounds = svgElement.getBBox();
			toRemove?.remove();
		}

		svgImageData = await rasterizeSVGCanvas(svgSource, bounds.width, bounds.height);
	}

	// Decode the image file binary data
	const image = await createImageBitmap(svgImageData || imageData);

	let { width, height } = image;

View on GitHub (pinned to c507b35645)

Solutions

1. Open the file in a text editor and confirm it is well-formed XML whose root element is <svg xmlns="http://www.w3.org/2000/svg">
2. Re-export the artwork as a standard SVG from the source tool
3. If you control the code, check doc.querySelector("parsererror") first and match the documentElement by namespace/localName instead of querySelector("svg")
4. As a workaround, convert the SVG to PNG before importing

Example fix

// before
const svgElement = new DOMParser().parseFromString(svgSource, "image/svg+xml").querySelector("svg");
if (!svgElement) throw new Error("Error reading SVG file");

// after: distinguish parse errors from a wrong root, and match namespaces properly
const doc = new DOMParser().parseFromString(svgSource, "image/svg+xml");
const parseError = doc.querySelector("parsererror");
if (parseError) throw new Error(`Malformed SVG: ${parseError.textContent}`);
const svgElement = doc.documentElement?.localName === "svg" ? doc.documentElement : null;
if (!svgElement) throw new Error("Error reading SVG file");

function parseSvg(text: string): SVGSVGElement | null {
	const doc = new DOMParser().parseFromString(text, "image/svg+xml");
	if (doc.querySelector("parsererror")) return null;
	const root = doc.documentElement;
	return root?.namespaceURI === "http://www.w3.org/2000/svg" && root.localName === "svg"
		? (root as unknown as SVGSVGElement)
		: null;
}

// Wrap import call sites and surface the offending filename
try {
	const ctx = await imageToCanvasContext(file);
} catch (err) {
	showImportError(file.name, err instanceof Error ? err.message : String(err));
}

When it happens

Trigger: A File whose type is reported as image/svg+xml but whose content is not a valid SVG document: XML syntax errors (yielding a <parsererror> document), an HTML file saved with an .svg extension, a root element other than svg, or a namespace-prefixed <svg:svg> root.

Common situations: Users renaming arbitrary files to .svg; exports from tools that emit unusual XML (BOM, processing instructions) where the root is not a literal <svg> tag; import dialogs that trust extension-based MIME sniffing.

AI-assisted analysis of GraphiteEditor/Graphite@c507b35645 (2026-08-16). Data as JSON: /api/errors/b0783400e64047ab. Report an issue: GitHub.