smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* render svg with a specified precision

* moved precision to a constant

* fix test case  to use rounded values
This commit is contained in:
Preet 2021-05-11 19:35:35 -07:00 • committed by GitHub
parent 8068d1f853
commit 07839f8d20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/renderer/renderElement.ts
View file

@ -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}`);