Bloats and Mangles SVGs in Data URIs

[ghost]

Consider the following style rule I use to style external links:

a[rel*="external"]::after {
  content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}

That's an optimized SVG already. It doesn't get much smaller than that.

Now run that code through the online minifier tool and notice...

The output is larger than the input. Okay, that seems strange for a minification tool but I get that not everyone is using optimized SVGs in Data URIs yet.

But that's not the problem. The problem is that the tool under default settings (AFAIK) mangles the image by trying to base64 encode it. You can't do that with SVGs because they may be styled as part of the cascade.

[tdewolff]

Not sure what you mean, if I run the online too it becomes 425B, which is smaller. Whether you use base64 is irrelevant by the way, the minifier chooses whichever is smaller, and yes it does use the mentioned article (which is quite old). Can you explain what you mean with mangled SVGs? Is the resulting SVG image looking bad?

[ghost]

I think the misunderstanding here is what I shared is CSS with embedded SVG. It is parsed as CSS and the SVG is mangled. Just pop it into the minifer and choose CSS or, alternatively, wrap in a style tag and try as html to see the result shared earlier.

In order to resolve this the parser needs to know when to switch over to SVG when they're embedded in a data URI. The MIME type is there so it should be doable.

[ghost]

This is a duplicate of #180