SVG Problem with AdvAgg aggregation

I'd say this is a YUI compressor issue: https://github.com/yui/yuicompressor/issues/304

@saschaeggi This issue turns more into an evaluation of which preprocessing tool to use so maybe we should document the various ideas in other issues targeting icons / SVG handling or change the title and issue summary?

I think we'll fix this with agreeing and implementing a general approach on how to handle svg / icons in our frontend. Therefore I linked the issue to make the icons more robust cross-browser, which is the ultimate goal which should be achieved by this issue also.

Solution: I’d recommend to use base64 inlined svgs instead, as they're smaller anyway and might not produce the unwanted issues with compression.

While base64 SVG images are smaller uncompressed, they tend to be larger when gzipped.

Imo, we should begin with linking to all SVGs like this:

  background-image: url(../../images/path/to/svg.svg);

If we do want to use inlined SVG, we can make use of tools like https://www.npmjs.com/package/postcss-svg to inline them. This has several benefits:

- We 'll have a uniform way of handling background images.
- We have a seperation between CSS and SVG
- We can easily tweak the original SVGs if needed
- If we really are convinced base64 is the way to go (personally I'm not), we can set `utf8: false` in the plugin options

It looks like the PHP port of YUI Compressor fixed this in v2.4.8-p7 , which came out of this issue

According to https://git.drupalcode.org/project/advagg/-/blob/8.x-4.x/advagg_css_mini..., it looks like ADVAGG uses a slightly older version

/*!
 * cssmin.php v2.4.8-4
 * Author: Tubal Martin - http://tubalmartin.me/
 * Repo: https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port
 *
 * This is a PHP port of the CSS minification tool distributed with YUICompressor,
 * itself a port of the cssmin utility by Isaac Schlueter - http://foohack.com/
 * Permission is hereby granted to use the PHP version under the same
 * conditions as the YUICompressor.
 */

I updated CSSMin.inc in Advagg and it fixed the issue.

So the best course of action would be to open an issue with Advagg to update CSSMin.inc

A meta issue about overall SVG approach will be created shortly, which will reference some of the conversation that took place here.

Thank you for the research @bnjmnm! I opened #3127422: Update YUI Compressor to a more recent version for AdvAgg.

Just adding a note here that I've just provided a minimal working patch to AdvAgg on the issue @lauriii opened above that should solve this problem for most people running a real site with advagg and using the experimental claro theme.