From 2ff0715f9a67fbbce4a1efeaf069755d0ffcb4ea Mon Sep 17 00:00:00 2001
From: Michael Stramel <m.stramel89@gmail.com>
Date: Wed, 25 Sep 2024 15:39:35 -0500
Subject: [PATCH] test: add supporting tests

---
 packages/astro/test/core-image-svg.test.js    | 269 ++++++++++++++++++
 .../test/fixtures/core-image-svg/package.json |  11 +
 .../src/assets/alpine-multi-color.svg         |  10 +
 .../core-image-svg/src/assets/astro.svg       |   4 +
 .../src/assets/chevron-right.svg              |   3 +
 .../core-image-svg/src/assets/github.svg      |   6 +
 .../core-image-svg/src/assets/penguin.svg     |   1 +
 .../core-image-svg/src/assets/plus.svg        |   3 +
 .../core-image-svg/src/pages/index.astro      |  17 ++
 .../core-image-svg/src/pages/inline.astro     |  22 ++
 .../core-image-svg/src/pages/multiple.astro   |  27 ++
 .../core-image-svg/src/pages/props.astro      |  13 +
 .../core-image-svg/src/pages/size.astro       |  26 ++
 .../core-image-svg/src/pages/strip.astro      |  13 +
 .../core-image-svg/src/pages/title.astro      |  13 +
 .../fixtures/core-image-svg/tsconfig.json     |  11 +
 pnpm-lock.yaml                                |   6 +
 17 files changed, 455 insertions(+)
 create mode 100644 packages/astro/test/core-image-svg.test.js
 create mode 100644 packages/astro/test/fixtures/core-image-svg/package.json
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/assets/alpine-multi-color.svg
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/assets/astro.svg
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/assets/chevron-right.svg
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/assets/github.svg
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/assets/penguin.svg
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/assets/plus.svg
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/index.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/inline.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/multiple.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/props.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/size.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/strip.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/src/pages/title.astro
 create mode 100644 packages/astro/test/fixtures/core-image-svg/tsconfig.json

diff --git a/packages/astro/test/core-image-svg.test.js b/packages/astro/test/core-image-svg.test.js
new file mode 100644
index 0000000000000..76efba9482c67
--- /dev/null
+++ b/packages/astro/test/core-image-svg.test.js
@@ -0,0 +1,269 @@
+import assert from 'node:assert/strict';
+import { basename } from 'node:path';
+import { Writable } from 'node:stream';
+import { after, before, describe, it } from 'node:test';
+import { removeDir } from '@astrojs/internal-helpers/fs';
+import * as cheerio from 'cheerio';
+import parseSrcset from 'parse-srcset';
+import { Logger } from '../dist/core/logger/core.js';
+import testAdapter from './test-adapter.js';
+import { testImageService } from './test-image-service.js';
+import { loadFixture } from './test-utils.js';
+
+describe('astro:svg - SVG Components', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	describe('dev', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+		/** @type {Array<{ type: any, level: 'error', message: string; }>} */
+		let logs = [];
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/core-image-svg/',
+			});
+
+			devServer = await fixture.startDevServer({
+				logger: new Logger({
+					level: 'error',
+					dest: new Writable({
+						objectMode: true,
+						write(event, _, callback) {
+							logs.push(event);
+							callback();
+						},
+					}),
+				}),
+			});
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		describe('basics', () => {
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/');
+				let html = await res.text();
+				$ = cheerio.load(html, { xml: true });
+			});
+
+			it('Adds the <svg> tag with the definition', () => {
+				const $svg = $('#definition svg');
+				assert.equal($svg.length, 1);
+				assert.equal($svg.attr('role'), 'img');
+
+				const $symbol = $svg.find('symbol');
+				assert.equal($symbol.length, 1);
+				assert.equal($symbol.attr('id').startsWith('a:'), true);
+				
+				const $use = $svg.find('symbol + use');
+				assert.equal($use.length, 1);
+				assert.equal($use.attr('xlink:href').startsWith('#a:'), true);
+				assert.equal($use.attr('xlink:href').slice(1), $symbol.attr('id'));
+			});
+			it('Adds the <svg> tag that uses the definition', () => {
+				let $svg = $('#reused svg');
+				assert.equal($svg.length, 1);
+				assert.equal($svg.attr('role'), 'img');
+
+				const $symbol = $svg.find('symbol');
+				assert.equal($symbol.length, 0);
+
+				const definitionId = $('#definition svg symbol').attr('id')
+				const $use = $svg.find('use');
+				assert.equal($use.length, 1);
+				assert.equal($use.attr('xlink:href').startsWith('#a:'), true);
+				assert.equal($use.attr('xlink:href').slice(1), definitionId);
+			});
+		});
+
+		describe('props', () => {
+			describe('size', () => {
+				let $;
+				before(async () => {
+					let res = await fixture.fetch('/size');
+					let html = await res.text();
+					$ = cheerio.load(html, { xml: true });
+				});
+
+				it('has no height and width - no dimensions set', () => {
+					let $svg = $('#base svg');
+					assert.equal($svg.length, 1);
+					assert.equal(!!$svg.attr('height'), false);
+					assert.equal(!!$svg.attr('width'), false);
+				});
+				it('has height and width - no dimensions set', () => {
+					let $svg = $('#base-with-defaults svg');
+					assert.equal($svg.length, 1);
+					assert.equal($svg.attr('height'), '1em');
+					assert.equal($svg.attr('width'), '1em');
+				});
+				it('has height and width - string size set', () => {
+					let $svg = $('#size-string svg');
+					assert.equal($svg.length, 1);
+					assert.equal($svg.attr('height'), '32');
+					assert.equal($svg.attr('width'), '32');
+					assert.equal(!!$svg.attr('size'), false);
+				});
+				it('has height and width - number size set', () => {
+					let $svg = $('#size-number svg');
+					assert.equal($svg.length, 1);
+					assert.equal($svg.attr('height'), '48');
+					assert.equal($svg.attr('width'), '48');
+					assert.equal(!!$svg.attr('size'), false);
+				});
+				it('has height and width overridden - size set', () => {
+					let $svg = $('#override-attrs svg');
+					assert.equal($svg.length, 1);
+					assert.equal($svg.attr('height'), '16');
+					assert.equal($svg.attr('width'), '16');
+					assert.equal(!!$svg.attr('size'), false);
+				});
+			});
+			describe('inline', () => {
+				let $;
+				before(async () => {
+					let res = await fixture.fetch('/inline');
+					let html = await res.text();
+					$ = cheerio.load(html, { xml: true });
+				});
+
+				it('adds the svg into the document directly', () => {
+					let $svg = $('#inline svg');
+					assert.equal($svg.length, 1);
+					assert.equal(!!$svg.attr('viewBox'), true);
+					assert.equal($svg.attr('height'), '1em');
+					assert.equal($svg.attr('width'), '1em');
+					assert.equal($svg.attr('role'), 'img');
+					assert.equal(!!$svg.attr('inline'), false);
+
+					const $symbol = $svg.find('symbol')
+					assert.equal($symbol.length, 0);
+					const $use = $svg.find('use')
+					assert.equal($use.length, 0);
+					const $path = $svg.find('path');
+					assert.equal($path.length, 1);
+				});
+				it('adds the svg into the document and overrides the dimensions', () => {
+					let $svg = $('#inline-with-size svg');
+					assert.equal($svg.length, 1);
+					assert.equal(!!$svg.attr('viewBox'), true);
+					assert.equal($svg.attr('height'), '24');
+					assert.equal($svg.attr('width'), '24');
+					assert.equal($svg.attr('role'), 'img');
+					assert.equal(!!$svg.attr('inline'), false);
+
+					const $symbol = $svg.find('symbol')
+					assert.equal($symbol.length, 0);
+					const $use = $svg.find('use')
+					assert.equal($use.length, 0);
+					const $path = $svg.find('path');
+					assert.equal($path.length, 1);
+				})
+			});
+			describe('title', () => {
+				let $;
+				before(async () => {
+					let res = await fixture.fetch('/title');
+					let html = await res.text();
+					$ = cheerio.load(html, { xml: true });
+				});
+
+				it('adds a title into the SVG', () => {
+					let $svg = $('#base svg');
+					assert.equal($svg.length, 1);
+					assert.equal(!!$svg.attr('title'), false);
+
+					const $title = $('#base svg > title');
+					assert.equal($title.length, 1);
+					assert.equal($title.text(), 'GitHub Logo')
+				});
+			});
+			describe('strip', () => {
+				let $;
+				before(async () => {
+					let res = await fixture.fetch('/strip');
+					let html = await res.text();
+					$ = cheerio.load(html, { xml: true });
+				});
+
+				it('removes unnecessary attributes', () => {
+					let $svg = $('#base 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 $;
+				before(async () => {
+					let res = await fixture.fetch('/props');
+					let html = await res.text();
+					$ = cheerio.load(html, { xml: true });
+				});
+
+				it('adds the svg into the document directly', () => {
+					let $svg = $('#base svg');
+					assert.equal($svg.length, 1);
+					assert.equal($svg.attr('aria-hidden'), 'true');
+					assert.equal($svg.attr('id'), 'plus');
+					assert.equal($svg.attr('style'), `color:red;font-size:32px`);
+					assert.equal($svg.attr('class'), 'foobar');
+					assert.equal($svg.attr('data-state'), 'open');
+
+					const $symbol = $svg.find('symbol')
+					assert.equal($symbol.length, 1);
+					const $use = $svg.find('use')
+					assert.equal($use.length, 1);
+				});
+			});
+		});
+
+		describe('multiple', () => {
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/multiple');
+				let html = await res.text();
+				$ = cheerio.load(html, { xml: true });
+			});
+
+			it('adds only one definition for each svg', () => {
+				// First SVG
+				let $svg = $('.one svg');
+				assert.equal($svg.length, 2);
+				let $symbol = $('.one svg > symbol');
+				assert.equal($symbol.length, 1);
+				let $use = $('.one svg > use');
+				assert.equal($use.length, 2);
+				let defId = $('.one.def svg > use').attr('id');
+				let useId = $('.one.use svg > use').attr('id');
+				assert.equal(defId, useId);
+
+				// Second SVG
+				$svg = $('.two svg');
+				assert.equal($svg.length, 2);
+				$symbol = $('.two svg > symbol');
+				assert.equal($symbol.length, 1);
+				$use = $('.two svg > use');
+				assert.equal($use.length, 2);
+				defId = $('.two.def svg > use').attr('id');
+				useId = $('.two.use svg > use').attr('id');
+				assert.equal(defId, useId);
+
+				
+				// Third SVG
+				$svg = $('.three svg');
+				assert.equal($svg.length, 1);
+				$symbol = $('.three svg > symbol');
+				assert.equal($symbol.length, 1);
+				$use = $('.three svg > use');
+				assert.equal($use.length, 1);
+			});
+		});
+	});
+});
diff --git a/packages/astro/test/fixtures/core-image-svg/package.json b/packages/astro/test/fixtures/core-image-svg/package.json
new file mode 100644
index 0000000000000..a4c2fd9e38b73
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@test/core-image-svg",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}
diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/alpine-multi-color.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/alpine-multi-color.svg
new file mode 100644
index 0000000000000..3654564da09bf
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/assets/alpine-multi-color.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="702px" height="134px" viewBox="0 0 702 134" version="1.1">
+    <title>Custom Preset 4 Copy 5</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M236.145,101 L240.16,88.02 L265.625,88.02 L269.64,101 L288.175,101 L264.69,27.19 L242.305,27.19 L217.445,101 L236.145,101 Z M261.61,74.985 L244.615,74.985 L253.25,47.98 L261.61,74.985 Z M317.05,101 L317.05,25.1 L299.45,25.1 L299.45,101 L317.05,101 Z M353.35,127.29 L353.349,98.719 L353.403988,98.7692 C353.956452,99.2796 354.54746,99.7372 355.177012,100.142 L355.495,100.34 C358.171667,101.953333 361.508333,102.76 365.505,102.76 C370.088333,102.76 374.3875,101.623333 378.4025,99.35 C382.4175,97.0766667 385.6625,93.795 388.1375,89.505 C390.6125,85.215 391.85,80.0266667 391.85,73.94 C391.85,67.8166667 390.630833,62.61 388.1925,58.32 C385.754167,54.03 382.591667,50.7483333 378.705,48.475 C374.818333,46.2016667 370.711667,45.065 366.385,45.065 C363.121667,45.065 360.041667,45.8991667 357.145,47.5675 C355.0594,48.7687 353.263672,50.497372 351.757816,52.753516 L351.541,53.086 L350.105,46.825 L335.75,46.825 L335.75,127.29 L353.35,127.29 Z M362.7,86.7 C361.013333,86.7 359.455,86.3883333 358.025,85.765 C356.595,85.1416667 355.458333,84.28 354.615,83.18 C353.771667,82.08 353.35,80.7966667 353.35,79.33 L353.349,79.33 L353.349,70.42 L353.3555,70.0419667 C353.403167,68.4181222 353.760667,66.9801778 354.428,65.7281333 L354.5875,65.4425 C355.4125,64.0308333 356.558333,62.94 358.025,62.17 C359.491667,61.4 361.16,61.015 363.03,61.015 C365.34,61.015 367.329167,61.5466667 368.9975,62.61 C370.665833,63.6733333 371.958333,65.1766667 372.875,67.12 C373.791667,69.0633333 374.25,71.3366667 374.25,73.94 C374.25,77.02 373.635833,79.495 372.4075,81.365 C371.179167,83.235 369.675833,84.5916667 367.8975,85.435 C366.119167,86.2783333 364.386667,86.7 362.7,86.7 Z M416.325,39.84 C419.551667,39.84 422.1,38.9875 423.97,37.2825 C425.84,35.5775 426.775,33.1666667 426.775,30.05 C426.775,27.0066667 425.84,24.5775 423.97,22.7625 C422.1,20.9475 419.551667,20.04 416.325,20.04 C412.988333,20.04 410.4125,20.9475 408.5975,22.7625 C406.7825,24.5775 405.875,27.0066667 405.875,30.05 C405.875,33.1666667 406.7825,35.5775 408.5975,37.2825 C410.4125,38.9875 412.988333,39.84 416.325,39.84 Z M425.125,101 L425.125,46.495 L407.525,46.495 L407.525,101 L425.125,101 Z M462.965,101 L462.965,78.175 L462.968125,77.6150568 C463.009792,73.9158144 463.468125,70.8908144 464.343125,68.5400568 L464.4775,68.1925 C465.485833,65.6808333 466.833333,63.8566667 468.52,62.72 C470.206667,61.5833333 472.058333,61.015 474.075,61.015 C476.055,61.015 477.741667,61.7025 479.135,63.0775 C480.528333,64.4525 481.225,66.57 481.225,69.43 L481.225,69.43 L481.225,101 L498.935,101 L498.935,69.43 C498.935,64.7 498.238333,60.5016667 496.845,56.835 C495.451667,53.1683333 493.279167,50.29 490.3275,48.2 C487.375833,46.11 483.571667,45.065 478.915,45.065 C474.845,45.065 471.205833,46.2016667 467.9975,48.475 C466.006121,49.8860345 464.276073,51.7985434 462.807357,54.2125268 L462.656,54.466 L460.875,46.825 L445.365,46.825 L445.365,101 L462.965,101 Z M537.82,102.76 C542.293333,102.76 546.244167,101.953333 549.6725,100.34 C553.100833,98.7266667 555.8875,96.545 558.0325,93.795 C560.1775,91.045 561.525,87.9833333 562.075,84.61 L562.075,84.61 L544.585,84.61 C544.108333,86.04 543.265,87.085 542.055,87.745 C540.845,88.405 539.433333,88.735 537.82,88.735 C535.84,88.735 534.199167,88.2675 532.8975,87.3325 C531.595833,86.3975 530.615,85.0866667 529.955,83.4 C529.295,81.7133333 528.965,79.715 528.965,77.405 L528.966,77.515 L561.525,77.515 C562.393421,73.6244737 562.562535,69.8409003 562.032341,66.1642798 L561.9375,65.5525 C561.295833,61.6841667 559.939167,58.21 557.8675,55.13 C555.795833,52.05 553.073333,49.6025 549.7,47.7875 C546.326667,45.9725 542.366667,45.065 537.82,45.065 C533.236667,45.065 528.946667,46.2016667 524.95,48.475 C520.953333,50.7483333 517.726667,54.0208333 515.27,58.2925 C512.813333,62.5641667 511.585,67.6883333 511.585,73.665 C511.585,79.6416667 512.8225,84.8116667 515.2975,89.175 C517.7725,93.5383333 521.008333,96.8933333 525.005,99.24 C529.001667,101.586667 533.273333,102.76 537.82,102.76 Z M546.179,68.605 L529.044,68.605 L529.045178,68.5898444 C529.178807,67.0856963 529.479474,65.7485852 529.947178,64.5785111 L530.0925,64.2325 C530.844167,62.5275 531.9075,61.2258333 533.2825,60.3275 C534.6575,59.4291667 536.28,58.98 538.15,58.98 C539.836667,58.98 541.220833,59.3191667 542.3025,59.9975 C543.384167,60.6758333 544.218333,61.5741667 544.805,62.6925 C545.391667,63.8108333 545.785833,65.03 545.9875,66.35 C546.088333,67.01 546.150208,67.6654167 546.173125,68.31625 L546.179,68.605 Z M580.775,101.99 C584.258333,101.99 587.136667,100.935833 589.41,98.8275 C591.683333,96.7191667 592.82,94.0333333 592.82,90.77 C592.82,87.5066667 591.683333,84.7933333 589.41,82.63 C587.136667,80.4666667 584.258333,79.385 580.775,79.385 C577.291667,79.385 574.459167,80.4666667 572.2775,82.63 C570.095833,84.7933333 569.005,87.5066667 569.005,90.77 C569.005,93.9966667 570.095833,96.6733333 572.2775,98.8 C574.459167,100.926667 577.291667,101.99 580.775,101.99 Z M614.38,39.84 C617.606667,39.84 620.155,38.9875 622.025,37.2825 C623.895,35.5775 624.83,33.1666667 624.83,30.05 C624.83,27.0066667 623.895,24.5775 622.025,22.7625 C620.155,20.9475 617.606667,20.04 614.38,20.04 C611.153333,20.04 608.586667,20.9475 606.68,22.7625 C604.773333,24.5775 603.82,27.0066667 603.82,30.05 C603.82,33.1666667 604.773333,35.5775 606.68,37.2825 C608.586667,38.9875 611.153333,39.84 614.38,39.84 Z M603.875,129.215 C610.291667,129.215 615.15,127.464167 618.45,123.9625 C621.75,120.460833 623.4,114.548333 623.4,106.225 L623.4,106.225 L623.4,46.605 L605.69,46.605 L605.69,105.895 C605.69,109.048333 605.130833,111.156667 604.0125,112.22 C602.894167,113.283333 601.198333,113.815 598.925,113.815 C597.165,113.815 595.258333,113.558333 593.205,113.045 C591.151667,112.531667 589.336667,111.963333 587.76,111.34 L587.76,111.34 L587.76,126.465 C590.29,127.161667 592.801667,127.794167 595.295,128.3625 C597.788333,128.930833 600.648333,129.215 603.875,129.215 Z M664.54,102.76 C669.086667,102.76 673.156667,101.916667 676.75,100.23 C680.343333,98.5433333 683.175833,96.3525 685.2475,93.6575 C687.319167,90.9625 688.355,88.1116667 688.355,85.105 C688.355,81.805 687.291667,79.055 685.165,76.855 C683.038333,74.655 680.123333,72.8216667 676.42,71.355 L676.42,71.355 L661.46,65.36 C659.15,64.5533333 657.995,63.4533333 657.995,62.06 C657.995,61.0333333 658.545,60.2083333 659.645,59.585 C660.745,58.9616667 662.248333,58.65 664.155,58.65 C666.465,58.65 668.115,59.0808333 669.105,59.9425 C670.095,60.8041667 670.59,61.8216667 670.59,62.995 L670.59,62.995 L686.705,62.995 C686.668333,57.7883333 684.706667,53.4983333 680.82,50.125 C676.933333,46.7516667 671.378333,45.065 664.155,45.065 C656.455,45.065 650.386667,46.55 645.95,49.52 C641.513333,52.49 639.295,56.3766667 639.295,61.18 C639.295,64.59 640.349167,67.5325 642.4575,70.0075 C644.565833,72.4825 647.563333,74.5266667 651.45,76.14 L651.45,76.14 L664.595,81.255 C665.988333,81.805 667.015,82.355 667.675,82.905 C668.335,83.455 668.665,84.1883333 668.665,85.105 C668.665,85.8016667 668.426667,86.4525 667.95,87.0575 C667.473333,87.6625 666.758333,88.1483333 665.805,88.515 C664.851667,88.8816667 663.641667,89.065 662.175,89.065 C659.755,89.065 657.839167,88.6983333 656.4275,87.965 C655.015833,87.2316667 654.273333,85.9116667 654.2,84.005 L654.2,84.005 L638.305,84.005 C638.268333,88.2216667 639.359167,91.7141667 641.5775,94.4825 C643.795833,97.2508333 646.885,99.3225 650.845,100.6975 C654.805,102.0725 659.37,102.76 664.54,102.76 Z" id="Alpine.js" fill="#2D3441" fill-rule="nonzero"/>
+        <g transform="translate(0.000000, 12.000000)">
+            <polygon id="Path" fill="#77C1D2" points="149.520377 10.3027772 189.392477 50 149.520377 89.6972228 109.648276 50"/>
+            <polygon id="Path2" fill="#2D3441" points="49.8401255 10.3027772 132.499974 92.6000822 52.7557729 92.6000822 9.96802511 50"/>
+        </g>
+    </g>
+</svg>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/astro.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/astro.svg
new file mode 100644
index 0000000000000..f762da0f6e569
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/assets/astro.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 366">
+	<path d="M182.022 9.147c2.982 3.702 4.502 8.697 7.543 18.687L256 246.074a276.5 276.5 0 0 0-79.426-26.891L133.318 73.008a5.63 5.63 0 0 0-10.802.017L79.784 219.11A276.5 276.5 0 0 0 0 246.04L66.76 27.783c3.051-9.972 4.577-14.959 7.559-18.654a24.54 24.54 0 0 1 9.946-7.358C88.67 0 93.885 0 104.314 0h47.683c10.443 0 15.664 0 20.074 1.774a24.55 24.55 0 0 1 9.95 7.373" />
+	<path fill="#ff5d01" d="M189.972 256.46c-10.952 9.364-32.812 15.751-57.992 15.751c-30.904 0-56.807-9.621-63.68-22.56c-2.458 7.415-3.009 15.903-3.009 21.324c0 0-1.619 26.623 16.898 45.14c0-9.615 7.795-17.41 17.41-17.41c16.48 0 16.46 14.378 16.446 26.043l-.001 1.041c0 17.705 10.82 32.883 26.21 39.28a35.7 35.7 0 0 1-3.588-15.647c0-16.886 9.913-23.173 21.435-30.48c9.167-5.814 19.353-12.274 26.372-25.232a47.6 47.6 0 0 0 5.742-22.735c0-5.06-.786-9.938-2.243-14.516" />
+</svg>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/chevron-right.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/chevron-right.svg
new file mode 100644
index 0000000000000..3fcc67a0e52b9
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/assets/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z" />
+</svg>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/github.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/github.svg
new file mode 100644
index 0000000000000..ce45f4c95b3ec
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/assets/github.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16">
+	<path
+		fill="currentColor"
+		d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+	></path>
+</svg>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/penguin.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/penguin.svg
new file mode 100644
index 0000000000000..d93379b6846fe
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/assets/penguin.svg
@@ -0,0 +1 @@
+<svg height="600pt" width="500pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#fff" stop-opacity=".65"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#ffa63f"/><stop offset="1" stop-color="#ff0"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#ffeed7"/><stop offset="1" stop-color="#bdbfc2"/></linearGradient><linearGradient id="d"><stop offset="0" stop-color="#fff" stop-opacity=".8"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><radialGradient id="e" cx="446.77762" cy="1219.4125" gradientTransform="scale(1.045233 .956725)" gradientUnits="userSpaceOnUse" r="195.07191"><stop offset="0" stop-color="#3f2600" stop-opacity=".6"/><stop offset="1" stop-color="#3f2600" stop-opacity="0"/></radialGradient><linearGradient id="f" gradientTransform="scale(.575262 1.738339)" gradientUnits="userSpaceOnUse" x1="400.57785" x2="400.84448" xlink:href="#c" y1="369.53015" y2="304.07886"/><linearGradient id="g" gradientTransform="scale(1.116071 .896001)" gradientUnits="userSpaceOnUse" x1="303.01761" x2="297.0856" xlink:href="#d" y1="237.93179" y2="330.09561"/><linearGradient id="h" gradientTransform="scale(.816497 1.224744)" gradientUnits="userSpaceOnUse" x1="378.93771" x2="380.27319" xlink:href="#c" y1="278.60202" y2="243.91606"/><linearGradient id="i" gradientTransform="scale(.816497 1.224744)" gradientUnits="userSpaceOnUse" x1="381.38742" x2="380.5517" xlink:href="#c" y1="277.495" y2="245.68338"/><linearGradient id="j" gradientTransform="scale(.816497 1.224744)" gradientUnits="userSpaceOnUse" x1="379.09573" x2="376.79556" xlink:href="#a" y1="240.92712" y2="281.01636"/><linearGradient id="k" gradientTransform="scale(.816497 1.224744)" gradientUnits="userSpaceOnUse" x1="389.63535" x2="387.06866" xlink:href="#a" y1="242.28218" y2="281.32513"/><linearGradient id="l" gradientTransform="scale(.812855 1.230232)" gradientUnits="userSpaceOnUse" spreadMethod="reflect" x1="437.57941" x2="437.57941" xlink:href="#c" y1="528.87177" y2="394.10361"/><linearGradient id="m" gradientTransform="scale(.649784 1.538974)" gradientUnits="userSpaceOnUse" x1="375.17325" x2="377.48541" xlink:href="#c" y1="419.78485" y2="324.03815"/><linearGradient id="n" gradientTransform="scale(1.074798 .930408)" gradientUnits="userSpaceOnUse" x1="320.75104" x2="321.32224" xlink:href="#d" y1="498.17776" y2="614.50439"/><linearGradient id="o" gradientTransform="scale(1.077001 .928504)" gradientUnits="userSpaceOnUse" x1="322.48257" x2="323.2514" xlink:href="#a" y1="435.26761" y2="488.48251"/><linearGradient id="p" gradientTransform="scale(.571707 1.749147)" gradientUnits="userSpaceOnUse" x1="411.2215" x2="411.2215" xlink:href="#a" y1="242.94365" y2="331.44858"/><linearGradient id="q" gradientTransform="scale(.572667 1.746214)" gradientUnits="userSpaceOnUse" x1="867.34546" x2="867.33453" xlink:href="#a" y1="234.73897" y2="314.83911"/><linearGradient id="r" gradientTransform="scale(1.011514 .988617)" gradientUnits="userSpaceOnUse" x1="236.25362" x2="212.5099" xlink:href="#b" y1="657.11133" y2="737.41229"/><linearGradient id="s" gradientTransform="scale(1.065499 .938527)" gradientUnits="userSpaceOnUse" x1="381.56607" x2="279.64313" xlink:href="#c" y1="655.73102" y2="386.66583"/><linearGradient id="t" gradientTransform="scale(1.009851 .990245)" gradientUnits="userSpaceOnUse" x1="218.11714" x2="203.12654" xlink:href="#b" y1="630.30475" y2="737.8537"/><linearGradient id="u" gradientTransform="scale(1.007724 .992335)" gradientUnits="userSpaceOnUse" x1="117.88966" x2="182.24524" xlink:href="#a" y1="587.23602" y2="704.73077"/><linearGradient id="v" gradientTransform="scale(.999504 1.000496)" gradientUnits="userSpaceOnUse" x1="223.10072" x2="230.53499" xlink:href="#a" y1="570.41809" y2="710.97723"/><linearGradient id="w" gradientTransform="scale(1.065499 .938527)" gradientUnits="userSpaceOnUse" x1="316.93988" x2="371.60889" xlink:href="#a" y1="474.01779" y2="582.63507"/><linearGradient id="x" gradientTransform="scale(1.218684 .820557)" gradientUnits="userSpaceOnUse" x1="284.68652" x2="285.45923" xlink:href="#b" y1="410.46326" y2="485.69934"/><linearGradient id="y" gradientTransform="scale(1.221941 .81837)" gradientUnits="userSpaceOnUse" x1="288.82358" x2="288.37628" xlink:href="#a" y1="398.85422" y2="482.55939"/><path d="m670.88202 1166.6423a203.89551 186.63016 0 1 1 -407.79102 0 203.89551 186.63016 0 1 1 407.79102 0z" fill="url(#e)" transform="matrix(1.4177 0 0 .414745 -349.5468 157.94132)"/><path d="m223.627 632.24c-22.388-32.223-26.754-136.984 25.487-201.43 25.886-30.918 32.49-52.465 34.531-81.393 1.389-32.979-23.325-131.442 69.883-138.944 94.406-7.532 89.336 85.66 88.793 134.975-.451 41.64 30.574 65.241 51.796 97.695 39.279 59.63 35.957 162.3-7.399 217.872-54.917 69.568-101.953 39.398-133.19 41.93-58.493 3.202-60.427 34.391-129.901-70.705z" transform="matrix(1.25 0 0 1.25 -125.2984 -231.75768)"/><path d="m246.571 470.864c-12.239 12.496-44.396 69.092 4.869 105.36 17.369 12.633-16.377 59.495-32.005 36.308-27.57-41.618-8.831-106.941 8.315-130.188 11.652-16.487 29.23-22.676 18.821-11.48z" fill="url(#f)" transform="matrix(-1.67739 -.0224516 -.0211236 1.4709 862.8276 -357.26968)"/><path d="m256.513 459.837c-19.915 17.717-56.176 80.091-3.288 120.606 17.37 12.632-15.393 52.463-33.79 32.089-63.963-70.82 1.669-152.254 24.262-180.25 20.192-24.347 38.078 5.752 12.816 27.555z" stroke="#000" stroke-width=".977298" transform="matrix(-1.67755 0 0 1.52374 863.8676 -382.33468)"/><path d="m399.56879 258.15753a58.37323 46.863022 0 1 1 -116.74646 0 58.37323 46.863022 0 1 1 116.74646 0z" fill="url(#g)" transform="matrix(1.26626 -.0713667 -.0459795 1.19574 -108.6094 -190.01368)"/><path d="m328.86324 320.64151a18.087479 27.131195 0 1 1 -36.17496 0 18.087479 27.131195 0 1 1 36.17496 0z" fill="url(#h)" transform="matrix(1.30445 -.0755326 .0771251 1.34257 -165.9954 -241.86968)"/><path d="m328.86324 320.64151a18.087479 27.131195 0 1 1 -36.17496 0 18.087479 27.131195 0 1 1 36.17496 0z" fill="url(#i)" transform="matrix(-1.81082 .0495107 .0317324 1.55333 896.7076 -349.02968)"/><path d="m328.86324 320.64151a18.087479 27.131195 0 1 1 -36.17496 0 18.087479 27.131195 0 1 1 36.17496 0z" transform="matrix(-.823196 -.00176123 -.0182321 .852662 602.9216 -102.24288)"/><path d="m328.86324 320.64151a18.087479 27.131195 0 1 1 -36.17496 0 18.087479 27.131195 0 1 1 36.17496 0z" transform="matrix(.59438 -.0722959 .0688176 .705838 56.6956 -31.83408)"/><path d="m328.86324 320.64151a18.087479 27.131195 0 1 1 -36.17496 0 18.087479 27.131195 0 1 1 36.17496 0z" fill="url(#j)" transform="matrix(-.480323 -.036454 -.0467935 .475606 502.7436 22.75972)"/><path d="m328.86324 320.64151a18.087479 27.131195 0 1 1 -36.17496 0 18.087479 27.131195 0 1 1 36.17496 0z" fill="url(#k)" transform="matrix(.35691 -.0408211 .0413232 .398544 138.5816 50.73832)"/><path d="m258.702 495.425c12.836-29.103 40.114-80.226 40.695-119.758 0-31.442 94.179-38.951 101.737-7.558s26.741 78.483 38.95 101.156c12.208 22.672 47.809 94.695 9.884 157.546-34.157 55.644-137.725 99.666-193.01-7.557-18.603-37.207-15.285-83.315 1.744-123.829z" fill="url(#l)" transform="matrix(1.25 0 0 1.25 -125.2984 -232.48268)"/><path d="m242.905 473.815c-11.263 18.967-35.5 69.309 12.137 102.047 51.311 34.82 46.473 97.062-15.607 61.955-56.777-31.789-22.845-137.778-4.51-162.266 12.107-17.214 29.897-38.031 7.98-1.736z" fill="url(#m)" transform="matrix(1.38936 -.111074 .102211 1.30214 -202.3394 -230.19068)"/><path d="m256.513 449.72c-17.465 28.508-59.377 95.813-3.288 130.723 75.569 46.355 54.173 92.711-14.799 50.974-97.109-58.264-11.825-175.616 27.131-220.338 44.444-50.2 8.554 9.087-9.044 38.641z" stroke="#000" stroke-width="1.25" transform="matrix(1.25 0 0 1.25 -125.2984 -231.75768)"/><path d="m421.481 504.727c0 32.412-29.272 74.516-79.528 74.138-51.828.455-73.949-41.726-73.949-74.138s34.379-58.717 76.739-58.717c42.359 0 76.738 26.305 76.738 58.717z" fill="url(#n)" transform="matrix(1.30209 0 0 1.22525 -140.7104 -217.80968)"/><path d="m398.227 412.292c-.612 38.572-23.18 47.671-51.74 47.671-28.561 0-49.292-5.694-51.741-47.671 0-26.314 23.18-41.542 51.741-41.542 28.56 0 51.74 15.228 51.74 41.542z" fill="url(#o)" transform="matrix(1.1868 0 0 1.06708 -100.1294 -164.33068)"/><g transform="matrix(1.25 0 0 1.25 -125.2984 -231.75768)"><path d="m234.285 456.475c17.716-26.996 55.015-68.364 6.977 5.813-38.951 61.043-14.403 100.273-1.744 111.039 36.527 32.562 34.966 54.349 6.395 37.206-61.625-36.626-48.835-98.248-11.628-154.058z" fill="url(#p)"/><path d="m490.662 467.52c-15.319-31.701-64.134-111.902 2.326-18.603 60.461 84.297 18.022 143.013 10.464 148.827-7.557 5.813-33.137 17.44-25.579-2.907 7.557-20.347 45.234-58.973 12.789-127.317z" fill="url(#q)"/><path d="m220.915 716.921c-40.442-21.416-99.252 4.124-77.902-54.066 4.276-13.238-6.375-33.008.581-45.926 8.139-15.698 25.58-12.209 36.045-22.674 10.318-10.891 16.859-29.649 36.044-26.742 19.184 2.907 31.945 26.461 45.344 55.229 9.883 20.638 44.941 49.664 42.65 72.758-2.696 35.5-43.027 42.19-82.762 21.421z" fill="url(#r)" stroke="#e68c3f" stroke-width="6.25"/></g><path d="m415.072 495.764c-3.007 24.906-35.813 76.627-69.518 81.534-34.26 5.336-66.432-34.06-74.147-71.114-9.889-41.206 22.587-57.6 71.938-56.627 53.301 1.654 74.121 13.891 71.727 46.207z" fill="url(#s)" transform="matrix(.598206 .268584 -.239623 .617213 389.8156 76.21132)"/><path d="m220.274 718.402c-41.327-23.59-99.894 5.605-77.261-55.547 4.736-13.068-6.596-33.552.36-46.47 8.139-15.698 25.801-11.665 36.266-22.13 10.318-10.891 18.827-27.868 38.012-24.961 19.184 2.907 29.977 24.68 43.376 53.448 9.883 20.638 43.415 48.971 41.124 72.065-2.696 35.5-42.724 45.471-81.877 23.595z" fill="url(#t)" stroke="#e68c3f" stroke-width="6.25068" transform="matrix(-1.1685 .423145 .475283 1.16478 417.5906 -278.07368)"/><path d="m216.482 675.68c-86.531-57.503-47.308-70.96-36.843-81.425 10.318-10.891 18.827-27.868 38.012-24.961 19.184 2.907 29.977 24.68 43.376 53.448 9.883 20.638 43.06 48.918 41.124 72.065-2.616 27.11-48.19 5.487-85.669-19.127z" fill="url(#u)" transform="matrix(-.945096 .343745 .424076 .956058 403.5756 -128.59468)"/><path d="m216.506 677.071c-86.531-57.503-46.797-73.57-33.946-81.28 15.399-9.942 15.158-30.831 34.343-27.924 19.184 2.907 30.725 26.107 44.124 54.875 9.883 20.638 43.06 48.918 41.124 72.065-2.616 27.11-48.166 6.878-85.645-17.736z" fill="url(#v)" transform="matrix(1.00431 -.052286 -.0174 1.04575 -66.5614 -92.71798)"/><path d="m415.072 495.764c-3.007 24.906-35.813 76.627-69.518 81.534-34.26 5.336-66.432-34.06-74.147-71.114-9.889-41.206 22.587-57.6 71.938-56.627 53.301 1.654 74.121 13.891 71.727 46.207z" transform="matrix(.515584 .215259 -.206526 .49467 402.5476 158.30632)"/><path d="m415.072 495.764c-3.007 24.906-35.813 76.627-69.518 81.534-34.26 5.336-66.432-34.06-74.147-71.114-9.889-41.206 22.587-57.6 71.938-56.627 53.301 1.654 74.121 13.891 71.727 46.207z" fill="url(#w)" transform="matrix(.351231 .149463 -.128856 .343469 413.7696 254.03832)"/><path d="m309.954 338.729c7.147-6.77 24.811-27.066 57.961-5.755 6.162 4.01 11.162 4.377 23.021 9.455 23.726 9.749 12.382 33.259-12.744 41.108-10.758 3.489-20.536 16.556-40.129 15.439-16.734-.977-21.119-11.874-31.398-17.906-18.269-10.311-20.965-24.254-11.1-31.653 9.866-7.399 13.725-10.059 14.389-10.688z" fill="url(#x)" stroke="#e68c3f" stroke-width="3.75" transform="matrix(1.25 0 0 1.25 -125.2984 -231.75768)"/><path d="m391.251 357.645c-9.883.581-31.393 22.091-54.066 22.091s-36.044-20.929-39.532-20.929" fill="none" stroke="#e68c3f" stroke-width="2.5" transform="matrix(1.25 0 0 1.25 -125.2984 -231.75768)"/><path d="m309.954 338.729c7.147-6.77 29.691-25.348 59.588-6.328 6.299 3.766 12.804 7.865 22.478 13.464 19.162 11.748 9.671 28.678-13.286 39.39-10.418 4.495-27.593 14.415-40.671 13.721-14.533-1.408-23.935-11.399-33.567-17.906-17.67-12.303-16.597-22.237-8.389-30.508 6.205-5.679 13.183-11.204 13.847-11.833z" fill="url(#y)" transform="matrix(.627885 0 0 .595666 81.6136 -12.43538)"/></svg>
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/core-image-svg/src/assets/plus.svg b/packages/astro/test/fixtures/core-image-svg/src/assets/plus.svg
new file mode 100644
index 0000000000000..d0f57e4f60be5
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/assets/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+	<path fill="currentColor" fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75" clip-rule="evenodd" />
+</svg>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/index.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/index.astro
new file mode 100644
index 0000000000000..92599b9595a42
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/index.astro
@@ -0,0 +1,17 @@
+---
+import AstroLogo from "~/assets/astro.svg";
+---
+
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div id="definition">
+		<AstroLogo />
+	</div>
+	<div id="reused">
+		<AstroLogo />
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/inline.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/inline.astro
new file mode 100644
index 0000000000000..392b7b49e256f
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/inline.astro
@@ -0,0 +1,22 @@
+---
+import ChrevronRight from '~/assets/chevron-right.svg'
+---
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div id="definition">
+		<ChrevronRight />
+	</div>
+	<div id="inline">
+		<ChrevronRight inline />
+	</div>
+	<div id="reused">
+		<ChrevronRight />
+	</div>
+	<div id="inline-with-size">
+		<ChrevronRight inline size="24"/>
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/multiple.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/multiple.astro
new file mode 100644
index 0000000000000..79577d45b0cc8
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/multiple.astro
@@ -0,0 +1,27 @@
+---
+import AstroLogo from '~/assets/astro.svg';
+import GithubLogo from '~/assets/github.svg';
+import AlpineLogo from '~/assets/alpine-multi-color.svg';
+---
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="one def">
+		<AstroLogo />
+	</div>
+	<div class="two def">
+		<GithubLogo />
+	</div>
+	<div class="three def">
+		<AlpineLogo width="64" />
+	</div>
+	<div class="one use">
+		<AstroLogo size="48"/>
+	</div>
+	<div class="two use">
+		<GithubLogo size="32" />
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/props.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/props.astro
new file mode 100644
index 0000000000000..75567a6db454d
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/props.astro
@@ -0,0 +1,13 @@
+---
+import Plus from '~/assets/plus.svg'
+---
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div id="base">
+		<Plus aria-hidden="true" id="plus" style={{ color: 'red', fontSize: '32px' }} class="foobar" data-state="open"/>
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/size.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/size.astro
new file mode 100644
index 0000000000000..dea4d003070bf
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/size.astro
@@ -0,0 +1,26 @@
+---
+import AstroLogo from '~/assets/astro.svg';
+import Plus from '~/assets/plus.svg';
+---
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div id="base">
+		<AstroLogo />
+	</div>
+	<div id="base-with-defaults">
+		<Plus />
+	</div>
+	<div id="size-string">
+		<AstroLogo size="32" />
+	</div>
+	<div id="size-number">
+		<AstroLogo size={48} />
+	</div>
+	<div id="override-attrs">
+		<Plus size="16" />
+	</div>
+</body>
+</html>	
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
new file mode 100644
index 0000000000000..744b9cc8e1cae
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/strip.astro
@@ -0,0 +1,13 @@
+---
+import Alpine from '~/assets/alpine-multi-color.svg'
+---
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div id="base">
+		<Alpine />
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/core-image-svg/src/pages/title.astro b/packages/astro/test/fixtures/core-image-svg/src/pages/title.astro
new file mode 100644
index 0000000000000..eb3b5f11d65a5
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/src/pages/title.astro
@@ -0,0 +1,13 @@
+---
+import GitHub from '~/assets/github.svg'
+---
+<html>
+<head>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div id="base">
+		<GitHub title="GitHub Logo" />
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/core-image-svg/tsconfig.json b/packages/astro/test/fixtures/core-image-svg/tsconfig.json
new file mode 100644
index 0000000000000..923ed4e24fb7b
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-svg/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/assets/*": [
+        "src/assets/*"
+      ]
+    },
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6ea2646cb412..c8fe34453a58d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2861,6 +2861,12 @@ importers:
         specifier: workspace:*
         version: link:../../..
 
+  packages/astro/test/fixtures/core-image-svg:
+    dependencies:
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+
   packages/astro/test/fixtures/core-image-unconventional-settings:
     dependencies:
       astro: