SVG export (#598)

* first draft of export to SVG. WIP

* enabled text rendeing - which is not quite right atm

* placeholder svg icon

* size the canvas based on the bounding box of elements

* Do not add opacity attributes if default

* render background rect

* Ensure arrows are in the same SVG group

* parse font-size from font

* export web fonts

* use fixed locations for fonts

* Rename export functions

* renamed export file

* oops broke the icon.

src/scene/data.ts

@@ -4,7 +4,7 @@ import { getDefaultAppState } from "../appState";
 
 import { AppState } from "../types";
 import { ExportType } from "./types";
-import { getExportCanvasPreview } from "./getExportCanvasPreview";
+import { exportToCanvas, exportToSvg } from "./export";
 import nanoid from "nanoid";
 import { fileOpen, fileSave } from "browser-nativefs";
 import { getCommonBounds } from "../element";
@@ -194,7 +194,19 @@ export async function exportCanvas(
     return window.alert(i18n.t("alerts.cannotExportEmptyCanvas"));
   // calculate smallest area to fit the contents in
 
-  const tempCanvas = getExportCanvasPreview(elements, {
+  if (type === "svg") {
+    const tempSvg = exportToSvg(elements, {
+      exportBackground,
+      viewBackgroundColor,
+      exportPadding,
+    });
+    await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
+      fileName: `${name}.svg`,
+    });
+    return;
+  }
+
+  const tempCanvas = exportToCanvas(elements, {
     exportBackground,
     viewBackgroundColor,
     exportPadding,

src/scene/export.ts

@@ -0,0 +1,112 @@
+import rough from "roughjs/bin/rough";
+import { ExcalidrawElement } from "../element/types";
+import { getCommonBounds } from "../element/bounds";
+import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
+import { distance, SVG_NS } from "../utils";
+
+export function exportToCanvas(
+  elements: readonly ExcalidrawElement[],
+  {
+    exportBackground,
+    exportPadding = 10,
+    viewBackgroundColor,
+    scale = 1,
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    scale?: number;
+    viewBackgroundColor: string;
+  },
+  createCanvas: (width: number, height: number) => any = function(
+    width,
+    height,
+  ) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width * scale;
+    tempCanvas.height = height * scale;
+    return tempCanvas;
+  },
+) {
+  // calculate smallest area to fit the contents in
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const width = distance(minX, maxX) + exportPadding * 2;
+  const height = distance(minY, maxY) + exportPadding * 2;
+
+  const tempCanvas: any = createCanvas(width, height);
+  tempCanvas.getContext("2d")?.scale(scale, scale);
+
+  renderScene(
+    elements,
+    rough.canvas(tempCanvas),
+    tempCanvas,
+    {
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      scrollX: 0,
+      scrollY: 0,
+    },
+    {
+      offsetX: -minX + exportPadding,
+      offsetY: -minY + exportPadding,
+      renderScrollbars: false,
+      renderSelection: false,
+    },
+  );
+  return tempCanvas;
+}
+
+export function exportToSvg(
+  elements: readonly ExcalidrawElement[],
+  {
+    exportBackground,
+    exportPadding = 10,
+    viewBackgroundColor,
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    viewBackgroundColor: string;
+  },
+): SVGSVGElement {
+  // calculate canvas dimensions
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const width = distance(minX, maxX) + exportPadding * 2;
+  const height = distance(minY, maxY) + exportPadding * 2;
+
+  // 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.innerHTML = `
+  <defs>
+    <style>
+      @font-face {
+        font-family: "Virgil";
+        src: url("https://excalidraw.com/FG_Virgil.ttf");
+      }
+      @font-face {
+        font-family: "Cascadia";
+        src: url("https://excalidraw.com/Cascadia.ttf");
+      }
+    </style>
+  </defs>
+  `;
+
+  // render backgroiund 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;
+}

src/scene/getExportCanvasPreview.ts

@@ -1,55 +0,0 @@
-import rough from "roughjs/bin/rough";
-import { ExcalidrawElement } from "../element/types";
-import { getCommonBounds } from "../element/bounds";
-import { renderScene } from "../renderer/renderScene";
-import { distance } from "../utils";
-
-export function getExportCanvasPreview(
-  elements: readonly ExcalidrawElement[],
-  {
-    exportBackground,
-    exportPadding = 10,
-    viewBackgroundColor,
-    scale = 1,
-  }: {
-    exportBackground: boolean;
-    exportPadding?: number;
-    scale?: number;
-    viewBackgroundColor: string;
-  },
-  createCanvas: (width: number, height: number) => any = function(
-    width,
-    height,
-  ) {
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width * scale;
-    tempCanvas.height = height * scale;
-    return tempCanvas;
-  },
-) {
-  // calculate smallest area to fit the contents in
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding * 2;
-
-  const tempCanvas: any = createCanvas(width, height);
-  tempCanvas.getContext("2d")?.scale(scale, scale);
-
-  renderScene(
-    elements,
-    rough.canvas(tempCanvas),
-    tempCanvas,
-    {
-      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
-      scrollX: 0,
-      scrollY: 0,
-    },
-    {
-      offsetX: -minX + exportPadding,
-      offsetY: -minY + exportPadding,
-      renderScrollbars: false,
-      renderSelection: false,
-    },
-  );
-  return tempCanvas;
-}

src/scene/types.ts

@@ -16,4 +16,4 @@ export interface Scene {
   elements: ExcalidrawTextElement[];
 }
 
-export type ExportType = "png" | "clipboard" | "backend";
+export type ExportType = "png" | "clipboard" | "backend" | "svg";