evanw / evanw/esbuild

SVG content not URL encoded when using dataurl loader

Open
#4,045 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
40.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

## Description:

I'm encountering an issue with esbuild when using the dataurl loader for SVG files. The SVG content is not URL encoded, which leads to bugs in certain cases.

## Steps to Reproduce:
Use dataurl loader for an SVG file in esbuild.

Use the output as the parameter of a CSS `url()` function without quotes.

## Expected Behavior:
The SVG content should be URL encoded to ensure it works correctly in all use cases.

## Actual Behavior:
The SVG content is not URL encoded, causing bugs when used as a parameter in the CSS url function without quotes.

## Example

You can find the exmpale on the [playground](https://esbuild.github.io/try/#dAAwLjI0LjIALS1sb2FkZXI9ZGF0YXVybAA8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMi41ODg1OSAyLjcxNTY5TDIuNjQ2NDUgMi42NDY0NUMyLjgyMDAxIDIuNDcyODggMy4wODk0NCAyLjQ1MzYgMy4yODQzMSAyLjU4ODU5TDMuMzUzNTUgMi42NDY0NUw4IDcuMjkzTDEyLjY0NjQgMi42NDY0NUMxMi44NDE3IDIuNDUxMTggMTMuMTU4MyAyLjQ1MTE4IDEzLjM1MzYgMi42NDY0NUMxMy41NDg4IDIuODQxNzEgMTMuNTQ4OCAzLjE1ODI5IDEzLjM1MzYgMy4zNTM1NUw4LjcwNyA4TDEzLjM1MzYgMTIuNjQ2NEMxMy41MjcxIDEyLjgyIDEzLjU0NjQgMTMuMDg5NCAxMy40MTE0IDEzLjI4NDNMMTMuMzUzNiAxMy4zNTM2QzEzLjE4IDEzLjUyNzEgMTIuOTEwNiAxMy41NDY0IDEyLjcxNTcgMTMuNDExNEwxMi42NDY0IDEzLjM1MzZMOCA4LjcwN0wzLjM1MzU1IDEzLjM1MzZDMy4xNTgyOSAxMy41NDg4IDIuODQxNzEgMTMuNTQ4OCAyLjY0NjQ1IDEzLjM1MzZDMi40NTExOCAxMy4xNTgzIDIuNDUxMTggMTIuODQxNyAyLjY0NjQ1IDEyLjY0NjRMNy4yOTMgOEwyLjY0NjQ1IDMuMzUzNTVDMi40NzI4OCAzLjE3OTk5IDIuNDUzNiAyLjkxMDU2IDIuNTg4NTkgMi43MTU2OUwyLjY0NjQ1IDIuNjQ2NDVMMi41ODg1OSAyLjcxNTY5WiIgZmlsbD0iI0REMDA1RCIvPgo8L3N2Zz4)

If we use the output as the following way, it will cause a bug and the background image will not show correctly.

```js
import bg from "./bg.svg"

// the following code will not work.
document.body.style.backgroundImage = `url(${bg})`;
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the SVG dataurl loader case from the linked playground, then inspect the loader path that generates the SVG data URL. Verify the result when used in an unquoted CSS url() value, and consider the issue done when that background image renders correctly without quotes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, go, javascript
Domain
build-system, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.