fix: handle other elements before the svg element (withastro#12516)

* fix multiple root nodes * add changeset * remove conditional * handle no svg case
apatel369 · Nov 25, 2024 · cb9322c · cb9322c
1 parent 1ec852e
commit cb9322c
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 1 deletion.
diff --git a/.changeset/eight-seahorses-attend.md b/.changeset/eight-seahorses-attend.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Handle multiple root nodes on SVG files
diff --git a/packages/astro/src/assets/utils/svg.ts b/packages/astro/src/assets/utils/svg.ts
@@ -5,7 +5,13 @@ import type { ImageMetadata } from '../types.js';
 
 function parseSvg(contents: string) {
 	const root = parse(contents);
-	const [{ attributes, children }] = root.children;
+	const svgNode = root.children.find(
+		({ name, type }: { name: string; type: number }) => type === 1 /* Element */ && name === 'svg',
+	);
+	if (!svgNode) {
+		throw new Error('SVG file does not contain an <svg> element');
+	}
+	const { attributes, children } = svgNode;
 	const body = renderSync({ ...root, children });
 
 	return { attributes, body };

diff --git a/packages/astro/test/core-image-svg.test.js b/packages/astro/test/core-image-svg.test.js
@@ -273,6 +273,17 @@ describe('astro:assets - SVG Components', () => {
 					assert.equal(!!$svg.attr('xmlns:xlink'), false);
 					assert.equal(!!$svg.attr('version'), false);
 				});
+				it('ignores additional root level nodes', () => {
+					let $svg = $('#additionalNodes');
+					// Ensure we only have the svg node
+					assert.equal($svg.children().length, 1);
+					assert.equal($svg.children()[0].name, 'svg');
+					$svg = $svg.children('svg');
+					assert.equal($svg.length, 1);
+					assert.equal(!!$svg.attr('xmlns'), false);
+					assert.equal(!!$svg.attr('xmlns:xlink'), false);
+					assert.equal(!!$svg.attr('version'), false);
+				});
 			});
 			describe('additional props', () => {
 				let $;

diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/dragon.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/dragon.svg
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/strip.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/strip.astro
@@ -1,5 +1,6 @@
 ---
 import Alpine from '~/assets/alpine-multi-color.svg'
+import Dragon from '~/assets/dragon.svg'
 ---
 <html>
 <head>
@@ -9,5 +10,8 @@ import Alpine from '~/assets/alpine-multi-color.svg'
 	<div id="base">
 		<Alpine />
 	</div>
+	<div id="additionalNodes">
+		<Dragon />
+	</div>
 </body>
 </html>