Search code examples
css.netsvgdotnetnuke

Why are SVG background images breaking when composite files enabled in dotnetnuke?


The site I'm working on uses a compressed SVG image as the background image for a button in a dotnetnuke site. The DNN version is 07.00.00 (1586). The css looks like this:

a.primaryButton {
     background: url(data:image/svg+xml;base64,[data]);
}

NOTE: I've used [data] here instead of the actual compressed file.

When I enable composite files in Host -> Host Settings -> Advanced Settings -> Client Resource Management and check off Minify CSS and Minify JS the above background image changes to:

a.primaryButton {
     background: url(https://mydevsite.com/DependencyHandler.axd/image/svg+xml;base64,[data]);
}

Once this happens the SVG background image no longer appears. My initial thought is that there is an issue trying to compress an already compressed SVG. If I copy and paste the url into the browser I get a 400 invalid request response. Why would the SVG background image be invalid after enabling composite files in DNN?

Update

After thinking about this some more, it really does not make sense for the DNN composite file handler to replace data: in the code above with https://mydevsite.com/DependencyHandler.axd so a follow-up question is, how do I prevent the DNN composite file functionality from trying to compress SVG files used as background images in the css code?


Solution

  • DotNetNuke's Client Resource Management Framework is the component which manages CSS files, and processes them to make sure resources are served via its DependencyHandler.axd endpoint.

    However, there was a bug in that component regarding data URIs, like you're using here, which shouldn't be served via the Dependency Handler. That bug was fixed in DNN 7.0.5.