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 SVGbackground-image
s 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; subsequenturl()
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>')
- The topic ‘Broken inline SVG background-image when using CDN Base URL’ is closed to new replies.