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/components/ExportDialog.tsx

@@ -4,11 +4,11 @@ import React, { useState, useEffect, useRef } from "react";
 
 import { Modal } from "./Modal";
 import { ToolButton } from "./ToolButton";
-import { clipboard, exportFile, downloadFile, link } from "./icons";
+import { clipboard, exportFile, downloadFile, svgFile, link } from "./icons";
 import { Island } from "./Island";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
-import { getExportCanvasPreview } from "../scene/getExportCanvasPreview";
+import { exportToCanvas } from "../scene/export";
 import { ActionsManagerInterface, UpdaterFn } from "../actions/types";
 import Stack from "./Stack";
 
@@ -36,6 +36,7 @@ function ExportModal({
   actionManager,
   syncActionResult,
   onExportToPng,
+  onExportToSvg,
   onExportToClipboard,
   onExportToBackend,
   onCloseRequest,
@@ -46,6 +47,7 @@ function ExportModal({
   actionManager: ActionsManagerInterface;
   syncActionResult: UpdaterFn;
   onExportToPng: ExportCB;
+  onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
   onExportToBackend: ExportCB;
   onCloseRequest: () => void;
@@ -70,7 +72,7 @@ function ExportModal({
 
   useEffect(() => {
     const previewNode = previewRef.current;
-    const canvas = getExportCanvasPreview(exportedElements, {
+    const canvas = exportToCanvas(exportedElements, {
       exportBackground,
       viewBackgroundColor,
       exportPadding,
@@ -136,6 +138,13 @@ function ExportModal({
               onClick={() => onExportToPng(exportedElements, scale)}
               ref={pngButton}
             />
+            <ToolButton
+              type="button"
+              icon={svgFile}
+              title={t("buttons.exportToSvg")}
+              aria-label={t("buttons.exportToSvg")}
+              onClick={() => onExportToSvg(exportedElements, scale)}
+            />
             {probablySupportsClipboard && (
               <ToolButton
                 type="button"
@@ -213,6 +222,7 @@ export function ExportDialog({
   actionManager,
   syncActionResult,
   onExportToPng,
+  onExportToSvg,
   onExportToClipboard,
   onExportToBackend,
 }: {
@@ -222,6 +232,7 @@ export function ExportDialog({
   actionManager: ActionsManagerInterface;
   syncActionResult: UpdaterFn;
   onExportToPng: ExportCB;
+  onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
   onExportToBackend: ExportCB;
 }) {
@@ -257,6 +268,7 @@ export function ExportDialog({
             actionManager={actionManager}
             syncActionResult={syncActionResult}
             onExportToPng={onExportToPng}
+            onExportToSvg={onExportToSvg}
             onExportToClipboard={onExportToClipboard}
             onExportToBackend={onExportToBackend}
             onCloseRequest={handleClose}

src/components/icons.tsx

@@ -85,3 +85,12 @@ export const downloadFile = (
     />
   </svg>
 );
+
+export const svgFile = (
+  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 50 50">
+    <path
+      fill="currentColor"
+      d="M 19 8 L 19 20 L 31 20 L 31 8 Z M 3 11 C 1.34375 11 0 12.34375 0 14 C 0 15.65625 1.34375 17 3 17 C 4.300781 17 5.398438 16.160156 5.8125 15 L 17 15 C 12.121094 17.609375 8.785156 22.492188 8.125 28 L 10.15625 28 C 10.804688 23.21875 13.734375 18.980469 18 16.71875 L 18 13 L 5.8125 13 C 5.398438 11.839844 4.300781 11 3 11 Z M 47 11 C 45.699219 11 44.601563 11.839844 44.1875 13 L 32 13 L 32 16.71875 C 36.269531 18.976563 39.195313 23.203125 39.84375 28 L 41.875 28 C 41.21875 22.476563 37.882813 17.609375 33 15 L 44.1875 15 C 44.601563 16.160156 45.699219 17 47 17 C 48.65625 17 50 15.65625 50 14 C 50 12.34375 48.65625 11 47 11 Z M 3 29 L 3 41 L 15 41 L 15 29 Z M 35 29 L 35 41 L 47 41 L 47 29 Z"
+    ></path>
+  </svg>
+);