CSS: Inline-SVG strings must not be touched!

[devpelux]

(I don't know if this is a duplicated issue)

The problem is that the svg string

"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(51,51,51)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E"

is replaced with

"data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='0022'%3E%3Cpathfill='rgb(51,51,51)'fill-rule='evenodd'd='M00h1v1H0V0zm11h1v1H1V1z'/%3E%3C/svg%3E"

that is the same initial string, but without spaces.
As result, the svg used, not works!

I've used this string as background image to generate a cecherboard pattern:
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(51,51,51)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");

[TankTheFrank]

This also affects bootstrap 4 - they dropped glyphicons and are using this format for carousel prev/next controls, radio buttons, checkboxes etc.

[kndol]

Still not fixed. ;-(

[manish-in-java]

Duplicate of #141.

I also ran into this issue with my custom CSS. Moved the SVG images out of the CSS file and into their own files to work around the issue.

[alex-fer]

To solve, encode the spaces: use "%20" in the string instead of " ".

[chrishappy]

I used base64 to fix this issue, see: https://www.npmjs.com/package/mini-svg-data-uri for an example