How to get SVG feColorMatrix effect in C#

401 views Asked by At

I am trying to get the same output from C# as I get from an SVG feColorMatrix effect.

Using original color red (#FF0000) and the following matrix (matrix row/columns switched for SVG):

0.2  0.7  0.7  0  0
0.0  0.0  0.0  0  0
0.0  0.0  0.0  0  0
0.0  0.0  0.0  1  0    
0.0  0.0  0.0  0  1

This is the result I've gotten so far (left is original, middle is from C#, right is from feColorMatrix): enter image description here

How do I get the same output from C# as I get from SVG feColorMatrix effect?

My code in C#:

// Create source bitmap
var sourceBitmap = new Bitmap(100, 100);
using (var sourceGraphics = Graphics.FromImage(sourceBitmap))
{
    sourceGraphics.FillRectangle(new SolidBrush(Color.FromArgb(255, 0, 0)), 0, 0, sourceBitmap.Width, sourceBitmap.Height);
}

sourceBitmap.Save(@"C:\Temp\sourceBitmap.png", ImageFormat.Png);

// Create color matrix
float[][] colorMatrixElements =
    {
        new[] { 0.2f, 0.7f, 0.7f, 0, 0 },
        new[] { 0.0f, 0.0f, 0.0f, 0, 0 },
        new[] { 0.0f, 0.0f, 0.0f, 0, 0 },
        new float[] { 0, 0, 0, 1, 0 },
        new float[] { 0, 0, 0, 0, 1 }
    };
var colorMatrix = new ColorMatrix(colorMatrixElements);

// Create target bitmap
var targetBitmap = new Bitmap(sourceBitmap);
using (var targetGraphics = Graphics.FromImage(targetBitmap))
{
    // Draw on target bitmap using color matrix
    var imageAttributes = new ImageAttributes();
    imageAttributes.SetColorMatrix(colorMatrix);
    var rect = new Rectangle(0, 0, sourceBitmap.Width, sourceBitmap.Height);
    targetGraphics.DrawImage(sourceBitmap, rect, 0, 0, sourceBitmap.Width, sourceBitmap.Height, GraphicsUnit.Pixel, imageAttributes);
}

targetBitmap.Save(@"C:\Temp\targetBitmap.png", ImageFormat.Png);

The code I use for SVG (and result image):

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="300px" 
     height="100px" 
     viewBox="0 0 300 100" >
  <defs>
    <filter id="colormatrixfilter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix id="colormatrix" 
                     type="matrix" 
                     in="SourceGraphic"
                     values="0.20 0.00 0.00  0 0
                             0.70 0.00 0.00  0 0
                             0.70 0.00 0.00  0 0
                             0.00 0.00 0.00  1 0" />
    </filter>
  </defs>

  <image x="0" y="0" width="100" height="100" xlink:href="sourceBitmap.png" />
  <image x="100" y="0" width="100" height="100" xlink:href="targetBitmap.png" />
  <image x="200" y="0" width="100" height="100" xlink:href="sourceBitmap.png" filter="url(#colormatrixfilter)" />
</svg>

RGB codes (using color picker on result):

Original:      r=255 g=0   b=0
C#:            r=51  g=178 b=178
feColorMatrix: r=124 g=218 b=218
1

There are 1 answers

0
Martin A On

Thanks to the comment from Robert, I figured it out. The solution was to add the following line to the ImageAttributes class:

imageAttributes.SetGamma(0.45f);

Gamma value was taken from:

https://en.wikipedia.org/wiki/Gamma_correction