SVG don't escape single quotes with url('') in css

[geminway92]

Describe the bug

Hello, I am waiting for the fixes with svg and the conversion of base64. #15271
I installed the last release 5.0.10 and integrated this pull that fixed my problem but It stopped working.
In the next images show how I import icon, how I use icon in tag video importing with URL the CSS, and how to build icon in mode compile.
Thanks very much beforehand for your help.

Describe the bug
I'm using svelte
I'm using vite 5.0.10
The last version vite that broke this 5.0.0
The last version vite that work is 4.5.0

Import the icon in svg

Use in tag div

How build my icon in production

Sorry, I didn't send the link for reproduction because Stackblitz doesn't allow me to reproduce a fine example.

Reproduction

https://no-example.com

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.2
  Binaries:
    Node: v16.18.0 - /usr/bin/node
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chrome: 120.0.6099.109 (Build oficial) (arm64)

  npmPackage:
    vite: 5.0.10

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.

[chaejunlee]

How build my icon in production
image

I saw the image above, and I can see that it might cause trouble. There are nested single-quotes within url property. Which means there are three levels of quotes.

I think the encoding itself isn't the problem here. I think the problem is that the style that has three level deep quotes is being inlined.

Maybe in this case, it can be solved by not inlining the style property. I would like to have some opinions of others and am more than happy to elaborate further.

And it would be great if you can provide reproduction as much as you can.

[geminway92]

How build my icon in production
image

I saw the image above, and I can see that it might cause trouble. There are nested single-quotes within url property. Which means there are three levels of quotes.

I think the encoding itself isn't the problem here. I think the problem is that the style that has three level deep quotes is being inlined.

Maybe in this case, it can be solved by not inlining the style property. I would like to have some opinions of others and am more than happy to elaborate further.

And it would be great if you can provide reproduction as much as you can.

Thanks for answering me. I can't do this. It is a problem that has occurred since 5.0.0 version.

[chaejunlee]

If that's the case, can you roll back the version of vite to where your problem doesn't appear and provide that build result?

At this point, I can't tell what's wrong and elaborate further.

[geminway92]

This is the 5.0.10 version. Although this has occurred since version 5.0.0

production mode:
It doesn't work here.

development mode:
Here it works

This is the 4.5.0 version. This version works fine.
production mode:

development mode:

[chaejunlee]

I think your issue has more to do with this PR #14643. Not super sure but it looks like SVGs are inlined as default.

As mentioned in my PR, you can try the following to solve the issue.

export default defineConfig({
  build: {
    assetsInlineLimit: 0,
  },
})

Link to the documentation as well

[bluwy]

This seems to be a limitation with the SVG inlining heuristic as we inline SVGs that contain the ' character. So when you manually add that to url() in style tags, you need to avoid using ' instead. Plain url(...) without quotes should work.

Unfortunately I don't think this is something we can fix. If we want to be conservative, we'd have to always base64 it and that isn't best for compression. Maybe we should document the caveats.

[chaejunlee]

A lot of people seem to encounter this svg inlining problem. I've already came across 3 people out in the wild who got helped by the "double-quote" solution. Until there is a improvement on url() heuristics, I think we should have some info in the documentation. I have made a PR and would like to get any feedback on it! Thanks!!

[sapphi-red]

Closing as #15534 and #18581 is merged.