fabricjs-document-engine 1.0.2 → 1.2.0

package/dist/export/batch-render.d.cts

@@ -0,0 +1,43 @@
+import { AssetOptions } from "../assets/asset-pipeline.cjs";
+import { ExportOptions } from "./export-options.cjs";
+import { ContentLimits } from "../security/content-limits.cjs";
+import { CustomObjectDefinition } from "../fabric/object-registry.cjs";
+import { DocumentEngineError } from "../engine/errors.cjs";
+import { ExportResult } from "../engine/create-document-engine.cjs";
+import { StaticCanvas } from "fabric";
+//#region src/export/batch-render.d.ts
+/**
+ * Renders many documents with a few reusable off-screen canvases
+ * (fabric.js #4848). Each job loads a document, exports it, and then frees
+ * everything the job created: objects, their cache canvases and image
+ * elements. Memory therefore stays flat however many documents go through.
+ */
+export interface RenderDocumentsOptions extends Omit<ExportOptions, "signal"> {
+  /** How many documents render at the same time, each on its own canvas. Default 2. */
+  concurrency?: number;
+  signal?: AbortSignal;
+  /** Called after each document, rendered or failed. */
+  onProgress?: (progress: {
+    done: number;
+    total: number | undefined;
+  }) => void;
+  customObjects?: CustomObjectDefinition[];
+  assets?: AssetOptions;
+  limits?: ContentLimits;
+}
+export interface RenderedDocument {
+  /** Position of the document in the input. */
+  index: number;
+  documentId: string | undefined;
+  result?: ExportResult;
+  /** Set when this document failed. The other documents still render. */
+  error?: DocumentEngineError;
+}
+/**
+ * Renders each document and yields the results as they finish, so they can
+ * be uploaded or saved one by one instead of all being held in memory.
+ * Documents can be `FabricDocument`s or plain Fabric JSON, and can come from
+ * an async iterable, such as pages of a database query.
+ */
+export declare function renderDocuments(documents: Iterable<unknown> | AsyncIterable<unknown>, options: RenderDocumentsOptions): AsyncGenerator<RenderedDocument, void, undefined>;
+//#endregion

package/dist/export/batch-render.d.ts

@@ -0,0 +1,43 @@
+import { AssetOptions } from "../assets/asset-pipeline.js";
+import { ExportOptions } from "./export-options.js";
+import { ContentLimits } from "../security/content-limits.js";
+import { CustomObjectDefinition } from "../fabric/object-registry.js";
+import { DocumentEngineError } from "../engine/errors.js";
+import { ExportResult } from "../engine/create-document-engine.js";
+import { StaticCanvas } from "fabric";
+//#region src/export/batch-render.d.ts
+/**
+ * Renders many documents with a few reusable off-screen canvases
+ * (fabric.js #4848). Each job loads a document, exports it, and then frees
+ * everything the job created: objects, their cache canvases and image
+ * elements. Memory therefore stays flat however many documents go through.
+ */
+export interface RenderDocumentsOptions extends Omit<ExportOptions, "signal"> {
+  /** How many documents render at the same time, each on its own canvas. Default 2. */
+  concurrency?: number;
+  signal?: AbortSignal;
+  /** Called after each document, rendered or failed. */
+  onProgress?: (progress: {
+    done: number;
+    total: number | undefined;
+  }) => void;
+  customObjects?: CustomObjectDefinition[];
+  assets?: AssetOptions;
+  limits?: ContentLimits;
+}
+export interface RenderedDocument {
+  /** Position of the document in the input. */
+  index: number;
+  documentId: string | undefined;
+  result?: ExportResult;
+  /** Set when this document failed. The other documents still render. */
+  error?: DocumentEngineError;
+}
+/**
+ * Renders each document and yields the results as they finish, so they can
+ * be uploaded or saved one by one instead of all being held in memory.
+ * Documents can be `FabricDocument`s or plain Fabric JSON, and can come from
+ * an async iterable, such as pages of a database query.
+ */
+export declare function renderDocuments(documents: Iterable<unknown> | AsyncIterable<unknown>, options: RenderDocumentsOptions): AsyncGenerator<RenderedDocument, void, undefined>;
+//#endregion

package/dist/export/batch-render.js

@@ -0,0 +1,171 @@
+import { DocumentEngineError, isDocumentEngineError } from "../engine/errors.js";
+import { walkObjects } from "../fabric/walk-objects.js";
+import { createDocumentEngine } from "../engine/create-document-engine.js";
+import { StaticCanvas } from "fabric";
+//#region src/export/batch-render.ts
+/**
+* Releases a canvas's pixels now. Fabric's `dispose` drops its references,
+* but in browsers the memory behind a canvas comes back only much later,
+* when the garbage collector gets to it.
+*/
+function releaseCanvas(value) {
+	if (typeof HTMLCanvasElement !== "undefined" && value instanceof HTMLCanvasElement) {
+		value.width = 0;
+		value.height = 0;
+	}
+}
+function disposeObject(object) {
+	const owned = object;
+	for (const key of [
+		"_cacheCanvas",
+		"_filteredEl",
+		"_element",
+		"_originalElement"
+	]) releaseCanvas(owned[key]);
+	object.dispose?.();
+}
+/** Frees the objects on a canvas: their cache canvases and image elements. */
+function disposeObjects(canvas) {
+	const objects = canvas.getObjects();
+	canvas.remove(...objects);
+	walkObjects(objects, (object) => {
+		disposeObject(object);
+		if (object.clipPath) disposeObject(object.clipPath);
+	});
+	for (const key of ["backgroundImage", "overlayImage"]) {
+		const image = canvas[key];
+		if (image) {
+			disposeObject(image);
+			canvas[key] = void 0;
+		}
+	}
+}
+function createSlot(options) {
+	if (typeof document === "undefined") throw new DocumentEngineError("EXPORT_FAILED", "Rendering documents needs a browser DOM");
+	const element = document.createElement("canvas");
+	const canvas = new StaticCanvas(element, {
+		renderOnAddRemove: false,
+		enableRetinaScaling: false
+	});
+	return {
+		element,
+		canvas,
+		engine: createDocumentEngine({
+			canvas,
+			customObjects: options.customObjects,
+			assets: options.assets,
+			limits: options.limits,
+			history: { limit: 1 }
+		})
+	};
+}
+async function releaseSlot(slot) {
+	disposeObjects(slot.canvas);
+	slot.engine.destroy();
+	await slot.canvas.dispose();
+	slot.element.width = 0;
+	slot.element.height = 0;
+}
+function toEngineError(error) {
+	if (isDocumentEngineError(error)) return error;
+	const reason = error instanceof Error ? error.message : String(error);
+	return new DocumentEngineError("EXPORT_FAILED", `The document could not be rendered: ${reason}`, { cause: error });
+}
+function documentIdOf(value) {
+	const id = value?.id;
+	return typeof id === "string" ? id : void 0;
+}
+async function renderOne(slot, input, options, signal) {
+	const { concurrency: _concurrency, onProgress: _onProgress, customObjects: _custom, assets: _assets, limits: _limits, ...exportOptions } = options;
+	try {
+		await slot.engine.loadDocument(input, {
+			signal,
+			discardUnsavedChanges: true
+		});
+		return await slot.engine.export({
+			...exportOptions,
+			signal
+		});
+	} finally {
+		disposeObjects(slot.canvas);
+		slot.engine.clearHistory();
+	}
+}
+/**
+* Renders each document and yields the results as they finish, so they can
+* be uploaded or saved one by one instead of all being held in memory.
+* Documents can be `FabricDocument`s or plain Fabric JSON, and can come from
+* an async iterable, such as pages of a database query.
+*/
+async function* renderDocuments(documents, options) {
+	const concurrency = Math.max(1, Math.floor(options.concurrency ?? 2));
+	const total = Array.isArray(documents) ? documents.length : void 0;
+	const controller = new AbortController();
+	const stop = () => controller.abort();
+	options.signal?.addEventListener("abort", stop, { once: true });
+	if (options.signal?.aborted) stop();
+	const iterator = Symbol.asyncIterator in documents ? documents[Symbol.asyncIterator]() : documents[Symbol.iterator]();
+	const slots = [];
+	const idle = [];
+	const running = /* @__PURE__ */ new Map();
+	let nextIndex = 0;
+	let exhausted = false;
+	let done = 0;
+	async function take() {
+		if (exhausted) return void 0;
+		const next = await iterator.next();
+		if (next.done) {
+			exhausted = true;
+			return;
+		}
+		return {
+			index: nextIndex++,
+			value: next.value
+		};
+	}
+	function start(slot, job) {
+		const task = renderOne(slot, job.value, options, controller.signal).then((result) => ({
+			index: job.index,
+			documentId: documentIdOf(job.value),
+			result
+		}), (error) => ({
+			index: job.index,
+			documentId: documentIdOf(job.value),
+			error: toEngineError(error)
+		}));
+		running.set(job.index, task.finally(() => idle.push(slot)));
+	}
+	try {
+		while (true) {
+			if (controller.signal.aborted) throw new DocumentEngineError("EXPORT_ABORTED", "Rendering was cancelled");
+			while (running.size < concurrency && !exhausted) {
+				const job = await take();
+				if (!job) break;
+				let slot = idle.pop();
+				if (!slot) {
+					slot = createSlot(options);
+					slots.push(slot);
+				}
+				start(slot, job);
+			}
+			if (running.size === 0) break;
+			const finished = await Promise.race(running.values());
+			running.delete(finished.index);
+			done += 1;
+			options.onProgress?.({
+				done,
+				total
+			});
+			if (controller.signal.aborted) throw new DocumentEngineError("EXPORT_ABORTED", "Rendering was cancelled");
+			yield finished;
+		}
+	} finally {
+		controller.abort();
+		options.signal?.removeEventListener("abort", stop);
+		await Promise.allSettled(running.values());
+		await Promise.all(slots.map(releaseSlot));
+		if (!exhausted) await iterator.return?.();
+	}
+}
+//#endregion
+export { disposeObjects, renderDocuments };

package/dist/export/export-options.cjs

@@ -1,5 +1,6 @@
 const require_errors = require("../engine/errors.cjs");
 //#region src/export/export-options.ts
+const DEFAULT_MAX_EMBEDDED_IMAGE_BYTES = 26214400;
 const formats = /* @__PURE__ */ new Set([
 	"png",
 	"jpeg",
@@ -32,6 +33,17 @@ function normalizeExportOptions(options) {
 		"content",
 		"selection"
 	].includes(area)) throw invalid(`Unknown export area "${String(area)}", use canvas, content, selection or a rectangle`);
+	const svg = options.svg ?? {};
+	const textOnPath = svg.textOnPath ?? "vector";
+	if (textOnPath !== "vector" && textOnPath !== "fabric") throw invalid("svg.textOnPath must be \"vector\" or \"fabric\"");
+	const textDecorations = svg.textDecorations ?? "shapes";
+	if (textDecorations !== "shapes" && textDecorations !== "css") throw invalid("svg.textDecorations must be \"shapes\" or \"css\"");
+	const embedImages = svg.embedImages ?? false;
+	if (embedImages !== true && embedImages !== false && embedImages !== "require") throw invalid("svg.embedImages must be true, false or \"require\"");
+	const maxEmbeddedImageBytes = svg.maxEmbeddedImageBytes ?? 26214400;
+	if (!isPositive(maxEmbeddedImageBytes)) throw invalid("svg.maxEmbeddedImageBytes must be greater than zero");
+	const embedFonts = svg.embedFonts ?? {};
+	if (typeof embedFonts !== "object" || Array.isArray(embedFonts)) throw invalid("svg.embedFonts must map font families to font files");
 	return {
 		format: options.format,
 		scale,
@@ -39,9 +51,17 @@ function normalizeExportOptions(options) {
 		area,
 		padding,
 		background: options.background ?? "keep",
-		signal: options.signal
+		signal: options.signal,
+		svg: {
+			textOnPath,
+			textDecorations,
+			embedImages,
+			maxEmbeddedImageBytes,
+			embedFonts
+		}
 	};
 }
 //#endregion
+exports.DEFAULT_MAX_EMBEDDED_IMAGE_BYTES = DEFAULT_MAX_EMBEDDED_IMAGE_BYTES;
 exports.isRasterFormat = isRasterFormat;
 exports.normalizeExportOptions = normalizeExportOptions;

package/dist/export/export-options.d.cts

@@ -8,6 +8,33 @@ export interface ExportRect {
 }
 export type ExportArea = "canvas" | "content" | "selection" | ExportRect;
 export type ExportBackground = "keep" | "transparent" | (string & {});
+/** A font file for `embedFonts`: a URL to fetch, or the file's bytes. */
+export type FontSource = string | ArrayBuffer | Uint8Array | Blob;
+export interface SvgExportOptions {
+  /**
+   * How text that follows a path is written. `vector` (the default) writes
+   * each character where Fabric draws it on the canvas. `fabric` keeps
+   * Fabric's own output, which ignores `pathAlign` and draws text
+   * backgrounds and underlines straight.
+   */
+  textOnPath?: "vector" | "fabric";
+  /**
+   * How underlines, overlines and line-throughs of ordinary text are written.
+   * `shapes` (the default) draws them where the canvas does; `css` keeps
+   * Fabric's `text-decoration`, which readers place in their own way.
+   */
+  textDecorations?: "shapes" | "css";
+  /**
+   * Puts every image into the file as data, so the SVG opens anywhere
+   * without the original image URLs. `require` blocks the export when an
+   * image cannot be embedded; `true` exports anyway with a warning.
+   */
+  embedImages?: boolean | "require";
+  /** The largest image, in bytes, to embed. Default 25 MB. */
+  maxEmbeddedImageBytes?: number;
+  /** Font files to put into the file, by font family, for the families the canvas uses. */
+  embedFonts?: Record<string, FontSource>;
+}
 export interface ExportOptions {
   format: ExportFormat;
   scale?: number;
@@ -16,5 +43,7 @@ export interface ExportOptions {
   padding?: number;
   background?: ExportBackground;
   signal?: AbortSignal;
+  /** Options for SVG exports. */
+  svg?: SvgExportOptions;
 }
 //#endregion

package/dist/export/export-options.d.ts

@@ -8,6 +8,33 @@ export interface ExportRect {
 }
 export type ExportArea = "canvas" | "content" | "selection" | ExportRect;
 export type ExportBackground = "keep" | "transparent" | (string & {});
+/** A font file for `embedFonts`: a URL to fetch, or the file's bytes. */
+export type FontSource = string | ArrayBuffer | Uint8Array | Blob;
+export interface SvgExportOptions {
+  /**
+   * How text that follows a path is written. `vector` (the default) writes
+   * each character where Fabric draws it on the canvas. `fabric` keeps
+   * Fabric's own output, which ignores `pathAlign` and draws text
+   * backgrounds and underlines straight.
+   */
+  textOnPath?: "vector" | "fabric";
+  /**
+   * How underlines, overlines and line-throughs of ordinary text are written.
+   * `shapes` (the default) draws them where the canvas does; `css` keeps
+   * Fabric's `text-decoration`, which readers place in their own way.
+   */
+  textDecorations?: "shapes" | "css";
+  /**
+   * Puts every image into the file as data, so the SVG opens anywhere
+   * without the original image URLs. `require` blocks the export when an
+   * image cannot be embedded; `true` exports anyway with a warning.
+   */
+  embedImages?: boolean | "require";
+  /** The largest image, in bytes, to embed. Default 25 MB. */
+  maxEmbeddedImageBytes?: number;
+  /** Font files to put into the file, by font family, for the families the canvas uses. */
+  embedFonts?: Record<string, FontSource>;
+}
 export interface ExportOptions {
   format: ExportFormat;
   scale?: number;
@@ -16,5 +43,7 @@ export interface ExportOptions {
   padding?: number;
   background?: ExportBackground;
   signal?: AbortSignal;
+  /** Options for SVG exports. */
+  svg?: SvgExportOptions;
 }
 //#endregion

package/dist/export/export-options.js

@@ -1,5 +1,6 @@
 import { DocumentEngineError } from "../engine/errors.js";
 //#region src/export/export-options.ts
+const DEFAULT_MAX_EMBEDDED_IMAGE_BYTES = 26214400;
 const formats = /* @__PURE__ */ new Set([
 	"png",
 	"jpeg",
@@ -32,6 +33,17 @@ function normalizeExportOptions(options) {
 		"content",
 		"selection"
 	].includes(area)) throw invalid(`Unknown export area "${String(area)}", use canvas, content, selection or a rectangle`);
+	const svg = options.svg ?? {};
+	const textOnPath = svg.textOnPath ?? "vector";
+	if (textOnPath !== "vector" && textOnPath !== "fabric") throw invalid("svg.textOnPath must be \"vector\" or \"fabric\"");
+	const textDecorations = svg.textDecorations ?? "shapes";
+	if (textDecorations !== "shapes" && textDecorations !== "css") throw invalid("svg.textDecorations must be \"shapes\" or \"css\"");
+	const embedImages = svg.embedImages ?? false;
+	if (embedImages !== true && embedImages !== false && embedImages !== "require") throw invalid("svg.embedImages must be true, false or \"require\"");
+	const maxEmbeddedImageBytes = svg.maxEmbeddedImageBytes ?? 26214400;
+	if (!isPositive(maxEmbeddedImageBytes)) throw invalid("svg.maxEmbeddedImageBytes must be greater than zero");
+	const embedFonts = svg.embedFonts ?? {};
+	if (typeof embedFonts !== "object" || Array.isArray(embedFonts)) throw invalid("svg.embedFonts must map font families to font files");
 	return {
 		format: options.format,
 		scale,
@@ -39,8 +51,15 @@ function normalizeExportOptions(options) {
 		area,
 		padding,
 		background: options.background ?? "keep",
-		signal: options.signal
+		signal: options.signal,
+		svg: {
+			textOnPath,
+			textDecorations,
+			embedImages,
+			maxEmbeddedImageBytes,
+			embedFonts
+		}
 	};
 }
 //#endregion
-export { isRasterFormat, normalizeExportOptions };
+export { DEFAULT_MAX_EMBEDDED_IMAGE_BYTES, isRasterFormat, normalizeExportOptions };

package/dist/export/preflight-export.cjs

@@ -3,6 +3,7 @@ const require_image_check = require("../assets/image-check.cjs");
 const require_export_options = require("./export-options.cjs");
 const require_object_ids = require("../fabric/object-ids.cjs");
 const require_walk_objects = require("../fabric/walk-objects.cjs");
+const require_text_on_path = require("./svg/text-on-path.cjs");
 //#region src/export/preflight-export.ts
 function imageElementsOf(object) {
 	const elements = [];
@@ -49,7 +50,7 @@ function isBroken(element) {
 function shortUrl(url) {
 	return url.length > 80 ? `${url.slice(0, 77)}...` : url;
 }
-async function preflightExport(canvas, format, fonts, assetOptions) {
+async function preflightExport(canvas, format, fonts, assetOptions, svgOptions) {
 	const problems = [];
 	const warnings = [];
 	if (format === "json") return {
@@ -71,13 +72,21 @@ async function preflightExport(canvas, format, fonts, assetOptions) {
 			url,
 			objectIds
 		});
-		else if (format === "svg" && !require_image_check.isPortableUrl(url)) warnings.push({
+		else if (format === "svg" && !require_image_check.isPortableUrl(url) && !svgOptions?.embedImages) warnings.push({
 			code: "ASSET_NOT_PORTABLE",
 			message: `The SVG links to ${shortUrl(url)}, which only exists in this tab`,
 			url,
 			objectIds
 		});
 	}
+	if (format === "svg" && svgOptions?.textOnPath === "fabric") {
+		const texts = require_text_on_path.findTextOnPath(canvas);
+		if (texts.length > 0) warnings.push({
+			code: "TEXT_ON_PATH_APPROXIMATED",
+			message: "Text on a path is written with Fabric's own SVG, which ignores pathAlign and draws text backgrounds and underlines straight. Use svg.textOnPath: 'vector' to match the canvas.",
+			objectIds: texts.map((text) => require_object_ids.readObjectId(text)).filter((id) => id !== void 0)
+		});
+	}
 	const fontSet = typeof document === "undefined" ? void 0 : document.fonts;
 	if (fontSet) await fontSet.ready;
 	for (const font of await require_font_check.findUnavailableFonts(fonts, assetOptions.loadFont)) {

package/dist/export/preflight-export.d.cts

@@ -1,7 +1,7 @@
 import { AssetWarning } from "../assets/asset-pipeline.cjs";
 import { StaticCanvas } from "fabric";
 //#region src/export/preflight-export.d.ts
-export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT";
+export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT" | "IMAGE_NOT_EMBEDDED" | "TOO_LARGE";
 export interface ExportProblem {
   code: ExportProblemCode;
   message: string;

package/dist/export/preflight-export.d.ts

@@ -1,7 +1,7 @@
 import { AssetWarning } from "../assets/asset-pipeline.js";
 import { StaticCanvas } from "fabric";
 //#region src/export/preflight-export.d.ts
-export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT";
+export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT" | "IMAGE_NOT_EMBEDDED" | "TOO_LARGE";
 export interface ExportProblem {
   code: ExportProblemCode;
   message: string;

package/dist/export/preflight-export.js

@@ -3,6 +3,7 @@ import { isCrossOriginUrl, isPortableUrl } from "../assets/image-check.js";
 import { isRasterFormat } from "./export-options.js";
 import { readObjectId } from "../fabric/object-ids.js";
 import { childrenOf } from "../fabric/walk-objects.js";
+import { findTextOnPath } from "./svg/text-on-path.js";
 //#region src/export/preflight-export.ts
 function imageElementsOf(object) {
 	const elements = [];
@@ -49,7 +50,7 @@ function isBroken(element) {
 function shortUrl(url) {
 	return url.length > 80 ? `${url.slice(0, 77)}...` : url;
 }
-async function preflightExport(canvas, format, fonts, assetOptions) {
+async function preflightExport(canvas, format, fonts, assetOptions, svgOptions) {
 	const problems = [];
 	const warnings = [];
 	if (format === "json") return {
@@ -71,13 +72,21 @@ async function preflightExport(canvas, format, fonts, assetOptions) {
 			url,
 			objectIds
 		});
-		else if (format === "svg" && !isPortableUrl(url)) warnings.push({
+		else if (format === "svg" && !isPortableUrl(url) && !svgOptions?.embedImages) warnings.push({
 			code: "ASSET_NOT_PORTABLE",
 			message: `The SVG links to ${shortUrl(url)}, which only exists in this tab`,
 			url,
 			objectIds
 		});
 	}
+	if (format === "svg" && svgOptions?.textOnPath === "fabric") {
+		const texts = findTextOnPath(canvas);
+		if (texts.length > 0) warnings.push({
+			code: "TEXT_ON_PATH_APPROXIMATED",
+			message: "Text on a path is written with Fabric's own SVG, which ignores pathAlign and draws text backgrounds and underlines straight. Use svg.textOnPath: 'vector' to match the canvas.",
+			objectIds: texts.map((text) => readObjectId(text)).filter((id) => id !== void 0)
+		});
+	}
 	const fontSet = typeof document === "undefined" ? void 0 : document.fonts;
 	if (fontSet) await fontSet.ready;
 	for (const font of await findUnavailableFonts(fonts, assetOptions.loadFont)) {

package/dist/export/render-export.cjs

@@ -1,3 +1,9 @@
+const require_object_ids = require("../fabric/object-ids.cjs");
+const require_overrides = require("./svg/overrides.cjs");
+const require_text_on_path = require("./svg/text-on-path.cjs");
+const require_clip_masks = require("./svg/clip-masks.cjs");
+const require_raster_object = require("./svg/raster-object.cjs");
+const require_text_decorations = require("./svg/text-decorations.cjs");
 //#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 (!require_clip_masks.hasNestedClipPath(object)) continue;
+		pictures.set(object, require_raster_object.rasterMarkup(canvas, object, Math.max(2, scale * 2), limits));
+		const id = require_object_ids.readObjectId(object);
+		if (id !== void 0) rasterizedObjectIds.push(id);
+	}
+	const baseWriter = (object) => {
+		if (textOnPath && require_text_on_path.isTextOnPath(object)) return (reviver) => require_text_on_path.textOnPathToSVG(object, reviver);
+		if (decorations && require_text_decorations.hasStraightDecorations(object)) return (reviver) => require_text_decorations.decoratedTextToSVG(object, reviver);
+	};
+	const writerFor = (object) => {
+		const picture = pictures.get(object);
+		if (picture !== void 0) return () => picture;
+		const base = baseWriter(object);
+		if (require_clip_masks.ownClipPathIsInverted(object)) {
+			const prototypeWriter = (reviver) => Object.getPrototypeOf(object).toSVG.call(object, reviver);
+			return (reviver) => require_clip_masks.writeWithInvertedMask(object, base ?? prototypeWriter, reviver);
+		}
+		return base;
+	};
+	const svg = require_overrides.withSvgOverrides(canvas, writerFor, () => canvas.toSVG({
 		viewBox: {
 			x: area.left,
 			y: area.top,
@@ -48,10 +96,15 @@ function renderSvg(canvas, area, scale) {
 		},
 		width: String(area.width * scale),
 		height: String(area.height * scale)
-	});
+	})).result;
+	return {
+		svg: repairFabricSvg(svg),
+		rasterizedObjectIds
+	};
 }
 //#endregion
 exports.mimeTypes = mimeTypes;
 exports.renderRaster = renderRaster;
 exports.renderSvg = renderSvg;
+exports.repairFabricSvg = repairFabricSvg;
 exports.withExportView = withExportView;