Hubspot's CSS Minification Causing Background Image SVG Issues

Developer Support CMS Development
1

Hi

I am trying to set an svg as a background image in css however the minification is stripping out some important stuff.

This:

background-image: url(‘data&colon;image/svg+xml,<svg xmlns=“SVG namespace” viewBox=“0 0 100 100” preserveAspectRatio=“none”><linearGradient id=“gradient” gradientTransform=“rotate(90)”><stop offset=“6.05%” stop-color=“%23745BE4”/><stop offset=“93.95%” stop-color=“%237EDE9C”/></linearGradient><rect x=“0” y=“0” width=“100” height=“100” fill=“url(%23gradient)”/></svg>’);

Becomes this:

background-image: url(data&colon;image/svg+xml;charset=utf-8,<svg xmlns=“SVG namespace” preserveAspectRatio=“none” viewBox=“0 0 100 100”><path fill=“url(%23gradient)” d=“M0 0h100v100H0z”/></svg>);

2

Hi @tristanisginger

I would suggest try uploading that image in files and using that link.

Thanks!