CSS: Inline-SVG strings must not be touched!

devpelux commented 6 years ago

(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 commented 6 years ago

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

kndol commented 5 years ago

Still not fixed. ;-(

manish-in-java commented 5 years ago

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 commented 3 years ago

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

chrishappy commented 1 year ago

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

yui / yuicompressor

CSS: Inline-SVG strings must not be touched! #304