SVG url in css broken in production

[carstenblt]

Description

When using a url with SVG data like

background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e);

It renders fine in development mode. However in production it changes to

background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E);

which doesn't work anymore. I am not sure, which step actually messes it up.

Steps to reproduce

Import a scss file with

.someclass { background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e); }

Expected result

Both development and production build should show the image.

Actual result

The image is broken in production.

Environment

System:
OS: Linux 4.19 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.16.0 - /usr/bin/node
Yarn: 1.22.10 - /usr/bin/yarn
npm: 7.17.0 - /usr/bin/npm
Languages:
Python: 2.7.18 - /usr/bin/python
npmPackages:
gatsby: ^3.7.1 => 3.7.1
gatsby-background-image: ^1.5.3 => 1.5.3
gatsby-image: ^3.7.1 => 3.7.1
gatsby-plugin-image: ^1.7.1 => 1.7.1
gatsby-plugin-manifest: ^3.7.1 => 3.7.1
gatsby-plugin-offline: ^4.7.1 => 4.7.1
gatsby-plugin-react-helmet: ^4.7.1 => 4.7.1
gatsby-plugin-sass: ^4.7.1 => 4.7.1
gatsby-plugin-sharp: ^3.7.1 => 3.7.1
gatsby-plugin-typescript: ^3.7.1 => 3.7.1
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-remark-copy-linked-files: ^4.4.1 => 4.4.1
gatsby-remark-images: ^5.4.1 => 5.4.1
gatsby-remark-responsive-iframe: ^4.4.1 => 4.4.1
gatsby-remark-smartypants: ^4.4.1 => 4.4.1
gatsby-source-filesystem: ^3.7.1 => 3.7.1
gatsby-transformer-remark: ^4.4.1 => 4.4.1
gatsby-transformer-sharp: ^3.7.1 => 3.7.1
npmGlobalPackages:
gatsby-cli: 2.12.88

[carstenblt]

Jeez, duplicate, #31878