darrylyeo on "[Plugin: Autoptimize] Broken inline SVG background-image when using CDN Base URL"

The CDN Base URL option has the side effect of removing quotation marks around background-image URLs in the CSS. This breaks inline SVG background-images that contain unencoded quotes.

For instance, this:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>');

becomes this:

background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>);

which is invalid.

---

Another note: it seems that only the first instance of url() is processed; subsequent url()s in the property list remain untouched. So this:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>');

becomes this:

background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>')

https://wordpress.org/plugins/autoptimize/

- - , .
.