pngImage.Mutate desaturates an image

[alejandroLoz]

So I have this code to overlay an SVG on top of a PNG:

Things work fine if back.png is a colored image. But when it's a B&W image output.png gets desaturated.
I suspect there is something wrong with the PixelColorBlendingMode, but I'm not sure what should I do to make it work.
Any ideas?

(I'm using .net 5)
SixLabors.ImageSharp Version="2.1.0"
Svg.Skia Version="2.0.0"
SkiaSharp.NativeAssets.Linux.NoDependencies

    static void Main()
    {
        string svgFilePath = "overlay.svg";
        string pngFilePath = "back.png";
        string outputFilePath = "output.png";

        // Load and render the SVG
        var svg = new SKSvg();
        using (var svgStream = File.OpenRead(svgFilePath))
        {
            svg.Load(svgStream);
        }

        // Load the PNG image
        using (Image<Rgba32> pngImage = Image.Load<Rgba32>(pngFilePath))
        {
            // Calculate the desired overlay size as a percentage of the PNG size
            float scaleFactor = 1; // Example: overlay should be 100% of the PNG size
            int overlayWidth = (int)(pngImage.Width * scaleFactor);
            int overlayHeight = (int)(pngImage.Height * scaleFactor);

            // Create a bitmap from the SVG with RGBA color type
            using var svgBitmap = new SKBitmap(new SKImageInfo(overlayWidth, overlayHeight, SKColorType.Rgba8888, SKAlphaType.Premul));
            using (var canvas = new SKCanvas(svgBitmap))
            {
                canvas.Clear(SKColors.Transparent);

                // Calculate scale factors
                float scaleX = overlayWidth / svg.Picture.CullRect.Width;
                float scaleY = overlayHeight / svg.Picture.CullRect.Height;

                // Create a scale matrix
                var scaleMatrix = SKMatrix.CreateScale(scaleX, scaleY);

                // Draw the SVG picture with scaling and RGBA preservation
                canvas.DrawPicture(svg.Picture, ref scaleMatrix);
            }

            // Convert SKBitmap to ImageSharp Image with RGBA preservation
            using var overlayStream = new MemoryStream();
            svgBitmap.Encode(overlayStream, SKEncodedImageFormat.Png, 100);
            overlayStream.Seek(0, SeekOrigin.Begin);
            using Image<Rgba32> overlayImage = Image.Load<Rgba32>(overlayStream);
            overlayImage.Save(intermediateFilePath);

            // Calculate position to overlay the SVG on the PNG
            int xPosition = (pngImage.Width - overlayWidth) / 2; // Center horizontally
            int yPosition = (pngImage.Height - overlayHeight) / 2; // Center vertically
            
            // Overlay the SVG on the PNG with alpha blending that preserves colors
            pngImage.Mutate(ctx => ctx.DrawImage(overlayImage, new Point(xPosition, yPosition), PixelColorBlendingMode.Normal, PixelAlphaCompositionMode.SrcOver, 1f));


            // Save the result
            pngImage.Save(outputFilePath);
        }
    }

This is back.png

This is overlay.svg:

And this is output.png

[JimBobSquarePants]

ImageSharp preserves the input image encoded format so if your PNG is grayscal on input, it's going to be grayscale on saving unless you specifically set the PNG metadata or use an explicit encoder.

BTW. ImageSHarp.Drawing can parse an SVG into a path for drawing.

[alejandroLoz]

Thanks! Using this encoder did the trick:

            var pngEncoder = new PngEncoder
            {
                ColorType = PngColorType.RgbWithAlpha,
                BitDepth = PngBitDepth.Bit8                
            };

            // Save the result
            pngImage.Save(outputFilePath,pngEncoder);