Currently experimenting with the innovative SVG stacking method to integrate multiple icons into a single file, reducing the browser's HTTP requests. The details of this technique can be found in depth here.
In essence, it involves placing numerous SVG elements within one SVG file and utilizing CSS styles to hide all icons except for the one currently selected for display. To choose the visible icon, the CSS :target selector is employed.
The approach is successful for me, except when stacking multiple icons, peculiar distortions occur in the displayed image despite hiding all other icons.
In my example, I decided to stack only two icons: a US flag and a UK flag.
The simplified SVG file looks like:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg153" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<svg:style
xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
.i { display: none; }
.i:target { display: block; }
</svg:style>
<svg:svg id="uk" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
<!-- SVG elements to draw UK flag -->
</svg:svg>
<svg:svg id="us" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
<!-- SVG elements to draw US flag -->
</svg:svg>
</svg>
Note that the CSS is embedded within the SVG file, inside a <svg::style> element. The CSS simply consists of:
.i { display: none; }
.i:target { display: block; }
In this manner, any svg::svg element with class="i" is automatically hidden unless targeted specifically in the SVG URL. Thus, to display a US flag icon, the following HTML snippet would be used:
<img
src="flags.svg#us"
width="80"
height="60"
alt="SVG Stacked Image"
/>
Similarly, for displaying the UK flag, the code would be changed to src="flags.svg#uk"
Everything works smoothly, but a strange image distortion occurs when stacking images in both Firefox and Chrome.
Here's an image of the undistorted US flag after removing the hidden UK flag from the SVG file:
As evident, it appears fine.
However, when overlaying it on top of the UK flag, the image seems distorted as shown below:
The resultant image is oddly skewed - resembling what happens to low-quality JPEGs with compression artifacts.
Why does this distortion occur? All other images stacked with the US flag are invisible, so why do they impact the visible icon?
Extensive searches on Google uncovered various issues and pitfalls associated with SVG stacking primarily related to cross-browser compatibility. Despite successfully working across most modern browsers up to and including IE9, the distortion persists in both Firefox and Chrome, indicating a probable mistake on my part rather than a cross-browser issue.
Therefore, what exactly causes this unusual distortion post the application of the SVG stacking technique?