Image preview not visible in Chrome DevTools

[vladimirsiljkovic]

Hi,

Image preview is not visible in Chrome Dev Tools. Seems like the problem is that single quotes are used inside of data URI, but not being encoded. I've made a demo and you'll see the issue if you open Chrome dev tools, inspect an element with a background image, and mouse over an image data in Styles panel.

https://jsbin.com/yuxahe/edit?html,css,output

This syntax I was using is svg-load("image.svg").

Expected: image preview should be visible in Chrome ( https://cldup.com/3hUwBkdecN.png ).

The output that postcss-assets produces with its inline() function is working correctly, so you can compare the two.

P.S. Thanks for the awesome plugin, Bogdan! I've been wanting something like this for a long time.

[vladimirsiljkovic]

After doing some research, I'm closing this one. Please reopen if you think it's valid.

Since the image is actually displayed on the page in Chrome, but not on its dev tools, there might be a bug in dev tools. The same bug is visible in Firefox with Firebug, however, the opposite behavior is visible in Firefox + Firefox Dev Tools.

Here's what the spec says https://www.w3.org/TR/CSS21/syndata.html#uri :

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '(', ')'.

So, the spec doesn't forbid the use of single quotes wrapped in double quotes, if I understood well – they don't have to be encoded nor escaped.

Also, by not encoding single quotes, SVGs will also be slightly lighter as explained here: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

As a reference, here are test results:

• Chrome + Chrome Dev Tools: Preview is not working if single quotes are not encoded. Working otherwise.
• Firefox + Firebug: Preview is not working if single quotes are not encoded. Working otherwise.
• Firefox + Firefox Developer Tools: Preview is working if single quotes are not encoded. Not working otherwise. (Although, preview is visible only for SVGs basic shapes and fill, regardless if single quotes are escaped or not.)

[TrySound]

Hi! Thanks for writing issue. I agree it's devtools bug. But still I'd like to change encoder to fix this and this issues. It will make result a bit bigger, but I don't think a lot.

[vladimirsiljkovic]

Sounds reasonable. Thank you, @TrySound!