perf: Reduce SVG export size by more than half by reducing precision to 2 decimal places (#3567)

* render svg with a specified precision

* moved precision to a constant

* fix test case  to use rounded values

package.json

@@ -44,7 +44,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-scripts": "4.0.3",
-    "roughjs": "4.4.0",
+    "roughjs": "4.4.1",
     "sass": "1.32.10",
     "socket.io-client": "2.3.1",
     "typescript": "4.2.4"

src/constants.ts

@@ -142,3 +142,5 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
 export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
+
+export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;

src/renderer/renderElement.ts

@@ -33,6 +33,7 @@ import rough from "roughjs/bin/rough";
 import { Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import getFreeDrawShape from "perfect-freehand";
+import { MAX_DECIMALS_FOR_SVG_EXPORT } from "../constants";
 
 const defaultAppState = getDefaultAppState();
 
@@ -623,6 +624,22 @@ export const renderElement = (
   }
 };
 
+const roughSVGDrawWithPrecision = (
+  rsvg: RoughSVG,
+  drawable: Drawable,
+  precision?: number,
+) => {
+  if (typeof precision === "undefined") {
+    return rsvg.draw(drawable);
+  }
+  const pshape: Drawable = {
+    sets: drawable.sets,
+    shape: drawable.shape,
+    options: { ...drawable.options, fixedDecimalPlaceDigits: precision },
+  };
+  return rsvg.draw(pshape);
+};
+
 export const renderElementToSvg = (
   element: NonDeletedExcalidrawElement,
   rsvg: RoughSVG,
@@ -645,7 +662,11 @@ export const renderElementToSvg = (
     case "diamond":
     case "ellipse": {
       generateElementShape(element, generator);
-      const node = rsvg.draw(getShapeForElement(element) as Drawable);
+      const node = roughSVGDrawWithPrecision(
+        rsvg,
+        getShapeForElement(element) as Drawable,
+        MAX_DECIMALS_FOR_SVG_EXPORT,
+      );
       const opacity = element.opacity / 100;
       if (opacity !== 1) {
         node.setAttribute("stroke-opacity", `${opacity}`);
@@ -669,7 +690,11 @@ export const renderElementToSvg = (
       group.setAttribute("stroke-linecap", "round");
 
       (getShapeForElement(element) as Drawable[]).forEach((shape) => {
-        const node = rsvg.draw(shape);
+        const node = roughSVGDrawWithPrecision(
+          rsvg,
+          shape,
+          MAX_DECIMALS_FOR_SVG_EXPORT,
+        );
         if (opacity !== 1) {
           node.setAttribute("stroke-opacity", `${opacity}`);
           node.setAttribute("fill-opacity", `${opacity}`);

yarn.lock

@@ -10852,10 +10852,10 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
-roughjs@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.0.tgz#56ee4b3c8a453af8debc03b81e636dcab9efcdb2"
-  integrity sha512-mDjSVK/RdRwdi4Dw9u5eoMiEsblEr6y2ZpOSyYa5IAAPbpUqplPezWbj4+J2gJlnxKKcRX+ccH26LFDyplhXXQ==
+roughjs@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.1.tgz#3af79db6abdcb0f32764d1138f99dc9e01027736"
+  integrity sha512-/RZvyVquID319VDc9HsF8wn8VPpbMBVdr4NMCi7mta9UeBBeqP6h5Hg4GZXG29DL6jwTkfMjyth/MF7Hn6Sq/w==
   dependencies:
     path-data-parser "^0.1.0"
     points-on-curve "^0.2.0"