search

Quasimondo / QuasimondoJS

A collection of more or less useful Javascript utils and snippets
110 stars 23 forks source link

ZorroSVG: Generated images lose detail #5

Open Ryan-McMillan opened 9 years ago

Ryan-McMillan commented 9 years ago

The generated images have color banding. I believe this is because the svg filter by default converts to linearRGB which causes detail loss. If I add the attribute color-interpolation-filters="sRGB" to the filter element, the banding goes away(I only tried chrome).

After this change, I was seeing masks have an incorrect alpha that didn't match the original image image. When I bypass applyGammaCorrection, everything looked good though. Maybe it was a result of linearRGB causing issues?

We're considering using an SVG mask instead of a filter. Did you run into an issue with the mask approach?

Quasimondo commented 9 years ago

Thanks for looking into this! I'll try to patch my code accordingly. I did not run into any unusual issues with the mask apart from the already mentioned general incompatibilities with older versions of Safari.

The SVG mask approach should work and give you smaller files, but of course it will only be practical for maks with a hard edge - when the alpha channel contains smooth transitions from transparent to opaque (like in drop shadows or glows) it will be quite tricky to reconstruct that using only SVG gradient fills.