transformAssetUrls strips all queries and breaks SVG sprites

[dirkniblick]

Describe the bug

I updated one of my work projects to Vite 6 and all the images in SVG tags disappeared. If I move Vite back to 5.4.9 or later, which is where I was prior to updating my project, the SVGs come back.

Reproduction

https://github.com/dirkniblick/vite-6-breaks-svg

Steps to reproduce

Here's a reproduction of the repo README:

Project

I created a project using npm create vue@latest and removed most of the default project files (i.e., very little is left in /src). At this point, it just displays a couple SVGs. Here's the most relevant files:

src/vite.config.js 👈 Unchanged from when project was created

import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
})

src/assets/shapes.svg

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" r="10" cx="10" cy="10" fill="red"/>
    <rect id="square" x="0" y="0" width="20" height="20" fill="green"/>
</svg>

src/App.vue

<template>
    <svg viewBox="0 0 20 20" width="10rem">
        <use href="@/assets/shapes.svg#circle"/>
    </svg>
    <svg viewBox="0 0 20 20" width="10rem">
        <use href="@/assets/shapes.svg#square"/>
    </svg>
</template>

Expectation

With Vite 5.4.11 we get this in Firefox (I've tested all this in Chrome too):

The developer tools shows this:

Problem

If I change Vite to 6.0.0, or anything later, and don't change anything else, the shapes disappear:

The developer tools shows this:

Comparison

It looks like Vite is not processing the file correctly.
If there's something I need to change in the Vite config, please let me know, but I haven't spotted anything specific to SVGs in the migration document or any other issue on Github. Here's the developer tools side-by-side, but you can see the <use href= is quite different and the use tag doesn't seem to contain the path code anymore.

Vite 5.4.11	Vite 6.0.3

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 33.88 GB / 63.68 GB
  Binaries:
    Node: 18.19.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.68)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-vue: ^5.2.1 => 5.2.1 
    vite: ^6.0.3 => 6.0.3

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[btea]

Currently, you can set assetsinlinelimit to 0 to make svg render normally. https://vite.dev/config/build-options.html#build-assetsinlinelimit

[bluwy]

We should have something like https://github.com/vitejs/vite/blob/63b82f1e29a00d06a82144fd03ea8d6eff114290/packages/vite/src/node/plugins/asset.ts#L452-L453 but it might not be kicking in somehow.

[btea]

In the current scenario, the corresponding SVG id value after converting the vue file does not carry #, which fails to meet this condition. example

[sapphi-red]

Yeah, this is caused by plugin-vue / @vue/compiler-sfc stripping the queries automatically.