Search code examples
xamlxamarinsvgxamarin.formsskiasharp

SkiaSharp displays svg file in black color in xamarin forms

I am using nuget packages

  • SkiaSharp.Svg
  • SkiaSharp.Views.Forms
  • SkiaSharp.Extended

The problem is some SVG files display fine, but others show me all black and I have no idea why that is, If you could help me please I would be very grateful

This is a helper class to render the SVG files:

public class SVGImage : ContentView
{
    // Bindable property to set the SVG image path
    public static readonly BindableProperty SourceProperty = BindableProperty.Create(
      nameof(Source), typeof(string), typeof(SVGImage), default(string), propertyChanged: RedrawCanvas);

    private readonly SKCanvasView canvasView = new SKCanvasView();

    public SVGImage()
    {
        this.Padding = new Thickness(0);
        this.BackgroundColor = Color.Transparent;
        this.Content = this.canvasView;
        this.canvasView.PaintSurface += this.CanvasView_PaintSurface;
    }

    // Property to set the SVG image path
    public string Source
    {
        get => (string)this.GetValue(SourceProperty);
        set => this.SetValue(SourceProperty, value);
    }

    /// <summary>
    /// Method to invaldate the canvas to update the image
    /// </summary>
    /// <param name="bindable">The target canvas</param>
    /// <param name="oldValue">Previous state</param>
    /// <param name="newValue">Updated state</param>
    public static void RedrawCanvas(BindableObject bindable, object oldValue, object newValue)
    {
        SVGImage image = bindable as SVGImage;
        image?.canvasView.InvalidateSurface();
    }

    /// <summary>
    /// This method update the canvas area with teh image
    /// </summary>
    /// <param name="sender">The sender</param>
    /// <param name="args">The arguments</param>
    private void CanvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKCanvas canvas = args.Surface.Canvas;
        canvas.Clear();

        if (string.IsNullOrEmpty(this.Source))
        {
            return;
        }

        // Get the assembly information to access the local image
        Assembly assembly = typeof(SVGImage).Assembly;

        // Update the canvas with the SVG image
        using (Stream stream = assembly.GetManifestResourceStream(assembly.GetName().Name + ".Images." + this.Source))
        {
            SkiaSharp.Extended.Svg.SKSvg svg = new SkiaSharp.Extended.Svg.SKSvg();
            svg.Load(stream);
            SKImageInfo imageInfo = args.Info;
            canvas.Translate(imageInfo.Width / 2f, imageInfo.Height / 2f);
            SKRect rectBounds = svg.ViewBox;
            float xRatio = imageInfo.Width / rectBounds.Width;
            float yRatio = imageInfo.Height / rectBounds.Height;
            float minRatio = Math.Min(xRatio, yRatio);
            canvas.Scale(minRatio);
            canvas.Translate(-rectBounds.MidX, -rectBounds.MidY);
            canvas.DrawPicture(svg.Picture);
        }
    }
}

showing the svg image in the xaml

<StackLayout>
    <local:SVGImage
        HeightRequest="100"
        HorizontalOptions="CenterAndExpand"
        Source="Placa.svg"
        VerticalOptions="CenterAndExpand"
        WidthRequest="100" />
</StackLayout>

as seen in the image the svg file is shown in black without the colors

svg black

When should i show this way

Placa.svg:

svg origin

UPDATE

The Svg file

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 70.15">
    <defs>
        <style>.d{fill:#fff;}.e{fill:#c1c3c8;}.f{fill:#464655;}.g{fill:#ff6e40;}.h{isolation:isolate;opacity:.1;}</style>
    </defs>
    <g id="a"/>
    <g id="b">
        <g id="c">
            <g>
                <path class="e" d="M107.62,0H12.38C5.54,0,0,5.54,0,12.38V57.77c0,6.83,5.54,12.38,12.38,12.38H107.62c6.84,0,12.38-5.54,12.38-12.38V12.38c0-6.84-5.54-12.38-12.38-12.38Z"/>
                <path class="d" d="M12.38,61.29c-1.94,0-3.52-1.58-3.52-3.52V12.38c0-1.94,1.58-3.52,3.52-3.52H107.62c1.94,0,3.52,1.58,3.52,3.52V57.77c0,1.94-1.58,3.52-3.52,3.52H12.38Z"/>
                <g>
                    <path class="g" d="M107.62,8.86H12.38c-1.94,0-3.52,1.58-3.52,3.52v9.13H111.14V12.38c0-1.94-1.58-3.52-3.52-3.52Z"/>
                    <path class="g" d="M8.86,48.64v9.13c0,1.94,1.58,3.52,3.52,3.52H107.62c1.94,0,3.52-1.58,3.52-3.52v-9.13H8.86Z"/>
                </g>
                <g>
                    <path class="f" d="M29.28,13.13c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
                    <path class="f" d="M29.28,52.9c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
                    <path class="f" d="M90.72,13.13c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
                    <path class="f" d="M90.72,52.9c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
                </g>
                <path class="h" d="M19.99,57.77V12.38c0-6.84,5.54-12.38,12.38-12.38H12.38C5.54,0,0,5.54,0,12.38V57.77c0,6.83,5.54,12.38,12.38,12.38h19.99c-6.84,0-12.38-5.54-12.38-12.38Z"/>
            </g>
        </g>
    </g>
</svg>
Solution

  • I believe this is a known issue and is discussed here:

    https://github.com/mono/SkiaSharp.Extended/issues/48