fabricjs-document-engine 1.0.2 → 1.2.0

package/dist/export/render-export.js

@@ -1,3 +1,9 @@
+import { readObjectId } from "../fabric/object-ids.js";
+import { withSvgOverrides } from "./svg/overrides.js";
+import { isTextOnPath, textOnPathToSVG } from "./svg/text-on-path.js";
+import { hasNestedClipPath, ownClipPathIsInverted, writeWithInvertedMask } from "./svg/clip-masks.js";
+import { rasterMarkup } from "./svg/raster-object.js";
+import { decoratedTextToSVG, hasStraightDecorations } from "./svg/text-decorations.js";
 //#region src/export/render-export.ts
 const identity = [
 	1,
@@ -34,12 +40,54 @@ function withExportView(canvas, background, format, work) {
 }
 function renderRaster(canvas, area, format, scale, quality) {
 	const rendered = canvas.toCanvasElement(scale, area);
+	const release = () => {
+		rendered.width = 0;
+		rendered.height = 0;
+	};
 	return new Promise((resolve, reject) => {
 		rendered.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error(`The browser could not encode ${format}`)), mimeTypes[format], quality);
-	});
+	}).finally(release);
 }
-function renderSvg(canvas, area, scale) {
-	return canvas.toSVG({
+/**
+* Fabric 6 and 7 write `rotate="..."style="..."` with no space for the
+* spaces in text on a path, which is not valid XML: browsers, Illustrator and
+* Inkscape refuse to open the file. Put the missing space back.
+*/
+function repairFabricSvg(svg) {
+	return svg.replace(/(rotate="[^"]*")(style=)/g, "$1 $2");
+}
+/**
+* Writes the SVG with the engine's corrections on top of Fabric's output:
+* curved text and decorations as the canvas draws them, inverted clip paths
+* as masks, and objects with nested clip paths as pictures. Every other
+* object is written by Fabric unchanged.
+*/
+function renderSvg(canvas, area, scale, options, limits) {
+	const textOnPath = (options?.textOnPath ?? "vector") === "vector";
+	const decorations = (options?.textDecorations ?? "shapes") === "shapes";
+	const rasterizedObjectIds = [];
+	const pictures = /* @__PURE__ */ new Map();
+	for (const object of canvas.getObjects()) {
+		if (!hasNestedClipPath(object)) continue;
+		pictures.set(object, rasterMarkup(canvas, object, Math.max(2, scale * 2), limits));
+		const id = readObjectId(object);
+		if (id !== void 0) rasterizedObjectIds.push(id);
+	}
+	const baseWriter = (object) => {
+		if (textOnPath && isTextOnPath(object)) return (reviver) => textOnPathToSVG(object, reviver);
+		if (decorations && hasStraightDecorations(object)) return (reviver) => decoratedTextToSVG(object, reviver);
+	};
+	const writerFor = (object) => {
+		const picture = pictures.get(object);
+		if (picture !== void 0) return () => picture;
+		const base = baseWriter(object);
+		if (ownClipPathIsInverted(object)) {
+			const prototypeWriter = (reviver) => Object.getPrototypeOf(object).toSVG.call(object, reviver);
+			return (reviver) => writeWithInvertedMask(object, base ?? prototypeWriter, reviver);
+		}
+		return base;
+	};
+	const svg = withSvgOverrides(canvas, writerFor, () => canvas.toSVG({
 		viewBox: {
 			x: area.left,
 			y: area.top,
@@ -48,7 +96,11 @@ function renderSvg(canvas, area, scale) {
 		},
 		width: String(area.width * scale),
 		height: String(area.height * scale)
-	});
+	})).result;
+	return {
+		svg: repairFabricSvg(svg),
+		rasterizedObjectIds
+	};
 }
 //#endregion
-export { mimeTypes, renderRaster, renderSvg, withExportView };
+export { mimeTypes, renderRaster, renderSvg, repairFabricSvg, withExportView };

package/dist/export/svg/clip-masks.cjs

@@ -0,0 +1,39 @@
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+//#region src/export/svg/clip-masks.ts
+/** True when a clip path anywhere in the object's tree has a clip path of its own. */
+function hasNestedClipPath(object) {
+	let nested = false;
+	require_walk_objects.walkObjects([object], (child) => {
+		if (child.clipPath?.clipPath) nested = true;
+	});
+	return nested;
+}
+/** True when the object's own clip path is inverted (and simple). */
+function ownClipPathIsInverted(object) {
+	const clipPath = object.clipPath;
+	return Boolean(clipPath?.inverted) && !clipPath?.clipPath;
+}
+const FAR = 1e6;
+/**
+* Turns the object's own `<clipPath>` in Fabric's markup into an inverting
+* `<mask>`. `write` produces the markup with the clip path not inverted; the
+* id Fabric gave the clip path picks out exactly this object's definition.
+*/
+function writeWithInvertedMask(object, write, reviver) {
+	const clipPath = object.clipPath;
+	clipPath.inverted = false;
+	let markup;
+	try {
+		markup = write(reviver);
+	} finally {
+		clipPath.inverted = true;
+	}
+	const id = clipPath.clipPathId;
+	if (!id) return markup;
+	const definition = new RegExp(`<clipPath id="${id}"\\s*>([\\s\\S]*?)</clipPath>`);
+	return markup.replace(definition, (_, shape) => `<mask id="${id}" maskUnits="userSpaceOnUse" x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}">\n<rect x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}" fill="white" />\n<g fill="black" stroke="none">${shape}</g>\n</mask>`).replace(`clip-path="url(#${id})"`, `mask="url(#${id})"`);
+}
+//#endregion
+exports.hasNestedClipPath = hasNestedClipPath;
+exports.ownClipPathIsInverted = ownClipPathIsInverted;
+exports.writeWithInvertedMask = writeWithInvertedMask;

package/dist/export/svg/clip-masks.js

@@ -0,0 +1,37 @@
+import { walkObjects } from "../../fabric/walk-objects.js";
+//#region src/export/svg/clip-masks.ts
+/** True when a clip path anywhere in the object's tree has a clip path of its own. */
+function hasNestedClipPath(object) {
+	let nested = false;
+	walkObjects([object], (child) => {
+		if (child.clipPath?.clipPath) nested = true;
+	});
+	return nested;
+}
+/** True when the object's own clip path is inverted (and simple). */
+function ownClipPathIsInverted(object) {
+	const clipPath = object.clipPath;
+	return Boolean(clipPath?.inverted) && !clipPath?.clipPath;
+}
+const FAR = 1e6;
+/**
+* Turns the object's own `<clipPath>` in Fabric's markup into an inverting
+* `<mask>`. `write` produces the markup with the clip path not inverted; the
+* id Fabric gave the clip path picks out exactly this object's definition.
+*/
+function writeWithInvertedMask(object, write, reviver) {
+	const clipPath = object.clipPath;
+	clipPath.inverted = false;
+	let markup;
+	try {
+		markup = write(reviver);
+	} finally {
+		clipPath.inverted = true;
+	}
+	const id = clipPath.clipPathId;
+	if (!id) return markup;
+	const definition = new RegExp(`<clipPath id="${id}"\\s*>([\\s\\S]*?)</clipPath>`);
+	return markup.replace(definition, (_, shape) => `<mask id="${id}" maskUnits="userSpaceOnUse" x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}">\n<rect x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}" fill="white" />\n<g fill="black" stroke="none">${shape}</g>\n</mask>`).replace(`clip-path="url(#${id})"`, `mask="url(#${id})"`);
+}
+//#endregion
+export { hasNestedClipPath, ownClipPathIsInverted, writeWithInvertedMask };

package/dist/export/svg/embed-assets.cjs

@@ -0,0 +1,250 @@
+const require_content_limits = require("../../security/content-limits.cjs");
+const require_object_ids = require("../../fabric/object-ids.cjs");
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+//#region src/export/svg/embed-assets.ts
+const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong"
+]);
+function unescapeXml(value) {
+	return value.replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function shortUrl(url) {
+	return url.length > 80 ? `${url.slice(0, 77)}...` : url;
+}
+function bytesToBase64(bytes) {
+	let binary = "";
+	const chunk = 32768;
+	for (let index = 0; index < bytes.length; index += chunk) binary += String.fromCharCode(...bytes.subarray(index, index + chunk));
+	return btoa(binary);
+}
+async function blobToDataUrl(blob, type) {
+	const bytes = new Uint8Array(await blob.arrayBuffer());
+	return `data:${type ?? (blob.type || "application/octet-stream")};base64,${bytesToBase64(bytes)}`;
+}
+/** Images on the canvas by URL, with the ids of the objects that show them. */
+function imagesOnCanvas(canvas) {
+	const images = /* @__PURE__ */ new Map();
+	const pending = canvas.getObjects().map((object) => ({
+		object,
+		ownerId: require_object_ids.readObjectId(object)
+	}));
+	const note = (element, id) => {
+		if (typeof HTMLImageElement === "undefined" || !(element instanceof HTMLImageElement)) return;
+		for (const url of /* @__PURE__ */ new Set([
+			element.currentSrc,
+			element.src,
+			element.getAttribute("src") ?? ""
+		])) {
+			if (!url) continue;
+			const entry = images.get(url) ?? {
+				element,
+				objectIds: /* @__PURE__ */ new Set()
+			};
+			if (id !== void 0) entry.objectIds.add(id);
+			images.set(url, entry);
+		}
+	};
+	while (pending.length > 0) {
+		const { object, ownerId } = pending.pop();
+		const id = require_object_ids.readObjectId(object) ?? ownerId;
+		const withElement = object;
+		if (typeof withElement.getElement === "function") note(withElement.getElement(), id);
+		for (const paintValue of [object.fill, object.stroke]) note(paintValue?.source, id);
+		require_walk_objects.childrenOf(object).forEach((child) => pending.push({
+			object: child,
+			ownerId: id
+		}));
+		if (object.clipPath) pending.push({
+			object: object.clipPath,
+			ownerId: id
+		});
+	}
+	return images;
+}
+function drawToDataUrl(element) {
+	if (element.naturalWidth * element.naturalHeight > 67108864) throw new Error("the picture is too large to copy");
+	const canvas = document.createElement("canvas");
+	canvas.width = element.naturalWidth;
+	canvas.height = element.naturalHeight;
+	try {
+		canvas.getContext("2d").drawImage(element, 0, 0);
+		return canvas.toDataURL("image/png");
+	} finally {
+		canvas.width = 0;
+		canvas.height = 0;
+	}
+}
+async function embedImage(url, element, context) {
+	if (!context.isAllowedUrl(url)) return { reason: "its address is not allowed" };
+	let fetchError = "";
+	try {
+		const response = await fetch(url, {
+			signal: context.signal,
+			mode: "cors",
+			credentials: "same-origin"
+		});
+		if (!response.ok) fetchError = `the server answered HTTP ${response.status}`;
+		else {
+			if (Number(response.headers.get("content-length") ?? "0") > context.options.maxEmbeddedImageBytes) {
+				response.body?.cancel().catch(() => void 0);
+				return { reason: `it is larger than ${context.options.maxEmbeddedImageBytes} bytes` };
+			}
+			const blob = await response.blob();
+			if (blob.size > context.options.maxEmbeddedImageBytes) return { reason: `it is larger than ${context.options.maxEmbeddedImageBytes} bytes` };
+			return { dataUrl: await blobToDataUrl(blob, blob.type.startsWith("image/") ? blob.type : void 0) };
+		}
+	} catch (error) {
+		if (context.signal?.aborted) throw error;
+		fetchError = "it could not be downloaded, usually because the other site does not allow it with CORS";
+	}
+	if (element && element.complete && element.naturalWidth > 0) try {
+		return { dataUrl: drawToDataUrl(element) };
+	} catch {
+		return { reason: `${fetchError}, and the loaded picture is from another site without CORS` };
+	}
+	return { reason: fetchError };
+}
+async function embedImages(svg, context, warnings, problems) {
+	const attribute = /(\s(?:xlink:href|href))="([^"]*)"/g;
+	const urls = /* @__PURE__ */ new Set();
+	for (const match of svg.matchAll(attribute)) {
+		const url = unescapeXml(match[2]);
+		if (url && !url.startsWith("data:") && !url.startsWith("#")) urls.add(url);
+	}
+	if (urls.size === 0) return svg;
+	const images = imagesOnCanvas(context.canvas);
+	const replacements = /* @__PURE__ */ new Map();
+	await Promise.all([...urls].map(async (url) => {
+		const known = images.get(url) ?? images.get(new URL(url, globalThis.location?.href).href);
+		const outcome = await embedImage(url, known?.element, context);
+		if ("dataUrl" in outcome) {
+			replacements.set(url, outcome.dataUrl);
+			return;
+		}
+		const message = `The image ${shortUrl(url)} was not embedded in the SVG because ${outcome.reason}`;
+		problems.push(message);
+		warnings.push({
+			code: "IMAGE_NOT_EMBEDDED",
+			message,
+			url,
+			objectIds: [...known?.objectIds ?? []]
+		});
+	}));
+	return svg.replace(attribute, (whole, name, value) => {
+		const replacement = replacements.get(unescapeXml(value));
+		return replacement ? `${name}="${escapeAttribute(replacement)}"` : whole;
+	});
+}
+function fontMimeType(bytes) {
+	const tag = String.fromCharCode(...bytes.subarray(0, 4));
+	if (tag === "wOF2") return "font/woff2";
+	if (tag === "wOFF") return "font/woff";
+	if (tag === "OTTO") return "font/otf";
+	return "font/ttf";
+}
+async function fontBytes(source, signal) {
+	if (typeof source === "string") {
+		const response = await fetch(source, { signal });
+		if (!response.ok) throw new Error(`HTTP ${response.status}`);
+		return new Uint8Array(await response.arrayBuffer());
+	}
+	if (source instanceof Uint8Array) return source;
+	if (source instanceof ArrayBuffer) return new Uint8Array(source);
+	return new Uint8Array(await source.arrayBuffer());
+}
+/** Font families the canvas uses, including per-character styles. */
+function familiesInUse(canvas) {
+	const families = /* @__PURE__ */ new Set();
+	const add = (family) => {
+		if (typeof family !== "string") return;
+		for (const part of family.split(",")) {
+			const name = part.trim().replace(/^['"]|['"]$/g, "");
+			if (name && !GENERIC_FAMILIES.has(name.toLowerCase())) families.add(name);
+		}
+	};
+	const pending = [...canvas.getObjects()];
+	while (pending.length > 0) {
+		const object = pending.pop();
+		const text = object;
+		add(text.fontFamily);
+		for (const line of Object.values(text.styles ?? {})) for (const style of Object.values(line ?? {})) add(style?.fontFamily);
+		pending.push(...require_walk_objects.childrenOf(object));
+	}
+	return families;
+}
+async function embedFonts(svg, context, warnings, problems) {
+	const sources = context.options.embedFonts;
+	if (Object.keys(sources).length === 0) return svg;
+	const rules = [];
+	for (const family of familiesInUse(context.canvas)) {
+		const source = sources[family];
+		if (source === void 0) {
+			const message = `The font "${family}" was not embedded in the SVG because embedFonts has no file for it`;
+			warnings.push({
+				code: "FONT_NOT_EMBEDDED",
+				message,
+				family,
+				objectIds: []
+			});
+			continue;
+		}
+		try {
+			const bytes = await fontBytes(source, context.signal);
+			const name = family.replace(/["\\<>]/g, "");
+			rules.push(`@font-face { font-family: "${name}"; src: url("data:${fontMimeType(bytes)};base64,${bytesToBase64(bytes)}"); }`);
+		} catch (error) {
+			if (context.signal?.aborted) throw error;
+			const message = `The font "${family}" was not embedded in the SVG because its file could not be read: ${error instanceof Error ? error.message : String(error)}`;
+			problems.push(message);
+			warnings.push({
+				code: "FONT_NOT_EMBEDDED",
+				message,
+				family,
+				objectIds: []
+			});
+		}
+	}
+	if (rules.length === 0) return svg;
+	const style = `<defs>\n<style type="text/css"><![CDATA[\n${rules.join("\n")}\n]]></style>\n</defs>\n`;
+	return svg.replace(/(<svg\b[^>]*>\s*)/, `$1${style}`);
+}
+/**
+* Embeds images and fonts as the options ask. With `embedImages: 'require'`,
+* `problems` lists what could not be embedded so the caller can block the
+* export.
+*/
+async function embedSvgAssets(svg, canvas, options, signal, isAllowedUrl = require_content_limits.isSafeImageUrl) {
+	const warnings = [];
+	const problems = [];
+	const context = {
+		canvas,
+		options,
+		signal,
+		isAllowedUrl
+	};
+	let result = svg;
+	if (options.embedImages) result = await embedImages(result, context, warnings, problems);
+	result = await embedFonts(result, context, warnings, []);
+	return {
+		svg: result,
+		warnings,
+		problems
+	};
+}
+//#endregion
+exports.embedSvgAssets = embedSvgAssets;

package/dist/export/svg/embed-assets.js

@@ -0,0 +1,250 @@
+import { isSafeImageUrl } from "../../security/content-limits.js";
+import { readObjectId } from "../../fabric/object-ids.js";
+import { childrenOf } from "../../fabric/walk-objects.js";
+//#region src/export/svg/embed-assets.ts
+const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong"
+]);
+function unescapeXml(value) {
+	return value.replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function shortUrl(url) {
+	return url.length > 80 ? `${url.slice(0, 77)}...` : url;
+}
+function bytesToBase64(bytes) {
+	let binary = "";
+	const chunk = 32768;
+	for (let index = 0; index < bytes.length; index += chunk) binary += String.fromCharCode(...bytes.subarray(index, index + chunk));
+	return btoa(binary);
+}
+async function blobToDataUrl(blob, type) {
+	const bytes = new Uint8Array(await blob.arrayBuffer());
+	return `data:${type ?? (blob.type || "application/octet-stream")};base64,${bytesToBase64(bytes)}`;
+}
+/** Images on the canvas by URL, with the ids of the objects that show them. */
+function imagesOnCanvas(canvas) {
+	const images = /* @__PURE__ */ new Map();
+	const pending = canvas.getObjects().map((object) => ({
+		object,
+		ownerId: readObjectId(object)
+	}));
+	const note = (element, id) => {
+		if (typeof HTMLImageElement === "undefined" || !(element instanceof HTMLImageElement)) return;
+		for (const url of /* @__PURE__ */ new Set([
+			element.currentSrc,
+			element.src,
+			element.getAttribute("src") ?? ""
+		])) {
+			if (!url) continue;
+			const entry = images.get(url) ?? {
+				element,
+				objectIds: /* @__PURE__ */ new Set()
+			};
+			if (id !== void 0) entry.objectIds.add(id);
+			images.set(url, entry);
+		}
+	};
+	while (pending.length > 0) {
+		const { object, ownerId } = pending.pop();
+		const id = readObjectId(object) ?? ownerId;
+		const withElement = object;
+		if (typeof withElement.getElement === "function") note(withElement.getElement(), id);
+		for (const paintValue of [object.fill, object.stroke]) note(paintValue?.source, id);
+		childrenOf(object).forEach((child) => pending.push({
+			object: child,
+			ownerId: id
+		}));
+		if (object.clipPath) pending.push({
+			object: object.clipPath,
+			ownerId: id
+		});
+	}
+	return images;
+}
+function drawToDataUrl(element) {
+	if (element.naturalWidth * element.naturalHeight > 67108864) throw new Error("the picture is too large to copy");
+	const canvas = document.createElement("canvas");
+	canvas.width = element.naturalWidth;
+	canvas.height = element.naturalHeight;
+	try {
+		canvas.getContext("2d").drawImage(element, 0, 0);
+		return canvas.toDataURL("image/png");
+	} finally {
+		canvas.width = 0;
+		canvas.height = 0;
+	}
+}
+async function embedImage(url, element, context) {
+	if (!context.isAllowedUrl(url)) return { reason: "its address is not allowed" };
+	let fetchError = "";
+	try {
+		const response = await fetch(url, {
+			signal: context.signal,
+			mode: "cors",
+			credentials: "same-origin"
+		});
+		if (!response.ok) fetchError = `the server answered HTTP ${response.status}`;
+		else {
+			if (Number(response.headers.get("content-length") ?? "0") > context.options.maxEmbeddedImageBytes) {
+				response.body?.cancel().catch(() => void 0);
+				return { reason: `it is larger than ${context.options.maxEmbeddedImageBytes} bytes` };
+			}
+			const blob = await response.blob();
+			if (blob.size > context.options.maxEmbeddedImageBytes) return { reason: `it is larger than ${context.options.maxEmbeddedImageBytes} bytes` };
+			return { dataUrl: await blobToDataUrl(blob, blob.type.startsWith("image/") ? blob.type : void 0) };
+		}
+	} catch (error) {
+		if (context.signal?.aborted) throw error;
+		fetchError = "it could not be downloaded, usually because the other site does not allow it with CORS";
+	}
+	if (element && element.complete && element.naturalWidth > 0) try {
+		return { dataUrl: drawToDataUrl(element) };
+	} catch {
+		return { reason: `${fetchError}, and the loaded picture is from another site without CORS` };
+	}
+	return { reason: fetchError };
+}
+async function embedImages(svg, context, warnings, problems) {
+	const attribute = /(\s(?:xlink:href|href))="([^"]*)"/g;
+	const urls = /* @__PURE__ */ new Set();
+	for (const match of svg.matchAll(attribute)) {
+		const url = unescapeXml(match[2]);
+		if (url && !url.startsWith("data:") && !url.startsWith("#")) urls.add(url);
+	}
+	if (urls.size === 0) return svg;
+	const images = imagesOnCanvas(context.canvas);
+	const replacements = /* @__PURE__ */ new Map();
+	await Promise.all([...urls].map(async (url) => {
+		const known = images.get(url) ?? images.get(new URL(url, globalThis.location?.href).href);
+		const outcome = await embedImage(url, known?.element, context);
+		if ("dataUrl" in outcome) {
+			replacements.set(url, outcome.dataUrl);
+			return;
+		}
+		const message = `The image ${shortUrl(url)} was not embedded in the SVG because ${outcome.reason}`;
+		problems.push(message);
+		warnings.push({
+			code: "IMAGE_NOT_EMBEDDED",
+			message,
+			url,
+			objectIds: [...known?.objectIds ?? []]
+		});
+	}));
+	return svg.replace(attribute, (whole, name, value) => {
+		const replacement = replacements.get(unescapeXml(value));
+		return replacement ? `${name}="${escapeAttribute(replacement)}"` : whole;
+	});
+}
+function fontMimeType(bytes) {
+	const tag = String.fromCharCode(...bytes.subarray(0, 4));
+	if (tag === "wOF2") return "font/woff2";
+	if (tag === "wOFF") return "font/woff";
+	if (tag === "OTTO") return "font/otf";
+	return "font/ttf";
+}
+async function fontBytes(source, signal) {
+	if (typeof source === "string") {
+		const response = await fetch(source, { signal });
+		if (!response.ok) throw new Error(`HTTP ${response.status}`);
+		return new Uint8Array(await response.arrayBuffer());
+	}
+	if (source instanceof Uint8Array) return source;
+	if (source instanceof ArrayBuffer) return new Uint8Array(source);
+	return new Uint8Array(await source.arrayBuffer());
+}
+/** Font families the canvas uses, including per-character styles. */
+function familiesInUse(canvas) {
+	const families = /* @__PURE__ */ new Set();
+	const add = (family) => {
+		if (typeof family !== "string") return;
+		for (const part of family.split(",")) {
+			const name = part.trim().replace(/^['"]|['"]$/g, "");
+			if (name && !GENERIC_FAMILIES.has(name.toLowerCase())) families.add(name);
+		}
+	};
+	const pending = [...canvas.getObjects()];
+	while (pending.length > 0) {
+		const object = pending.pop();
+		const text = object;
+		add(text.fontFamily);
+		for (const line of Object.values(text.styles ?? {})) for (const style of Object.values(line ?? {})) add(style?.fontFamily);
+		pending.push(...childrenOf(object));
+	}
+	return families;
+}
+async function embedFonts(svg, context, warnings, problems) {
+	const sources = context.options.embedFonts;
+	if (Object.keys(sources).length === 0) return svg;
+	const rules = [];
+	for (const family of familiesInUse(context.canvas)) {
+		const source = sources[family];
+		if (source === void 0) {
+			const message = `The font "${family}" was not embedded in the SVG because embedFonts has no file for it`;
+			warnings.push({
+				code: "FONT_NOT_EMBEDDED",
+				message,
+				family,
+				objectIds: []
+			});
+			continue;
+		}
+		try {
+			const bytes = await fontBytes(source, context.signal);
+			const name = family.replace(/["\\<>]/g, "");
+			rules.push(`@font-face { font-family: "${name}"; src: url("data:${fontMimeType(bytes)};base64,${bytesToBase64(bytes)}"); }`);
+		} catch (error) {
+			if (context.signal?.aborted) throw error;
+			const message = `The font "${family}" was not embedded in the SVG because its file could not be read: ${error instanceof Error ? error.message : String(error)}`;
+			problems.push(message);
+			warnings.push({
+				code: "FONT_NOT_EMBEDDED",
+				message,
+				family,
+				objectIds: []
+			});
+		}
+	}
+	if (rules.length === 0) return svg;
+	const style = `<defs>\n<style type="text/css"><![CDATA[\n${rules.join("\n")}\n]]></style>\n</defs>\n`;
+	return svg.replace(/(<svg\b[^>]*>\s*)/, `$1${style}`);
+}
+/**
+* Embeds images and fonts as the options ask. With `embedImages: 'require'`,
+* `problems` lists what could not be embedded so the caller can block the
+* export.
+*/
+async function embedSvgAssets(svg, canvas, options, signal, isAllowedUrl = isSafeImageUrl) {
+	const warnings = [];
+	const problems = [];
+	const context = {
+		canvas,
+		options,
+		signal,
+		isAllowedUrl
+	};
+	let result = svg;
+	if (options.embedImages) result = await embedImages(result, context, warnings, problems);
+	result = await embedFonts(result, context, warnings, []);
+	return {
+		svg: result,
+		warnings,
+		problems
+	};
+}
+//#endregion
+export { embedSvgAssets };

package/dist/export/svg/overrides.cjs

@@ -0,0 +1,32 @@
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+//#region src/export/svg/overrides.ts
+/**
+* Runs `work` while chosen objects on the canvas, including objects in
+* groups, write their SVG with `writerFor`. Any toSVG an app set on an
+* object itself is put back afterwards. Returns how many objects were
+* handled.
+*/
+function withSvgOverrides(canvas, writerFor, work) {
+	const patched = [];
+	require_walk_objects.walkObjects(canvas.getObjects(), (object) => {
+		const writer = writerFor(object);
+		if (!writer) return;
+		patched.push([object, Object.getOwnPropertyDescriptor(object, "toSVG")]);
+		Object.defineProperty(object, "toSVG", {
+			configurable: true,
+			writable: true,
+			value: writer
+		});
+	});
+	try {
+		return {
+			result: work(),
+			count: patched.length
+		};
+	} finally {
+		for (const [object, own] of patched) if (own) Object.defineProperty(object, "toSVG", own);
+		else delete object.toSVG;
+	}
+}
+//#endregion
+exports.withSvgOverrides = withSvgOverrides;