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

fix: normalize svg using only absolute sizing (#8854)

Browse source
This commit is contained in:
Ryan Di 2024-11-27 20:09:44 +08:00 • committed by GitHub
parent 31e2a0cb4a
commit b5652b8e36
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/excalidraw/components/App.tsx
View file

@ -3870,6 +3870,7 @@ class App extends React.Component<AppProps, AppState> {
nextFiles[fileData.id] = fileData;
if (fileData.mimeType === MIME_TYPES.svg) {
try {
const restoredDataURL = getDataURL_sync(
normalizeSVG(dataURLToString(fileData.dataURL)),
MIME_TYPES.svg,
@ -3879,6 +3880,9 @@ class App extends React.Component<AppProps, AppState> {
fileData.version = (fileData.version ?? 1) + 1;
fileData.dataURL = restoredDataURL;
}
} catch (error) {
console.error(error);
}
}
}

26
packages/excalidraw/element/image.ts
View file

@ -105,20 +105,40 @@ export const normalizeSVG = (SVGString: string) => {
svg.setAttribute("xmlns", SVG_NS);
}
if (!svg.hasAttribute("width") || !svg.hasAttribute("height")) {
let width = svg.getAttribute("width");
let height = svg.getAttribute("height");
// Do not use % or auto values for width/height
// to avoid scaling issues when rendering at different sizes/zoom levels
if (width?.includes("%") || width === "auto") {
width = null;
}
if (height?.includes("%") || height === "auto") {
height = null;
}
const viewBox = svg.getAttribute("viewBox");
let width = svg.getAttribute("width") || "50";
let height = svg.getAttribute("height") || "50";
if (!width || !height) {
width = width || "50";
height = height || "50";
if (viewBox) {
const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
if (match) {
[, width, height] = match;
}
}
svg.setAttribute("width", width);
svg.setAttribute("height", height);
}
// Make sure viewBox is set
if (!viewBox) {
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
}
return svg.outerHTML;
}
};