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):
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
Thanks to the comment from Robert, I figured it out. The solution was to add the following line to the ImageAttributes class:
Gamma value was taken from:
https://en.wikipedia.org/wiki/Gamma_correction