• Resolved darrylyeo

    (@darrylyeo)


    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="https://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="https://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="https://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="https://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="https://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="https://www.w3.org/2000/svg" width="100" height="100"><rect x="20" y="20" width="60" height="60"/></svg>')

    https://www.ads-software.com/plugins/autoptimize/

Viewing 8 replies - 1 through 8 (of 8 total)
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Broken inline SVG background-image when using CDN Base URL’ is closed to new replies.