背景图像 (image/svg+xml) 在转换为 base64 时停止显示

Question

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

 .check-nobase64 { background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%231675BB'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; width: 28px; height: 28px; margin: 0 auto; }

 <div class="check-nobase64"></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 class="check-base64">

When I decode base64, original data becomes from this;

%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%231675BB'/%3E%3C/svg%3E"

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 %23 it starts to appear with decoded base64.

Answer 1

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,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%231675BB'/%3E%3C/svg%3E"); } .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 class="wrapper"> <p>No base64 approach:</p> <div class="check-nobase64"></div> </div> <div class="wrapper"> <p>Base64 approach:</p> <div class="check-base64"></div> </div>