Open devpelux opened 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.
Still not fixed. ;-(
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.
To solve, encode the spaces: use "%20" in the string instead of " ".
I used base64 to fix this issue, see: https://www.npmjs.com/package/mini-svg-data-uri for an example
(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");