inline SVG gets spacing removed

[futtta]

Reported in the Autoptimize support forum & confirmed using the YUI-CSS-compressor's GUI: when optimizing CSS with inlined SVG, the spaces get removed from the inline SVG;

a#mobile-menu-btn{ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9.125" height="9.137" viewBox="4.437 4.431 9.125 9.137"><path d="M9.282 8.712h4.125c.12 0 .155.047.155.168v.252c0 .12-.035.154-.155.154H9.282v4.127c0 .12-.036.155-.156.155h-.252c-.12 0-.156-.037-.156-.156V9.286H4.593c-.12 0-.156-.035-.156-.154V8.88c0-.12.036-.168.156-.168h4.125V4.585c0-.107.037-.154.156-.154h.252c.12 0 .156.05.156.156v4.126z"/></svg>') 0 0 no-repeat; }

becomes:
a#mobile-menu-btn{ background: url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="9.125"height="9.137"viewBox="4.4374.4319.1259.137"><pathd="M9.2828.712h4.125c.120.155.047.155.168v.252c0.12-.035.154-.155.154H9.282v4.127c0.12-.036.155-.156.155h-.252c-.120-.156-.037-.156-.156V9.286H4.593c-.120-.156-.035-.156-.154V8.88c0-.12.036-.168.156-.168h4.125V4.585c0-.107.037-.154.156-.154h.252c.120.156.05.156.156v4.126z"/></svg>') 0 0 no-repeat; }

Had a quick look at the source code, but haven't found a potential fix yet.

frank

[josephscott]

@futtta I tried out your potential fix, it appears to only cover a subset of the SVG cases. I ran into the space stripping problem with svg+xml as well.

My initial thought is to update your change to be:

               // remove whitespace, except if $token contains <svg, which needs whitepace left as is
               if (strpos($token,"<svg")===false && strpos($token,'svg+xml')===false) {
                   $token = preg_replace('/\s+/', '', $token);
               }

[futtta]

thanks @josephscott; got some example code of how svg+xml would be embedded in CSS?

[josephscott]

@futtta sure, something like this:

background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -64 1010.843 1024' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%23fff' d='M837.922,354.961C837.922,123.925,649.997-64,418.961-64S0,123.925,0,354.961 c0,231.036,187.925,418.961,418.961,418.961S837.922,585.997,837.922,354.961z M418.961,67.97 c158.276,0,286.903,128.715,286.991,286.991c0,158.276-128.715,286.991-286.991,286.991c-158.276,0-286.991-128.803-286.991-286.991 C131.97,196.685,260.685,67.97,418.961,67.97L418.961,67.97z M944.818,959.999c17.244,0,34.4-6.686,47.421-20.059 c25.338-26.13,24.722-67.921-1.408-93.347l-274.498-266.58c-26.042-25.25-67.833-24.722-93.347,1.408 c-25.338,26.13-24.722,67.921,1.408,93.347l274.498,266.58C911.65,953.841,928.278,960,944.818,959.999L944.818,959.999z'/%3E%3C/svg%3E");

The spaces between attributes were being removed. The change I proposed above has preserved them in my test cases so far.

[futtta]

Makes sense, committed in my fork and in Autoptimize. Thanks @josephscott

[futtta]

wrongfully closed, this is @tubalmartin 's bug to fix :-)

[tubalmartin]

Thank you for reporting and sorry for the delay.

I have a fix for this one. Already tested. I'll make a release this week. Stay tuned ;)

[tubalmartin]

Fixed in v2.4.8-p7 release. Thank you guys!