character # in svg attribute value when using data url
Categories
(Core :: SVG, defect)
Tracking
()
People
(Reporter: github.christian, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0
Steps to reproduce:
In my css files, I use the background-image property with a data url like this:
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect fill="rgb(0,255,0)" width="20" height="20" rx="1"/></svg>');
Recently, I have changed the fill attribute value to "#00ff00" and I have noticed that the background image was not anymore visible.
After more investigations, using a data url in the adress bar of the browser, I see that the character # in any attribute value of the svg is detected by the parser as a not closed tag.
How to reproduce:
- paste this in adress bar of the browser: data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect fill="rgb(0,255,0)" width="20" height="20" rx="1"/></svg>-> a green square is displayed
- change the fill attribute value to #00ff00 -> an error is displayed by the browser
- or add another attribute with a value containing a # at any position -> an error is displayed by the browser.
Notice:
1 - the problem occurs only when using data url. When the svg is included in an html file or when parsing with DOMParser everything is ok
2 - same problem with Edge, Chrome...
|
||
Comment 1•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 2•4 years ago
|
||
It's the same in Edge, Chrome and Firefox because it's not a bug. # is a reserved character in a URL, it indicates the start of a fragment identifier. You need to encode # as %23
Description
•