PNG vs. SVG icons

[cubiclesoft]

Currently, the icons in the widget are sourced from a single PNG sprite sheet. The switch to PNGs was done after attempting a SVG icon implementation that rendered rather badly on desktop browsers.

Unfortunately, devices with higher pixel densities scale up the PNG icons, which ends up looking blurry. This was discovered pretty late during development.

The quick fix was to apply the relatively new CSS image-rendering: pixelated feature to provide a hint to the scaler to increase the crispness of the images. However, there are now a few jaggy edges and supposedly mobile Safari (iOS) flips the meaning of pixelated vs. crisp-edges. I would prefer a more refined option like "edge-detect-pixelated" that combines nearest neighbor for the interior and smooths out the edges of the scaled image instead of blunt instruments like nearest neighbor vs. bicubic scaling.

Overall, this is a minor issue. If someone wants to tackle it, be my guest. All the artwork used to create the widget is in the 'artwork' directory. Desktop browsers are the most critical environment, which means there can't be odd visual artifacts that show up on desktop browsers. SVGs tend to not display consistently at small sizes across browsers.