From 03c426fd1057fb40f6955fb2b18165b301a557b1 Mon Sep 17 00:00:00 2001
From: Miroljub <46632388+miroljub1995@users.noreply.github.com>
Date: Mon, 26 Aug 2024 09:15:19 +0200
Subject: [PATCH] fix(SVGImport): Skip `id` attribute from normalization
 (#10079)

---
 CHANGELOG.md                         |  1 +
 src/parser/loadSVGFromString.test.ts | 14 ++++++++++++++
 src/parser/normalizeValue.ts         |  7 ++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd7a75b6d4d..c9f0c4de854 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(SVGImport): Allow parsing of 'id' attribute that starts with a number [#10079](https://github.com/fabricjs/fabric.js/pull/10079)
 - fix(filter): pixelate filter has non square pixels in webgl (#10081)
 - feat(Canvas): Avoid styling the lower canvas with absolute positioning [#10077](https://github.com/fabricjs/fabric.js/pull/10077)
 - chore(TS): Add missing export type for Text events [#10076](https://github.com/fabricjs/fabric.js/pull/10076)
diff --git a/src/parser/loadSVGFromString.test.ts b/src/parser/loadSVGFromString.test.ts
index b5a98a36e09..de1fed8b2fd 100644
--- a/src/parser/loadSVGFromString.test.ts
+++ b/src/parser/loadSVGFromString.test.ts
@@ -1,4 +1,5 @@
 import { Path } from '../shapes/Path';
+import { Rect } from '../shapes/Rect';
 import { loadSVGFromString } from './loadSVGFromString';
 
 describe('loadSVGFromString', () => {
@@ -30,4 +31,17 @@ describe('loadSVGFromString', () => {
       expect(parsedSvg.objects[0] instanceof Path).toBe(true);
     }
   });
+
+  it('returns successful parse of svg with id starting with number', async () => {
+    const str = `<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect id="123xyz" width="10" height="10" />
+      </svg>`;
+
+    const parsedSvg = await loadSVGFromString(str);
+
+    expect(
+      parsedSvg.objects[0] instanceof Rect &&
+        (parsedSvg.objects[0] as Rect & { id: string }).id,
+    ).toBe('123xyz');
+  });
 });
diff --git a/src/parser/normalizeValue.ts b/src/parser/normalizeValue.ts
index 7b68160a3ab..dcea0364005 100644
--- a/src/parser/normalizeValue.ts
+++ b/src/parser/normalizeValue.ts
@@ -56,7 +56,12 @@ export function normalizeValue(
     } else if (fillIndex === -1 && strokeIndex > -1) {
       ouputValue = STROKE;
     }
-  } else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') {
+  } else if (
+    attr === 'href' ||
+    attr === 'xlink:href' ||
+    attr === 'font' ||
+    attr === 'id'
+  ) {
     return value;
   } else if (attr === 'imageSmoothing') {
     return value === 'optimizeQuality';