facing issue change SVG color using SkiaSharp

Bhuwan 736 Reputation points
2025-01-24T08:51:39.9833333+00:00

Previously, this functionality was working on .NET 8.0, but after updating from 8.0 to .90, it stopped working and is now causing an error. I've attached the project for your reference.

https://drive.google.com/drive/folders/1m_Uc0tIbdhZv5W91S4_gZIELjNQA3KvT?usp=sharing

User's image

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,864 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Bhuwan 736 Reputation points
    2025-01-24T10:35:21.5+00:00

    Issue in code now fix

    <PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="3.116.1" />
    <PackageReference Include="Svg.Skia" Version="2.0.0.4" />
    
    <ItemGroup>
      <EmbeddedResource Include="Resources\Icons\logout.svg" />
    </ItemGroup>
    
    
    using SkiaSharp;
    using SkiaSharp.Views.Maui;
    using SkiaSharp.Views.Maui.Controls;
    using SvgSkia = Svg.Skia.SKSvg; // Alias for Svg.Skia.SKSvg
    
    namespace SvgImage.Controls
    {
        public class SvgImageColorChange : ContentView
        {
            public static readonly BindableProperty SourceProperty = BindableProperty.Create(
                nameof(Source),
                typeof(string),
                typeof(SvgImageColorChange),
                default(string));
    
            public static readonly BindableProperty TintColorProperty = BindableProperty.Create(
                nameof(TintColor),
                typeof(Color),
                typeof(SvgImageColorChange),
                default(Color));
    
            public string Source
            {
                get => (string)GetValue(SourceProperty);
                set => SetValue(SourceProperty, value);
            }
    
            public Color TintColor
            {
                get => (Color)GetValue(TintColorProperty);
                set => SetValue(TintColorProperty, value);
            }
    
            public SvgImageColorChange()
            {
                var canvasView = new SKCanvasView();
                canvasView.PaintSurface += OnPaintSurface;
                Content = canvasView;
            }
    
            private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
            {
                var canvas = e.Surface.Canvas;
                canvas.Clear();
    
                if (!string.IsNullOrEmpty(Source))
                {
                    using var stream = GetEmbeddedResourceStream(Source);
                    if (stream == null)
                    {
                        System.Diagnostics.Debug.WriteLine("Stream is null, resource not found.");
                        return;
                    }
    
                    var svg = new SvgSkia(); // Using the alias for Svg.Skia.SKSvg
                    svg.Load(stream);
                    var picture = svg.Picture;
    
                    var scaleX = e.Info.Width / picture.CullRect.Width;
                    var scaleY = e.Info.Height / picture.CullRect.Height;
                    var matrix = SKMatrix.CreateScale(scaleX, scaleY);
    
                    var paint = new SKPaint
                    {
                        ColorFilter = SKColorFilter.CreateBlendMode(TintColor.ToSKColor(), SKBlendMode.SrcIn)
                    };
    
                    canvas.DrawPicture(picture, ref matrix, paint);
                }
            }
    
            private Stream GetEmbeddedResourceStream(string resourcePath)
            {
                var assembly = typeof(SvgImageColorChange).Assembly;
                var resourceName = $"SvgImage.Resources.Icons.{resourcePath}";
                System.Diagnostics.Debug.WriteLine($"Loading resource: {resourceName}");
                return assembly.GetManifestResourceStream(resourceName);
            }
        }
    }
    
    
    
     <controls:SvgImageColorChange Source="logout.svg"
                                   TintColor="Orange"
                                   HeightRequest="30"
                                   WidthRequest="30"/>
    
    
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.