Background-image (image/svg xml) stops showing up when converted to base64-CodePudding

I have a Checkbox SVG for my tables can be seen below;

.check-nobase64 {
  background-image: url("data:image/svg xml,");
  background-repeat: no-repeat;
  background-size: cover;
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

<div ></div>

When I enable Cloudflare caching, it automatically converts it to base64 and breaks it;

.check-base64 {
  background-image: url(data:image/svg xml;base64,PHN2Z1wgd2lkdGg9XCc0MlwnXCBoZWlnaHQ9XCc0MlwnXCBmaWxsPVwnbm9uZVwnXCB4bWxucz1cJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCc PHBhdGhcIGZpbGwtcnVsZT1cJ2V2ZW5vZGRcJ1wgY2xpcC1ydWxlPVwnZXZlbm9kZFwnXCBkPVwnTS0uMDAxXCAyMWMwLTExLjU5OFwgOS40MDItMjFcIDIxLTIxczIxXCA5LjQwMlwgMjFcIDIxLTkuNDAyXCAyMS0yMVwgMjEtMjEtOS40MDItMjEtMjF6TTE5LjhcIDI5Ljk5bDEyLjA5Mi0xNS4xMTUtMi4xODYtMS43NUwxOS4zOThcIDI2LjAxbC03LjMwMy02LjA4Ni0xLjc5MlwgMi4xNTFMMTkuOFwgMjkuOTl6XCdcIGZpbGw9XCcjMTY3NUJCXCcvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-size: cover;
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

<div >

When I decode base64, original data becomes from this;

to this;

<svg\ width=\'42\'\ height=\'42\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'><path\ fill-rule=\'evenodd\'\ clip-rule=\'evenodd\'\ d=\'M-.001\ 21c0-11.598\ 9.402-21\ 21-21s21\ 9.402\ 21\ 21-9.402\ 21-21\ 21-21-9.402-21-21zM19.8\ 29.99l12.092-15.115-2.186-1.75L19.398\ 26.01l-7.303-6.086-1.792\ 2.151L19.8\ 29.99z\'\ fill=\'#1675BB\'/></svg>

It seems when Cloudflare converts it into base64, URL Encoding part breaks. I couldn't find appropriate solution to this and appreciate any suggestion to get rid of this issue

Edit: I noticed the main issue is the # in fill part. When I manually change # to # it starts to appear with decoded base64.

CodePudding user response：

Convert your SVG file to base64, but take like source regular SVG-file. This \' causing wrong encoding.

Convert into Base64 this:

<svg width="42" height="42" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M-.001 21c0-11.598 9.402-21 21-21s21 9.402 21 21-9.402 21-21 21-21-9.402-21-21zM19.8 29.99l12.092-15.115-2.186-1.75L19.398 26.01l-7.303-6.086-1.792 2.151L19.8 29.99z" fill="#1675BB"/></svg>

not this:

<svg\ width=\'42\'\ height=\'42\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'><path\ fill-rule=\'evenodd\'\ clip-rule=\'evenodd\'\ d=\'M-.001\ 21c0-11.598\ 9.402-21\ 21-21s21\ 9.402\ 21\ 21-9.402\ 21-21\ 21-21-9.402-21-21zM19.8\ 29.99l12.092-15.115-2.186-1.75L19.398\ 26.01l-7.303-6.086-1.792\ 2.151L19.8\ 29.99z\'\ fill=\'#1675BB\'/></svg>

.check-base64,
.check-nobase64 {
  background-repeat: no-repeat;
  background-size: cover;
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

.check-nobase64 {
  background-image: url("data:image/svg xml,");
}

.check-base64 {
  background-image: url("data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA0MiA0MiI PHBhdGggZmlsbD0iIzE2NzVCQiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAyMWEyMSAyMSAwIDEgMSA0MiAwIDIxIDIxIDAgMCAxLTQyIDB6bTE5LjggOSAxMi0xNS4xLTItMS44LTEwLjQgMTMtNy4zLTYuMi0xLjggMi4yIDkuNSA3Ljl6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
}

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.wrapper p {
  margin-bottom: .5rem;
}

<div >
  <p>No base64 approach:</p>
  <div ></div>
</div>

<div >
  <p>Base64 approach:</p>
  <div ></div>
</div>