CSS Minifying svg in background-image

[jdbruxelles]

Hi there,

I use jekyll-minifier on some of my projects but when I put an svg tag as background image in a css file, the value of background-image, url(SVG) is minified too. Spaces between attributes and between points are removed and the data:image become invalide.

So

background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');

become

background-image:url('data:image/svg+xml,%3Csvgwidth="64"height="64"viewBox="006464"xmlns="http://www.w3.org/2000/svg"%3E%3Cpathd="M816c4.41808-3.5828-8s-3.582-8-8-8-83.582-883.582888zm0-2c3.31406-2.6866-6s-2.686-6-6-6-62.686-662.686666zm33.414-6l5.95-5.95L45.95.636406.58634.05.63632.6362.0538.5868l-5.955.951.4141.414L409.414l5.955.951.414-1.414L41.4148zM4048c4.41808-3.5828-8s-3.582-8-8-8-83.582-883.582888zm0-2c3.31406-2.6866-6s-2.686-6-6-6-62.686-662.686666zM9.41440l5.95-5.95-1.414-1.414L838.586l-5.95-5.95L.63634.056.58640l-5.955.951.4141.414L841.414l5.955.951.414-1.414L9.41440z"fill="%239C92AC"fill-opacity="0.4"fill-rule="evenodd"/%3E%3C/svg%3E');

Is there a way to avoid that ? Or can you do something about that, please ?

[Gizmokid2005]

Came here to +1 this. I was just noticing that my toggle icons were missing when CSS was being minified because the URLs were being touched.

This: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") is getting minified as url("data:image/svg+xml,%3csvgviewBox='003030'xmlns='http://www.w3.org/2000/svg'%3e%3cpathstroke='%23fff'stroke-width='2'stroke-linecap='round'stroke-miterlimit='10'd='M47h22M415h22M423h22'/%3e%3c/svg%3e")

[Gizmokid2005]

It looks like this could probably be addressed by using this for of cssminify2: https://github.com/bbbenji/cssminify

@digitalsparky is this something you can update in your specs? It appears that we're still pulling in your fork from rubygems instead of this one.

**EDITED to confirm that this solves the url minifying.

@jdbruxelles adding this to your Gemfile will fix this.

gem "cssminify2", :git => 'https://github.com/bbbenji/cssminify'

[digitalsparky]

I've merged the changes in that fork, packages are auto building and will auto deploy once complete.

[digitalsparky]

Hmm, looks like that patch fails testing, will investigate further when i can, if anyone finds the answer please create a pull req and i'll merge.

[Gizmokid2005]

Hmm, looks like that patch fails testing, will investigate further when i can, if anyone finds the answer please create a pull req and i'll merge.

The merge is failing because the test is incorrect. The test is expecting for all spaces to be removed from any url() params, which this fix explicitly doesn't do, so thus, it fails.

Specifically this test: Failure/Error: CSSminify2.compress(File.read(file)).chomp.strip.should eq(File.read(file + '.min').chomp.strip) is failing because it's incorrect, it doesn't account for spaces in url()s which is incorrect for a proper fixed version of cssminify. Unfortunately I don't have any suggestions for a fix other than removing this test, or removing this particular test spec which is also wrong for a proper url() treatment: digitalsparky/cssminify/spec/tests/dataurl-base64-doublequotes.css

***EDIT
@digitalsparky just proposed a PR that fixes the .min version of the broken test to act appropriately. This feels like the correct fix to me.

[Pleune]

It appears that this is fixed, and all it needs to start functioning is for the version of digitalsparky/cssminify to be bumped and deployed.

[cdown]

Hey there! Just checking if there's any update on when the versions will be bumped? Running into this as well.

[angel-carvajal]

Any update on this?

[arbesulo]

also having that problem. I have tried to open an issue on https://github.com/digitalsparky/cssminify but there issue reporting is disabled :(

[digitalsparky]

This is a known issue with SVG data URIs in CSS. The CSS minifier (cssminify2) may incorrectly remove spaces from SVG content in data URIs.

Workaround options:

1. Use base64 encoding for SVG data URIs:

background-image: url('data:image/svg+xml;base64,[base64-encoded-svg]');

2. Use preserve patterns to protect SVG data URIs:

jekyll-minifier:
  preserve_patterns:
    - 'data:image/svg\+xml[^'")]*'

3. Store SVGs as separate files instead of inline data URIs

This is a limitation of the CSS minification library when handling URL-encoded SVG data. Base64 encoding is the most reliable solution as it doesn't contain spaces that could be removed.