Generate SVG from TDDocument

[SamyPesse]

I'm playing with using tldraw for a project, it's great! 🎉

I'm blocked when trying to render a saved TDDocument json into a SVG without rendering the whole <Tldraw /> component.

I've tried:

function documentToSVG(document: TDDocument): string {
  const app = new TldrawApp();
  app.loadDocument(document);
   return app.copySvg();
}

But it doesn't seem to work and return an almost empty SVG. It also tries to copy to the clipboard.

What is the best way to implement this documentToSVG in a browser environment (no server-side rendering) but without rendering <Tldraw /> ?

[SamyPesse]

After a quick investigation, it looks like it's currently impossible to generate a SVG from a TDDocument without a react rendering first because export as SVG relies on looking up the svg element https://github.com/tldraw/tldraw/blob/8ab16f1362b58a7bbc73884dbeef32445efdb470/packages/tldraw/src/state/shapes/TDShapeUtil.tsx#L181 that is being created during the rendering https://github.com/tldraw/tldraw/blob/8ab16f1362b58a7bbc73884dbeef32445efdb470/packages/tldraw/src/state/shapes/RectangleUtil/RectangleUtil.tsx#L88

Overall I think it'd be great if tldraw could generate the SVG independently from rendering the complete editor. I think it can be quite common to use the editor to edit, store the document and wanting to render it as a quick image somewhere.

[steveruizok]

We were just discussing this on the discord. You're right, it would be nice for each shape to be able to describe its svg without rendering via React, but currently that's not implemented.