fix(SVGImport): Skip id attribute from normalization (#10079)

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)

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');
+  });
 });

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';