search

TrySound / postcss-inline-svg

PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
MIT License
481 stars 38 forks source link

Image preview not visible in Chrome DevTools #20

Open vladimirsiljkovic opened 8 years ago

vladimirsiljkovic commented 8 years ago

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

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:

TrySound commented 8 years ago

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

Sounds reasonable. Thank you, @TrySound!