Inline SVG compiling to an `innerHTML` assignment in 4.x

[AlanBreck]

Describe the bug

When compiling a component containing an inline SVG with hydratable set to true, v4.x outputs an innerHTML assignment, whereas v3.59 did not. This behavior causes a violation of our TrustedTypes policy.

Reproduction

Component

<button>
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.7 11H3.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h18.5c.6-.1 1.2-.6 1.2-1.3 0-.7-.6-1.3-1.3-1.3Z" fill="currentColor"/></svg>
</button>

<button>
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.942 10.804h-7.5v-7.56c0-.67-.577-1.244-1.25-1.244-.769 0-1.346.574-1.346 1.244v7.464H3.25c-.673.096-1.25.67-1.25 1.34s.577 1.244 1.25 1.244h7.5v7.464c0 .67.577 1.244 1.25 1.244s1.25-.574 1.25-1.244v-7.464h7.5c.673 0 1.25-.574 1.25-1.244s-.385-1.244-1.058-1.244Z" fill="currentColor"/></svg>
</button>

Output from v4.x

REPL example (view JS output and toggle hydratable to true): https://svelte.dev/repl/72c240acf3ea485dafa6937a2647b6c9?version=4.0.5

Truncated output

function create_fragment(ctx) {
	let button0;
	let textContent = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.7 11H3.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h18.5c.6-.1 1.2-.6 1.2-1.3 0-.7-.6-1.3-1.3-1.3Z" fill="currentColor"></path></svg>`;
	let t;
	let button1;
	let textContent_1 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.942 10.804h-7.5v-7.56c0-.67-.577-1.244-1.25-1.244-.769 0-1.346.574-1.346 1.244v7.464H3.25c-.673.096-1.25.67-1.25 1.34s.577 1.244 1.25 1.244h7.5v7.464c0 .67.577 1.244 1.25 1.244s1.25-.574 1.25-1.244v-7.464h7.5c.673 0 1.25-.574 1.25-1.244s-.385-1.244-1.058-1.244Z" fill="currentColor"></path></svg>`;

	return {
		c() {
			button0 = element("button");
			button0.innerHTML = textContent;
			t = space();
			button1 = element("button");
			button1.innerHTML = textContent_1;
		},
...

Output from v3.59.0

REPL example (view JS output and toggle hydratable to true): https://svelte.dev/repl/72c240acf3ea485dafa6937a2647b6c9?version=3.59.0

Truncated output

function create_fragment(ctx) {
	let button0;
	let svg0;
	let path0;
	let t;
	let button1;
	let svg1;
	let path1;

	return {
		c() {
			button0 = element("button");
			svg0 = svg_element("svg");
			path0 = svg_element("path");
			t = space();
			button1 = element("button");
			svg1 = svg_element("svg");
			path1 = svg_element("path");
			this.h();
		},
...

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 57.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/node_modules/@socketsecurity/cli/lib/shadow/bin/npm
  Browsers:
    Brave Browser: 114.1.52.130
    Chrome: 114.0.5735.198
    Chrome Canary: 117.0.5884.0
    Safari: 16.5.1
  npmPackages:
    svelte: 4.0.5 => 4.0.5

Severity

blocking an upgrade