headless-svg-to-excalidraw 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Excalidraw
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# svg-to-excalidraw
+
+Library to convert SVG to Excalidraw’s file format.
+
+## :floppy_disk: Installation
+
+```bash
+yarn add svg-to-excalidraw
+```
+
+## :beginner: Usage
+
+```typescript
+import svgToEx from "svg-to-excalidraw";
+
+const heartSVG = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/>
+</svg>
+`;
+
+const { hasErrors, errors, content } = svgToEx.convert(heartSVG);
+
+// SVG parsing errors are propagated through.
+if (hasErrors) {
+  console.error(errors);
+  return;
+}
+
+navigator.clipboard.writeText(content);
+
+// the heart excalidraw json is now copied to your clipboard.
+// Just Paste it into your Excalidraw session!
+```
+
+## :game_die: Running tests
+
+TODO.
+
+### :building_construction: Local Development
+
+#### Building the Project
+
+```bash
+yarn build
+
+# Build and watch whenever a file is updated
+yarn build:watch
+```
+
+## :busts_in_silhouette: Contributing
+
+Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/svg-to-excalidraw/issues) first to discuss what you would like to change.

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+//#region src/parser.d.ts
+type ConversionResult = {
+  hasErrors: boolean;
+  errors: any;
+  content: any;
+  warnings: string[];
+};
+declare const convert: (svgString: string) => ConversionResult;
+//#endregion
+export { convert };

package/dist/index.mjs

@@ -0,0 +1,656 @@
+import { mat4, vec3 } from "gl-matrix";
+import { Random } from "roughjs/bin/math";
+import { nanoid } from "nanoid";
+import chroma from "chroma-js";
+import { DOMParser, parseHTML } from "linkedom";
+import { pointsOnPath } from "points-on-path";
+
+//#region src/elements/ExcalidrawScene.ts
+var ExcalidrawScene = class {
+	type = "excalidraw";
+	version = 2;
+	source = "https://excalidraw.com";
+	elements = [];
+	constructor(elements = []) {
+		this.elements = elements;
+	}
+	toExJSON() {
+		return {
+			...this,
+			elements: this.elements.map((el) => ({ ...el }))
+		};
+	}
+};
+var ExcalidrawScene_default = ExcalidrawScene;
+
+//#endregion
+//#region src/utils.ts
+const random = new Random(Date.now());
+const randomInteger = () => Math.floor(random.next() * 2 ** 31);
+const randomId = () => nanoid();
+function dimensionsFromPoints(points) {
+	const xCoords = points.map(([x]) => x);
+	const yCoords = points.map(([, y]) => y);
+	const minX = Math.min(...xCoords);
+	const minY = Math.min(...yCoords);
+	const maxX = Math.max(...xCoords);
+	const maxY = Math.max(...yCoords);
+	return [maxX - minX, maxY - minY];
+}
+function getWindingOrder(points) {
+	return points.reduce((acc, [x1, y1], idx, arr) => {
+		const p2 = arr[idx + 1];
+		const x2 = p2 ? p2[0] : 0;
+		const y2 = p2 ? p2[1] : 0;
+		return (x2 - x1) * (y2 + y1) + acc;
+	}, 0) > 0 ? "clockwise" : "counterclockwise";
+}
+
+//#endregion
+//#region src/attributes.ts
+function hexWithAlpha(color, alpha) {
+	return chroma(color).alpha(alpha).css();
+}
+function has(el, attr) {
+	return el.hasAttribute(attr);
+}
+function get(el, attr, backup) {
+	return el.getAttribute(attr) || backup || "";
+}
+function getNum(el, attr, backup) {
+	const numVal = Number(get(el, attr));
+	return Number.isNaN(numVal) ? backup || 0 : numVal;
+}
+const attrHandlers = {
+	stroke: ({ el, exVals }) => {
+		const strokeColor = get(el, "stroke");
+		exVals.strokeColor = has(el, "stroke-opacity") ? hexWithAlpha(strokeColor, getNum(el, "stroke-opacity")) : strokeColor;
+	},
+	"stroke-opacity": ({ el, exVals }) => {
+		exVals.strokeColor = hexWithAlpha(get(el, "stroke", "#000000"), getNum(el, "stroke-opacity"));
+	},
+	"stroke-width": ({ el, exVals }) => {
+		exVals.strokeWidth = getNum(el, "stroke-width");
+	},
+	fill: ({ el, exVals }) => {
+		const fill = get(el, `fill`);
+		exVals.backgroundColor = fill === "none" ? "#00000000" : fill;
+	},
+	"fill-opacity": ({ el, exVals }) => {
+		exVals.backgroundColor = hexWithAlpha(get(el, "fill", "#000000"), getNum(el, "fill-opacity"));
+	},
+	opacity: ({ el, exVals }) => {
+		exVals.opacity = getNum(el, "opacity", 100);
+	}
+};
+function presAttrsToElementValues(el) {
+	return [...el.attributes].reduce((exVals, attr) => {
+		const name = attr.name;
+		if (Object.keys(attrHandlers).includes(name)) attrHandlers[name]({
+			el,
+			exVals
+		});
+		return exVals;
+	}, {});
+}
+function filterAttrsToElementValues(el) {
+	const filterVals = {};
+	if (has(el, "x")) filterVals.x = getNum(el, "x");
+	if (has(el, "y")) filterVals.y = getNum(el, "y");
+	if (has(el, "width")) filterVals.width = getNum(el, "width");
+	if (has(el, "height")) filterVals.height = getNum(el, "height");
+	return filterVals;
+}
+function pointsAttrToPoints(el) {
+	let points = [];
+	if (has(el, "points")) points = get(el, "points").split(" ").map((p) => p.split(",").map(parseFloat));
+	return points;
+}
+
+//#endregion
+//#region src/elements/Group.ts
+function getGroupAttrs(groups) {
+	return groups.reduce((acc, { element }) => {
+		const elVals = presAttrsToElementValues(element);
+		return {
+			...acc,
+			...elVals
+		};
+	}, {});
+}
+var Group = class {
+	id = randomId();
+	element;
+	constructor(element) {
+		this.element = element;
+	}
+};
+var Group_default = Group;
+
+//#endregion
+//#region src/dom.ts
+/**
+* DOM API provider using linkedom
+* Works in browser, Node.js, and serverless/edge environments
+*/
+const dom = parseHTML("<!DOCTYPE html>");
+const DOMParser$1 = new DOMParser();
+const document = dom.document;
+const NodeFilter = {
+	SHOW_ALL: 4294967295,
+	SHOW_ELEMENT: 1,
+	SHOW_ATTRIBUTE: 2,
+	SHOW_TEXT: 4,
+	SHOW_CDATA_SECTION: 8,
+	SHOW_ENTITY_REFERENCE: 16,
+	SHOW_ENTITY: 32,
+	SHOW_PROCESSING_INSTRUCTION: 64,
+	SHOW_COMMENT: 128,
+	SHOW_DOCUMENT: 256,
+	SHOW_DOCUMENT_TYPE: 512,
+	SHOW_DOCUMENT_FRAGMENT: 1024,
+	SHOW_NOTATION: 2048,
+	FILTER_ACCEPT: 1,
+	FILTER_REJECT: 2,
+	FILTER_SKIP: 3
+};
+
+//#endregion
+//#region src/elements/ExcalidrawElement.ts
+function createExElement() {
+	return {
+		id: randomId(),
+		x: 0,
+		y: 0,
+		strokeColor: "#000000",
+		backgroundColor: "#000000",
+		fillStyle: "solid",
+		strokeWidth: 1,
+		strokeStyle: "solid",
+		strokeSharpness: "sharp",
+		roughness: 0,
+		opacity: 100,
+		width: 0,
+		height: 0,
+		angle: 0,
+		seed: randomInteger(),
+		version: 0,
+		versionNonce: 0,
+		isDeleted: false,
+		groupIds: [],
+		boundElementIds: null
+	};
+}
+function createExRect() {
+	return {
+		...createExElement(),
+		type: "rectangle"
+	};
+}
+function createExLine() {
+	return {
+		...createExElement(),
+		type: "line",
+		points: []
+	};
+}
+function createExEllipse() {
+	return {
+		...createExElement(),
+		type: "ellipse"
+	};
+}
+function createExDraw() {
+	return {
+		...createExElement(),
+		type: "draw",
+		points: []
+	};
+}
+
+//#endregion
+//#region src/transform.ts
+const transformFunctionsArr = Object.keys({
+	matrix: "matrix",
+	matrix3d: "matrix3d",
+	perspective: "perspective",
+	rotate: "rotate",
+	rotate3d: "rotate3d",
+	rotateX: "rotateX",
+	rotateY: "rotateY",
+	rotateZ: "rotateZ",
+	scale: "scale",
+	scale3d: "scale3d",
+	scaleX: "scaleX",
+	scaleY: "scaleY",
+	scaleZ: "scaleZ",
+	skew: "skew",
+	skewX: "skewX",
+	skewY: "skewY",
+	translate: "translate",
+	translate3d: "translate3d",
+	translateX: "translateX",
+	translateY: "translateY",
+	translateZ: "translateZ"
+});
+const defaultUnits = {
+	matrix: "",
+	matrix3d: "",
+	perspective: "perspective",
+	rotate: "deg",
+	rotate3d: "deg",
+	rotateX: "deg",
+	rotateY: "deg",
+	rotateZ: "deg",
+	scale: "",
+	scale3d: "",
+	scaleX: "",
+	scaleY: "",
+	scaleZ: "",
+	skew: "skew",
+	skewX: "deg",
+	skewY: "deg",
+	translate: "px",
+	translate3d: "px",
+	translateX: "px",
+	translateY: "px",
+	translateZ: "px"
+};
+const svgTransformToCSSTransform = (svgTransformStr) => {
+	const tFuncs = svgTransformStr.match(/(\w+)\(([^)]*)\)/g);
+	if (!tFuncs) return "";
+	return tFuncs.map((tFuncStr) => {
+		const type = tFuncStr.split("(")[0];
+		if (!type) throw new Error("Unable to find transform name");
+		if (!transformFunctionsArr.includes(type)) throw new Error(`transform function name "${type}" is not valid`);
+		const tFuncParts = tFuncStr.match(/([-+]?[0-9]*\.?[0-9]+)([a-z])*/g);
+		if (!tFuncParts) return {
+			type,
+			values: []
+		};
+		let values = tFuncParts.map((a) => {
+			const [value, unit] = a.matchAll(/([-+]?[0-9]*\.?[0-9]+)|([a-z])*/g);
+			return {
+				unit: unit[0] || defaultUnits[type],
+				value: value[0]
+			};
+		});
+		if (values && type === "rotate" && values?.length > 1) values = [values[0]];
+		return {
+			type,
+			values
+		};
+	}).map(({ type, values }) => {
+		return `${type}(${values.map(({ unit, value }) => `${value}${unit}`).join(", ")})`;
+	}).join(" ");
+};
+function getElementMatrix(el) {
+	if (el.hasAttribute("transform")) {
+		const elMat = new DOMMatrix(svgTransformToCSSTransform(el.getAttribute("transform") || ""));
+		return mat4.multiply(mat4.create(), mat4.create(), elMat.toFloat32Array());
+	}
+	return mat4.create();
+}
+function getTransformMatrix(el, groups) {
+	return groups.map(({ element }) => getElementMatrix(element)).concat([getElementMatrix(el)]).reduce((acc, mat) => mat4.multiply(acc, acc, mat), mat4.create());
+}
+function transformPoints(points, transform) {
+	return points.map(([x, y]) => {
+		const [newX, newY] = vec3.transformMat4(vec3.create(), vec3.fromValues(x, y, 1), transform);
+		return [newX, newY];
+	});
+}
+
+//#endregion
+//#region src/walker.ts
+const SUPPORTED_TAGS = [
+	"svg",
+	"path",
+	"g",
+	"use",
+	"circle",
+	"ellipse",
+	"rect",
+	"polyline",
+	"polygon"
+];
+const nodeValidator = (node) => {
+	if (node.nodeType !== 1) return NodeFilter.FILTER_REJECT;
+	const element = node;
+	if (SUPPORTED_TAGS.includes(element.tagName.toLowerCase())) return NodeFilter.FILTER_ACCEPT;
+	return NodeFilter.FILTER_REJECT;
+};
+function createTreeWalker(dom) {
+	return (dom.ownerDocument || dom).createTreeWalker(dom, NodeFilter.SHOW_ELEMENT, { acceptNode: nodeValidator });
+}
+/**
+* Helper to simulate TreeWalker.nextSibling() for linkedom compatibility
+* Linkedom's TreeWalker only implements nextNode(), not nextSibling()
+*/
+function getNextSibling(tw, currentNode) {
+	const startNode = currentNode;
+	let node = tw.nextNode();
+	while (node) {
+		let parent = node.parentNode;
+		let isDescendant = false;
+		while (parent) {
+			if (parent === startNode) {
+				isDescendant = true;
+				break;
+			}
+			parent = parent.parentNode;
+		}
+		if (!isDescendant) return node;
+		node = tw.nextNode();
+	}
+	return null;
+}
+const presAttrs = (el, groups) => {
+	return {
+		...getGroupAttrs(groups),
+		...presAttrsToElementValues(el),
+		...filterAttrsToElementValues(el)
+	};
+};
+const skippedUseAttrs = ["id"];
+const allwaysPassedUseAttrs = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"href",
+	"xlink:href"
+];
+const getDefElWithCorrectAttrs = (defEl, useEl) => {
+	return [...useEl.attributes].reduce((el, attr) => {
+		if (skippedUseAttrs.includes(attr.value)) return el;
+		if (!defEl.hasAttribute(attr.name) || allwaysPassedUseAttrs.includes(attr.name)) el.setAttribute(attr.name, useEl.getAttribute(attr.name) || "");
+		return el;
+	}, defEl.cloneNode());
+};
+const walkers = {
+	svg: (args) => {
+		walk(args, args.tw.nextNode());
+	},
+	g: (args) => {
+		const groupNode = args.tw.currentNode;
+		const nextArgs = {
+			...args,
+			tw: createTreeWalker(groupNode),
+			groups: [...args.groups, new Group_default(groupNode)]
+		};
+		walk(nextArgs, nextArgs.tw.nextNode());
+		walk(args, getNextSibling(args.tw, groupNode));
+	},
+	use: (args) => {
+		const { root, tw, scene } = args;
+		const useEl = tw.currentNode;
+		const id = useEl.getAttribute("href") || useEl.getAttribute("xlink:href");
+		if (!id) throw new Error("unable to get id of use element");
+		const defEl = root.querySelector(id);
+		if (!defEl) throw new Error(`unable to find def element with id: ${id}`);
+		const tempScene = new ExcalidrawScene_default();
+		const finalEl = getDefElWithCorrectAttrs(defEl, useEl);
+		walk({
+			...args,
+			scene: tempScene,
+			tw: createTreeWalker(finalEl)
+		}, finalEl);
+		const exEl = tempScene.elements.pop();
+		if (!exEl) throw new Error("Unable to create ex element");
+		scene.elements.push(exEl);
+		walk(args, args.tw.nextNode());
+	},
+	circle: (args) => {
+		const { tw, scene, groups } = args;
+		const el = tw.currentNode;
+		const r = getNum(el, "r", 0);
+		const d = r * 2;
+		const x = getNum(el, "x", 0) + getNum(el, "cx", 0) - r;
+		const y = getNum(el, "y", 0) + getNum(el, "cy", 0) - r;
+		const mat = getTransformMatrix(el, groups);
+		const m = mat4.fromValues(d, 0, 0, 0, 0, d, 0, 0, 0, 0, 1, 0, x, y, 0, 1);
+		const result = mat4.multiply(mat4.create(), mat, m);
+		const circle = {
+			...createExEllipse(),
+			...presAttrs(el, groups),
+			x: result[12],
+			y: result[13],
+			width: result[0],
+			height: result[5],
+			groupIds: groups.map((g) => g.id)
+		};
+		scene.elements.push(circle);
+		walk(args, tw.nextNode());
+	},
+	ellipse: (args) => {
+		const { tw, scene, groups } = args;
+		const el = tw.currentNode;
+		const rx = getNum(el, "rx", 0);
+		const ry = getNum(el, "ry", 0);
+		const cx = getNum(el, "cx", 0);
+		const cy = getNum(el, "cy", 0);
+		const x = getNum(el, "x", 0) + cx - rx;
+		const y = getNum(el, "y", 0) + cy - ry;
+		const w = rx * 2;
+		const h = ry * 2;
+		const mat = getTransformMatrix(el, groups);
+		const m = mat4.fromValues(w, 0, 0, 0, 0, h, 0, 0, 0, 0, 1, 0, x, y, 0, 1);
+		const result = mat4.multiply(mat4.create(), mat, m);
+		const ellipse = {
+			...createExEllipse(),
+			...presAttrs(el, groups),
+			x: result[12],
+			y: result[13],
+			width: result[0],
+			height: result[5],
+			groupIds: groups.map((g) => g.id)
+		};
+		scene.elements.push(ellipse);
+		walk(args, tw.nextNode());
+	},
+	line: (args) => {
+		walk(args, args.tw.nextNode());
+	},
+	polygon: (args) => {
+		const { tw, scene, groups } = args;
+		const el = tw.currentNode;
+		const transformedPoints = transformPoints(pointsAttrToPoints(el), getTransformMatrix(el, groups));
+		const x = transformedPoints[0][0];
+		const y = transformedPoints[0][1];
+		const relativePoints = transformedPoints.map(([_x, _y]) => [_x - x, _y - y]);
+		const [width, height] = dimensionsFromPoints(relativePoints);
+		const line = {
+			...createExLine(),
+			...getGroupAttrs(groups),
+			...presAttrsToElementValues(el),
+			points: relativePoints.concat([[0, 0]]),
+			x,
+			y,
+			width,
+			height
+		};
+		scene.elements.push(line);
+		walk(args, args.tw.nextNode());
+	},
+	polyline: (args) => {
+		const { tw, scene, groups } = args;
+		const el = tw.currentNode;
+		const mat = getTransformMatrix(el, groups);
+		const transformedPoints = transformPoints(pointsAttrToPoints(el), mat);
+		const x = transformedPoints[0][0];
+		const y = transformedPoints[0][1];
+		const relativePoints = transformedPoints.map(([_x, _y]) => [_x - x, _y - y]);
+		const [width, height] = dimensionsFromPoints(relativePoints);
+		const hasFill = has(el, "fill");
+		const fill = get(el, "fill");
+		const shouldFill = !hasFill || hasFill && fill !== "none";
+		const line = {
+			...createExLine(),
+			...getGroupAttrs(groups),
+			...presAttrsToElementValues(el),
+			points: relativePoints.concat(shouldFill ? [[0, 0]] : []),
+			x,
+			y,
+			width,
+			height
+		};
+		scene.elements.push(line);
+		walk(args, args.tw.nextNode());
+	},
+	rect: (args) => {
+		const { tw, scene, groups } = args;
+		const el = tw.currentNode;
+		const x = getNum(el, "x", 0);
+		const y = getNum(el, "y", 0);
+		const w = getNum(el, "width", 0);
+		const h = getNum(el, "height", 0);
+		const mat = getTransformMatrix(el, groups);
+		const m = mat4.fromValues(w, 0, 0, 0, 0, h, 0, 0, 0, 0, 1, 0, x, y, 0, 1);
+		const result = mat4.multiply(mat4.create(), mat, m);
+		const isRound = el.hasAttribute("rx") || el.hasAttribute("ry");
+		const rect = {
+			...createExRect(),
+			...presAttrs(el, groups),
+			x: result[12],
+			y: result[13],
+			width: result[0],
+			height: result[5],
+			strokeSharpness: isRound ? "round" : "sharp"
+		};
+		scene.elements.push(rect);
+		walk(args, args.tw.nextNode());
+	},
+	path: (args) => {
+		const { tw, scene, groups } = args;
+		const el = tw.currentNode;
+		const mat = getTransformMatrix(el, groups);
+		const points = pointsOnPath(get(el, "d"));
+		const fillColor = get(el, "fill", "black");
+		const fillRule = get(el, "fill-rule", "nonzero");
+		let elements = [];
+		let localGroup = randomId();
+		switch (fillRule) {
+			case "nonzero":
+				let initialWindingOrder = "clockwise";
+				elements = points.map((pointArr, idx) => {
+					const tPoints = transformPoints(pointArr, mat4.clone(mat));
+					const x = tPoints[0][0];
+					const y = tPoints[0][1];
+					const [width, height] = dimensionsFromPoints(tPoints);
+					const relativePoints = tPoints.map(([_x, _y]) => [_x - x, _y - y]);
+					const windingOrder = getWindingOrder(relativePoints);
+					if (idx === 0) {
+						initialWindingOrder = windingOrder;
+						localGroup = randomId();
+					}
+					let backgroundColor = fillColor;
+					if (initialWindingOrder !== windingOrder) backgroundColor = "#FFFFFF";
+					return {
+						...createExDraw(),
+						strokeWidth: 0,
+						strokeColor: "#00000000",
+						...presAttrs(el, groups),
+						points: relativePoints,
+						backgroundColor,
+						width,
+						height,
+						x: x + getNum(el, "x", 0),
+						y: y + getNum(el, "y", 0),
+						groupIds: [localGroup]
+					};
+				});
+				break;
+			case "evenodd":
+				elements = points.map((pointArr, idx) => {
+					const tPoints = transformPoints(pointArr, mat4.clone(mat));
+					const x = tPoints[0][0];
+					const y = tPoints[0][1];
+					const [width, height] = dimensionsFromPoints(tPoints);
+					const relativePoints = tPoints.map(([_x, _y]) => [_x - x, _y - y]);
+					if (idx === 0) localGroup = randomId();
+					return {
+						...createExDraw(),
+						...presAttrs(el, groups),
+						points: relativePoints,
+						width,
+						height,
+						x: x + getNum(el, "x", 0),
+						y: y + getNum(el, "y", 0)
+					};
+				});
+				break;
+			default:
+		}
+		scene.elements = scene.elements.concat(elements);
+		walk(args, tw.nextNode());
+	}
+};
+function walk(args, nextNode) {
+	if (!nextNode) return;
+	const nodeName = nextNode.nodeName.toLowerCase();
+	if (walkers[nodeName]) walkers[nodeName](args);
+	else {
+		if (args.skippedElements && nextNode.nodeType === 1) {
+			const element = nextNode;
+			args.skippedElements.add(element.tagName.toLowerCase());
+		}
+		walk(args, args.tw.nextNode());
+	}
+}
+
+//#endregion
+//#region src/parser.ts
+const convert = (svgString) => {
+	const warnings = [];
+	if (!svgString || svgString.trim().length === 0) {
+		const error = "SVG string is empty or invalid";
+		console.error(error);
+		return {
+			hasErrors: true,
+			errors: [error],
+			content: null,
+			warnings
+		};
+	}
+	const svgDOM = DOMParser$1.parseFromString(svgString, "image/svg+xml");
+	const errorsElements = svgDOM.querySelectorAll("parsererror");
+	const hasErrors = errorsElements.length > 0;
+	let content = null;
+	if (hasErrors) console.error("There were errors while parsing the given SVG: ", [...errorsElements].map((el) => el.innerHTML));
+	else {
+		const tw = createTreeWalker(svgDOM);
+		const scene = new ExcalidrawScene_default();
+		const groups = [];
+		const skippedElements = /* @__PURE__ */ new Set();
+		walk({
+			tw,
+			scene,
+			groups,
+			root: svgDOM,
+			skippedElements
+		}, tw.nextNode());
+		content = scene.toExJSON();
+		const elementCount = content?.elements?.length || 0;
+		if (elementCount === 0) {
+			const warning = "Conversion produced 0 elements - the SVG may contain only unsupported elements or be empty";
+			console.warn(warning);
+			warnings.push(warning);
+		}
+		if (skippedElements.size > 0) {
+			const warning = `Skipped unsupported elements: ${Array.from(skippedElements).join(", ")}`;
+			console.warn(warning);
+			warnings.push(warning);
+		}
+		if (elementCount > 0) console.log(`✓ Successfully converted ${elementCount} SVG elements to Excalidraw format`);
+	}
+	return {
+		hasErrors,
+		errors: hasErrors ? errorsElements : null,
+		content,
+		warnings
+	};
+};
+
+//#endregion
+export { convert };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "headless-svg-to-excalidraw",
+  "version": "0.0.1",
+  "description": "Convert SVG to Excalidraw's file format, no browser required.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/chroma-js": "^2.1.3",
+    "tsdown": "^0.20.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "chroma-js": "^2.1.2",
+    "gl-matrix": "^3.3.0",
+    "linkedom": "^0.18.12",
+    "nanoid": "5.0.9",
+    "path-data-parser": "^0.1.0",
+    "points-on-curve": "^0.2.0",
+    "points-on-path": "^0.2.1",
+    "roughjs": "^4.4.1"
+  }
+}