Add or define a way to show img before injection

[iconexperience]

Currently all <img> elements that should be injected will be hidden until injection is finished. This is done to prevent "unstyled content flash" and it works quite well.

However, in some cases it may be desirable to show the <img> elements before injection, for example if they already have the correct style (and are only injected to be styled later). In this case the SVG should be visible as soon as possible, which includes displaying the <img> before injection.

A simple way to make <img> elements visible is to add a leading space in the onload attribute value like this: onload=" SVGInject(this)". In this case the CSS selector will not match these elements and the elements will not be hidden.

Another way to show images is to add a custom class like show-unstyled that has a CSS rule like this applied: .show-unstyled { visibility: visible !important; }

We should consider adding a well defined way to suppress unstyled content flash for certain <img> elements. This can be done by defining a custom attribute like data-show-unstyled or a class show-unstyled. The selector for hiding <img> elements then has to be changed to img[onload^="SVGInject"]:not([data-show-unstyled]) or img[onload^="SVGInject"]:not(.show-unstyled).

[iconexperience]

Another simple way to show SVGs before injection is to add another CSS rule like the following

img[onload].show-unstyled {
  visibility: visible;
}

The selector has higher specificity than img[onload^="("], so the visibility from this rule will be applied if the class show-unstyled is set to the <img> element.