Support more values for imageRendering

[LaurenzV]

As a standard SVG attribute, only optimizeSpeed and optimizeQuality are supported (see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering), however, as mentioned in the note there, it can also be used as a CSS property with the following possible values:

smooth

The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.

high-quality

Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.

crisp-edges

The image is scaled with an algorithm such as "nearest neighbor" that preserves contrast and edges in the image. Generally intended for images such as pixel art or line drawings, no blurring or color smoothing occurs.

pixelated

The image is scaled with the "nearest neighbor" or similar algorithm to the nearest integer multiple of the original image size, then uses smooth interpolation to bring the image to the final desired size. This is intended to preserve a "pixelated" look without introducing scaling artifacts when the upscaled resolution isn't an integer multiple of the original.

Here is an example SVG that uses pixelated:

[RazrFalcon]

Yes, SVG is endless.