I\'m setting a SVG as background-image
for a pseudo element:
content: \'\';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
he
For anyone having this encoding issue when trying to use url with sass variables (for fills, for instance), the following is quite useful: https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be
Note, you may need to edit the output url from inline-svg depending on your needs (in my case, I was using data:image/svg+xml;utf8
instead)
The # character in a URL is reserved to indicate the start of a fragment identifier.
You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23
You can use the encodeURIComponent(uri)
function of JS.
This function encodes special characters and can encodes also the following characters: , / ? : @ & = + $ #
Reference: https://www.w3schools.com/jsref/jsref_encodeuricomponent.asp
A related question " svg fill color not working with hex colors"
svg fill color not working with hex colors
was referred here.
The example given was:
OK: <path fill='red' ... Not OK: <path fill='#FF0000' ...
I encountered a similar problem trying to export an svg using XMLSerializer. The exported svg was truncated following the # character. In my case, the %23 substitution for # did not work.
I was able to work around the problem by replacing the hex constant with the rgb() function and decimal values. For example, fill ="#FF0000" becomes fill = "rgb(255,0,0)"