False SVG optimization in CSS

[Alexey Skripnik]

Hello, guys. I love mod_pagespeed. It not only helps me to make my website faster, but teaches me how browsers work and how to design my code for faster execution.

But i guess i found a small bug there. I often use plain SVG images (not base64 encoded) as background in my CSS. It looks like this:

background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 48"><path fill="#fff" d="M37.1 37.7V17.1h4.1v.35c0 .2.02.35.04.35s.27-.15.54-.34c.77-.5 1.68-.7 3.15-.63 2.12.1 3.4.6 4.68 1.87 1.17 1.15 1.76 2.35 2.06 4.1.18 1.1.18 1.95-.02 3.1-.43 2.54-1.77 4.46-3.84 5.5-1.24.63-2.9.88-4.53.7-.87-.1-1.33-.24-2.06-.6v6.2h-4.1zm8.43-9.73c.7-.32 1.32-.94 1.66-1.66.33-1.1.44-2.53.02-3.6-.44-1.1-1.27-1.8-2.4-2-.76-.13-1.5-.06-2.12.2-.5.24-.8.5-1.2 1.04l-.3.4v4.71l.38.36c.7.67 1.36.9 2.53.84.67-.02 1-.1 1.43-.3zM77.7 37.7v-5.45l-1-.07c-2.3-.16-4.14-1.05-5.33-2.56-.67-.84-.9-1.23-1.2-2.1-.77-2.1-.64-4.58.32-6.57 1.18-2.43 3.38-3.86 6.33-4.1l.87-.07V11.1h4.1v5.68l.83.07c1.05.08 2.28.37 3.02.7 1.87.82 3.4 2.68 3.96 4.8.32 1.17.32 3.28 0 4.44-.54 2.07-1.8 3.66-3.65 4.56-1.08.52-1.87.72-3.17.8l-.98.07v5.47zm0-13.15V20.7h-.5c-.26 0-.77.1-1.13.2-.78.24-1.47.85-1.78 1.57-.48 1.1-.48 2.95 0 4.05.2.52.82 1.18 1.3 1.43.33.17 1.25.4 1.8.43l.3.02v-3.85zm5.85 3.6c1.3-.36 1.93-1.4 2.02-3.3.08-1.55-.23-2.6-.98-3.36-.46-.46-1.44-.8-2.26-.8h-.54v7.72l.62-.07c.35-.03.85-.13 1.13-.2zm-57.1 4l-.75-.16c-2.1-.43-4-1.9-4.95-3.84-.92-1.87-1.2-3.96-.94-6.86.4-4.35 1.94-6.95 4.95-8.4 1.1-.53 2.27-.85 4.24-1.15 2.2-.34 3-.52 3.76-.8l.62-.23.3 1.66c.2.92.35 1.75.38 1.85.12.4-1.35.8-4.45 1.26-1.17.17-2.4.4-2.74.5-1.65.56-2.83 1.67-3.26 3.07-.3.97-.26 1 .36.44 1.1-1 2.62-1.5 4.63-1.5 1.48 0 2.3.2 3.4.76 1 .52 2.14 1.64 2.58 2.57 1.04 2.17.9 5.33-.35 7.47-.53.9-1.72 2.07-2.58 2.52-1.14.6-2 .8-3.6.83-.77.02-1.5.02-1.6 0zM29 28.17c1.22-.37 2-1.63 2-3.24 0-1.8-1.06-3-2.8-3.12-1.3-.1-2.48.3-3.36 1.1-.74.68-.87.98-.82 1.83.1 1.74 1.5 3.3 3.1 3.55.6.08 1.36.03 1.88-.12zm61.2 3.84l-.35-.07-.03-1.87c-.02-1.85-.02-1.87.2-1.83.1.02.43 0 .7-.05 1.6-.3 2.18-2.55 2.18-8.48V17.1h12v14.8h-4.1v-11h-3.97l-.06 1.67c-.24 6.5-1.84 9.35-5.32 9.48-.5.02-1.06 0-1.25-.03zM53.6 24.5v-7.4h4.1v4c0 2.36.04 4 .1 4 .04 0 .1-.04.12-.1 0-.04 1.47-1.84 3.23-4l3.2-3.9h3.55v14.8H63.78v-8c-2.23 2.64-6.6 8-6.6 8H53.6zm53.9-7.4h4.1v7.96c2.37-2.75 4.1-4.94 6.55-7.95h3.55v14.8h-4.15v-8l-6.5 8h-3.54z"/></svg>')

The same code after mod_pagespeed optimization:

background-image:url(data:image/svg+xml,<svg\ xmlns=\"http://www.w3.org/2000/svg\"\ viewBox=\"0\ 0\ 142\ 48\"><path\ fill=\"#fff\"\ d=\"M37.1\ 37.7V17.1h4.1v.35c0\ .2.02.35.04.35s.27-.15.54-.34c.77-.5\ 1.68-.7\ 3.15-.63\ 2.12.1\ 3.4.6\ 4.68\ 1.87\ 1.17\ 1.15\ 1.76\ 2.35\ 2.06\ 4.1.18\ 1.1.18\ 1.95-.02\ 3.1-.43\ 2.54-1.77\ 4.46-3.84\ 5.5-1.24.63-2.9.88-4.53.7-.87-.1-1.33-.24-2.06-.6v6.2h-4.1zm8.43-9.73c.7-.32\ 1.32-.94\ 1.66-1.66.33-1.1.44-2.53.02-3.6-.44-1.1-1.27-1.8-2.4-2-.76-.13-1.5-.06-2.12.2-.5.24-.8.5-1.2\ 1.04l-.3.4v4.71l.38.36c.7.67\ 1.36.9\ 2.53.84.67-.02\ 1-.1\ 1.43-.3zM77.7\ 37.7v-5.45l-1-.07c-2.3-.16-4.14-1.05-5.33-2.56-.67-.84-.9-1.23-1.2-2.1-.77-2.1-.64-4.58.32-6.57\ 1.18-2.43\ 3.38-3.86\ 6.33-4.1l.87-.07V11.1h4.1v5.68l.83.07c1.05.08\ 2.28.37\ 3.02.7\ 1.87.82\ 3.4\ 2.68\ 3.96\ 4.8.32\ 1.17.32\ 3.28\ 0\ 4.44-.54\ 2.07-1.8\ 3.66-3.65\ 4.56-1.08.52-1.87.72-3.17.8l-.98.07v5.47zm0-13.15V20.7h-.5c-.26\ 0-.77.1-1.13.2-.78.24-1.47.85-1.78\ 1.57-.48\ 1.1-.48\ 2.95\ 0\ 4.05.2.52.82\ 1.18\ 1.3\ 1.43.33.17\ 1.25.4\ 1.8.43l.3.02v-3.85zm5.85\ 3.6c1.3-.36\ 1.93-1.4\ 2.02-3.3.08-1.55-.23-2.6-.98-3.36-.46-.46-1.44-.8-2.26-.8h-.54v7.72l.62-.07c.35-.03.85-.13\ 1.13-.2zm-57.1\ 4l-.75-.16c-2.1-.43-4-1.9-4.95-3.84-.92-1.87-1.2-3.96-.94-6.86.4-4.35\ 1.94-6.95\ 4.95-8.4\ 1.1-.53\ 2.27-.85\ 4.24-1.15\ 2.2-.34\ 3-.52\ 3.76-.8l.62-.23.3\ 1.66c.2.92.35\ 1.75.38\ 1.85.12.4-1.35.8-4.45\ 1.26-1.17.17-2.4.4-2.74.5-1.65.56-2.83\ 1.67-3.26\ 3.07-.3.97-.26\ 1\ .36.44\ 1.1-1\ 2.62-1.5\ 4.63-1.5\ 1.48\ 0\ 2.3.2\ 3.4.76\ 1\ .52\ 2.14\ 1.64\ 2.58\ 2.57\ 1.04\ 2.17.9\ 5.33-.35\ 7.47-.53.9-1.72\ 2.07-2.58\ 2.52-1.14.6-2\ .8-3.6.83-.77.02-1.5.02-1.6\ 0zM29\ 28.17c1.22-.37\ 2-1.63\ 2-3.24\ 0-1.8-1.06-3-2.8-3.12-1.3-.1-2.48.3-3.36\ 1.1-.74.68-.87.98-.82\ 1.83.1\ 1.74\ 1.5\ 3.3\ 3.1\ 3.55.6.08\ 1.36.03\ 1.88-.12zm61.2\ 3.84l-.35-.07-.03-1.87c-.02-1.85-.02-1.87.2-1.83.1.02.43\ 0\ .7-.05\ 1.6-.3\ 2.18-2.55\ 2.18-8.48V17.1h12v14.8h-4.1v-11h-3.97l-.06\ 1.67c-.24\ 6.5-1.84\ 9.35-5.32\ 9.48-.5.02-1.06\ 0-1.25-.03zM53.6\ 24.5v-7.4h4.1v4c0\ 2.36.04\ 4\ .1\ 4\ .04\ 0\ .1-.04.12-.1\ 0-.04\ 1.47-1.84\ 3.23-4l3.2-3.9h3.55v14.8H63.78v-8c-2.23\ 2.64-6.6\ 8-6.6\ 8H53.6zm53.9-7.4h4.1v7.96c2.37-2.75\ 4.1-4.94\ 6.55-7.95h3.55v14.8h-4.15v-8l-6.5\ 8h-3.54z\"/></svg>)

"Optimized" code is 7% bigger than original. Is there a way how to fix it? Thank you.

Alexey.

[Jeff Kaufman]

I've opened a bug: https://github.com/pagespeed/mod_pagespeed/issues/1280

> --
> You received this message because you are subscribed to the Google Groups
> "mod-pagespeed-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to mod-pagespeed-di...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/mod-pagespeed-discuss/f5bb2913-c3a5-4966-ba49-9525f43d6d70%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.