SVG DataURI in CSS not working in Firefox

Question

body {
  background: url(\"data:image/svg+xml;utf8,

Answer 1

When you use background-image reference the svg as a file with a a path. background-image: url(http://www.domain.com/path/img.svg);

So put all of that code that makes the svg into a text file, then change the extension from .txt to .svg

If you want to use it inline convert your svg with this tool: http://www.mobilefish.com/services/base64/base64.php

.imgSVG {
  background: url("data:image/svg+xml;base64,[data]");
}

[data] portion is where you place whatever you get from the online tool.

SVG: https://css-tricks.com/using-svg/ URI: https://css-tricks.com/data-uris/

Answer 2

Firefox doesn't like the # in your data URL. Replace all the hashes with %23.

body {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%233F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%23FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14  124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent;
}