How to make exportToSvg embed scene content ?

[bric3]

Hi everyone,

I come from this issue #3737, and specifically this comment #3737 (comment), as advised by @ad1992.

Here's the comment, verbatim.

---

@ad1992 Hello again, I have a question again on this scene embedding. I'd like to do that programmatically. However I can't seem to get excalidraw embed the scene when calling exportToSvg

import React from "react";
import Excalidraw, {
    exportToBlob,
    exportToSvg,
    getSceneVersion,
    serializeAsJSON,
} from "@excalidraw/excalidraw";

// placeholder for functions
window.saveAsSvg = null;


...

export default function App() {
    const excalidrawRef = React.useRef(null);

    ...

    window.saveAsSvg = (exportParams) => {
        return exportToSvg({
            elements: excalidrawRef.current.getSceneElements(),
            appState: {
                ...excalidrawRef.current.getAppState(),
                ...exportParams
            },
        });
    };

    return (
        <div className="excalidraw-wrapper">
            <Excalidraw
                ref={excalidrawRef}
                initialData={{ appState: {
                        exportEmbedScene: true
                    }
                }}
                ...
            />
        </div>
    );
}

I also tried to pass the exportEmbedScene to the exportToSvg directly (as part of the appState). But this doesn't seem to work. The scene never gets embedded. Looking at the code

excalidraw/src/scene/export.ts

Lines 68 to 134 in 5cd9215

	export const exportToSvg = (
	elements: readonly NonDeletedExcalidrawElement[],
	{
	exportBackground,
	exportPadding = DEFAULT_EXPORT_PADDING,
	viewBackgroundColor,
	exportWithDarkMode,
	exportScale = 1,
	metadata = "",
	}: {
	exportBackground: boolean;
	exportPadding?: number;
	exportScale?: number;
	viewBackgroundColor: string;
	exportWithDarkMode?: boolean;
	metadata?: string;
	},
	): SVGSVGElement => {
	const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
	// initialze SVG root
	const svgRoot = document.createElementNS(SVG_NS, "svg");
	svgRoot.setAttribute("version", "1.1");
	svgRoot.setAttribute("xmlns", SVG_NS);
	svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
	svgRoot.setAttribute("width", `${width * exportScale}`);
	svgRoot.setAttribute("height", `${height * exportScale}`);
	if (exportWithDarkMode) {
	svgRoot.setAttribute("filter", THEME_FILTER);
	}
	svgRoot.innerHTML = `
	${SVG_EXPORT_TAG}
	${metadata}
	<defs>
	<style>
	@font-face {
	font-family: "Virgil";
	src: url("https://excalidraw.com/Virgil.woff2");
	}
	@font-face {
	font-family: "Cascadia";
	src: url("https://excalidraw.com/Cascadia.woff2");
	}
	</style>
	</defs>
	`;
	// render background rect
	if (exportBackground && viewBackgroundColor) {
	const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
	rect.setAttribute("x", "0");
	rect.setAttribute("y", "0");
	rect.setAttribute("width", `${width}`);
	rect.setAttribute("height", `${height}`);
	rect.setAttribute("fill", viewBackgroundColor);
	svgRoot.appendChild(rect);
	}
	const rsvg = rough.svg(svgRoot);
	renderSceneToSvg(elements, rsvg, svgRoot, {
	offsetX: -minX + exportPadding,
	offsetY: -minY + exportPadding,
	});
	return svgRoot;
	};

I believe exportToSvg cannot embed the scene. It's likely the same for the png / jpg exports. Is it expected ?

[ad1992]

@bric3 thanks for pointing this out, yes you are right now the utils which are exported exportToSvg, exportToPng do not support embedding the scene.
If you notice it expects a metadata attribute, whatever is send in metadata will be embedded in the SVG/PNG.
The way it works in excalidraw is we send the metadata as shown here. We will add this support soon but till then as a workaround, if you are blocked at this you will have to pass metadata so that scene is embedded.
You can clone encodeSvgMetadata and encodePngMetadata to get the metadata and pass it to the export utilites.

[ad1992]

@bric3 create the issue for the same referencing this QnA, you can track #3758 for the updates.

[bric3]

Thanks, I'll keep an eye on #3758 !

[bric3]

@ad1992 Hi !

I noticed quite a few image types in a recent version of Excalidraw (16), I know there's 17 already.

export declare const IMAGE_MIME_TYPES: {
    readonly svg: "image/svg+xml";
    readonly png: "image/png";
    readonly jpg: "image/jpeg";
    readonly gif: "image/gif";
    readonly webp: "image/webp";
    readonly bmp: "image/bmp";
    readonly ico: "image/x-icon";
    readonly avif: "image/avif";
    readonly jfif: "image/jfif";
};

But I was wondering if embedding the scene was supported in some of those types (apart from PNG and SVG of course). I have doubt on the technical feasibility or practicality for bmp, gifs, icons, but for the others the question remains.

If I'm asking that, is that, if it is supported, or planed to be supported, I would like a documentation of how the scene is embedded. Because I need a way to detect the presence of scene in those binary file in another runtime (JVM based as it's for IntelliJ).

[bric3]

Actually I think I misread the code, the export clearly shows only SVG and PNG support the feature, and the enum is about image that can be embedded.

excalidraw/packages/utils/export.ts

Lines 136 to 153 in 65047cc

	if (
	blob &&
	mimeType === MIME_TYPES.png &&
	opts.appState?.exportEmbedScene
	) {
	blob = await encodePngMetadata({
	blob,
	metadata: serializeAsJSON(
	// NOTE as long as we're using the Scene hack, we need to ensure
	// we pass the original, uncloned elements when serializing
	// so that we keep ids stable
	opts.elements,
	opts.appState,
	opts.files || {},
	"local",
	),
	});
	}

That said, it might be interesting to know if embedding the scene in other file format is on the radar.