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

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

@ -3870,14 +3870,18 @@ class App extends React.Component<AppProps, AppState> {
nextFiles[fileData.id] = fileData; nextFiles[fileData.id] = fileData;
if (fileData.mimeType === MIME_TYPES.svg) { if (fileData.mimeType === MIME_TYPES.svg) {
const restoredDataURL = getDataURL_sync( try {
normalizeSVG(dataURLToString(fileData.dataURL)), const restoredDataURL = getDataURL_sync(
MIME_TYPES.svg, normalizeSVG(dataURLToString(fileData.dataURL)),
); MIME_TYPES.svg,
if (fileData.dataURL !== restoredDataURL) { );
// bump version so persistence layer can update the store if (fileData.dataURL !== restoredDataURL) {
fileData.version = (fileData.version ?? 1) + 1; // bump version so persistence layer can update the store
fileData.dataURL = restoredDataURL; fileData.version = (fileData.version ?? 1) + 1;
fileData.dataURL = restoredDataURL;
}
} catch (error) {
console.error(error);
} }
} }
} }

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

@ -105,20 +105,40 @@ export const normalizeSVG = (SVGString: string) => {
svg.setAttribute("xmlns", SVG_NS); svg.setAttribute("xmlns", SVG_NS);
} }
if (!svg.hasAttribute("width") || !svg.hasAttribute("height")) { let width = svg.getAttribute("width");
const viewBox = svg.getAttribute("viewBox"); let height = svg.getAttribute("height");
let width = svg.getAttribute("width") || "50";
let height = svg.getAttribute("height") || "50"; // 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");
if (!width || !height) {
width = width || "50";
height = height || "50";
if (viewBox) { if (viewBox) {
const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/); const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
if (match) { if (match) {
[, width, height] = match; [, width, height] = match;
} }
} }
svg.setAttribute("width", width); svg.setAttribute("width", width);
svg.setAttribute("height", height); svg.setAttribute("height", height);
} }
// Make sure viewBox is set
if (!viewBox) {
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
}
return svg.outerHTML; return svg.outerHTML;
} }
}; };