76

I'm setting a SVG as background-image for a pseudo element:

content: '';
position: absolute;
 right: 0;
bottom: 0;
  left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12 49.3,0 99.1,0"/><polygon fill="#1E65AF" points="133.5,12 83.7,12 89,0 138.8,0"/><polygon fill="#D11A3C" points="156.3,12 106.5,12 111.8,0 161.6,0"/><polygon fill="#40BFC2" points="201,12 151.3,12 156.5,0 206.3,0"/><polygon fill="#1E65AF" points="216.4,12 166.6,12 171.9,0 221.7,0"/><polygon fill="#952592" points="226.5,12 176.7,12 182,0 231.7,0"/><polygon fill="#1E65AF" points="241.3,12 191.5,12 196.8,0 246.6,0"/><polygon fill="#40BFC2" points="260.9,12 211.1,12 216.4,0 266.2,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#40BFC2" points="364.2,12 314.4,12 319.7,0 369.5,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#952592" points="430.1,12 380.3,12 385.6,0 435.4,0"/><polygon fill="#1E65AF" points="465.6,12 415.8,12 421.1,0 470.9,0"/><polygon fill="#D11A3C" points="488.3,12 438.5,12 443.8,0 493.6,0"/><polygon fill="#D11A3C" points="620,12 613.4,12 618.7,0 620,0"/><polygon fill="#40BFC2" points="534.2,12 484.5,12 489.8,0 539.5,0"/><polygon fill="#1E65AF" points="548,12 498.2,12 503.5,0 553.3,0"/><polygon fill="#952592" points="556.5,12 506.7,12 512,0 561.8,0"/><polygon fill="#1E65AF" points="573.8,12 524.1,12 529.4,0 579.1,0"/><polygon fill="#40BFC2" points="592.5,12 542.8,12 548.1,0 597.8,0"/><polygon fill="#952592" points="614.4,12 564.6,12 569.9,0 619.7,0"/></g></svg>');
background-repeat: repeat-x;
background-position: bottom;

but for some reason it does not show up on Firefox. I do not wanna use a base64 data-url. Isn't this possible at all in Firefox?

5
  • @Paulie_D height is working fine, this is a Foundation Sass function. The output is 12px in rem unit. I edited to not cause confusion
    – supersize
    Jun 9, 2015 at 13:38
  • I like to base64 encode my svg and png if I ever inline them in my CSS as a background image.
    – hungerstar
    Jun 9, 2015 at 13:46
  • @hungerstar css-tricks.com/probably-dont-base64-svg
    – supersize
    Jun 9, 2015 at 13:55
  • Did not know that, thanks for the link. Personally I only base64 encode on small basic shapes like the icons you would find in a icon font.
    – hungerstar
    Jun 9, 2015 at 14:05
  • FWIW - this is also a problem when setting data in an <img src="..."> attribute. Same solution applies. Aug 16, 2017 at 13:51

4 Answers 4

159

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

4
  • @Robert Longson, do you know why this is specific to Firefox and IE Edge and Chrome related browsers don't bother with this fragment identifier rule? Or are they just being kind?
    – PeterS
    Nov 1, 2016 at 9:23
  • @PeterS IE Edge and Chrome have bugs in this regard. Nov 1, 2016 at 9:39
  • 4
    My data:image/svg+xml;utf8,<svg... images just broke after working for years. Apparently Chrome is now paying attention to the special meaning of #. Thanks for the help!
    – timkay
    Feb 9, 2019 at 17:37
  • 1
    You can use this tool to encode the SVG, it's by the maker of SVGOMG (svg optimization using svgo) Nov 10, 2021 at 14:58
12

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

5

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)

0
2

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)"

1
  • Thanks for sharing, took me a while to figure out the Hex color issue Jul 7 at 8:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.