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 SVG file has it's own declared size, but when included in HTML, the media query size is based on the proportions of the DOM node in the HTML --. it reflects the space provided to it.
+The SVG file has its own declared size, but when included in HTML, the media query size is based on the proportions of the DOM node in the HTML --. it reflects the space provided to it.
Open the first SVG file or the second SVG file in your browser and resize your browser window. As the window grows and shrinks the image the SVG displays changes. The image size appears to stay the same -- because it is the same. In the SVG, all the images have the same dimensions. It's when we include the SVG in a flexible layout that the magic happens. You'll note that the first time you load the second one there may be flickers of white as the browser requests the next required PNG.
When you include the SVG in your HTML <img> with a flexible width, such as 70% of viewport, as you grow and shrink the container, the image responds to the changes. The "width" media query in the SVG is based on the element width in which the SVG is contained, not the viewport width.
I have included the first SVG and the second SVG so you can see SVG with both foreground and background images. These foreground images work perfectly in Opera. In Chrome and Safari, I need to open the SVG file first, after which the HTML file containing the foreground SVG image works perfectly*. In Firefox, the SVG works. Firefox supports SVG and supports SVG as background image, but blocks the importing of external raster images due to their content security policy (CSP).
