Responsive SVG for foreground images

The Clown Car Technique is one solution, which makes use of an SVG properties and its built-in support for media queries. The technique uses an empty SVG that doesn’t contain any actual graphics (referred to as the “car”) but applies a raster background image to the SVG via media queries (referred to as the “clowns”).

Here is the code for one of the HTML:

Here is the code for one of the SVG files

Unfortunately, when this file is used, all 4 PNGs are retrieved from the server. To solve this issue, we can use background images instead:

This version only downloads the images required, thereby solving the multi-HTTP and waste of bandwidth concerns.

However, it seems to trigger more Content Security Policy issues than the previous SVG. The issue is the content security protocol, or CSP, of webkit and moz — they do not allow assets to import images or scripts. So, the browser, while capable of rendering the images within the SVG, is blocking the SVG from showing. Because of these security issues,