Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Radial Gradient only rendering the last color #286

Closed
binber18 opened this issue Sep 16, 2024 · 2 comments
Closed

[BUG] Radial Gradient only rendering the last color #286

binber18 opened this issue Sep 16, 2024 · 2 comments
Labels

Comments

@binber18
Copy link

binber18 commented Sep 16, 2024

Description
When rendering radial gradients it seems that the library only renders the last color of that color stack.

Test SVG

Code

using System.Text;
using SkiaSharp;

var svgText = """
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 500">
                    <defs>
                        <radialGradient fx="0" fy="0" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
                            gradientTransform="matrix(351.936,-1.54852,-1.54852,-351.936,226.836,256.704)" spreadMethod="pad"
                            id="radialGradient">
                            <stop style="stop-opacity:1;stop-color:#FF0000" offset="0" />
                            <stop style="stop-opacity:1;stop-color:#00FF00" offset="0.5" />
                            <stop style="stop-opacity:1;stop-color:#0000FF" offset="1" />
                        </radialGradient>
                    </defs>
                    <path
                        d="m 0,167 v 14 h 1 v 7 h 1 v 6 h 1 v 6 h 1 v 3 h 1 v 4 h 1 v 3 h 1 v 4 h 1 v 3 h 1 v 3 h 1 v 2 h 1 v 3 h 1 v 2 h 1 v 3 h 1 v 2 h 1 v 2 h 1 v 2 h 1 v 2 h 1 v 2 h 1 v 2 h 1 v 2 h 1 v 1 h 1 v 2 h 1 v 2 h 1 v 1 h 1 v 2 h 1 v 1 h 1 v 2 h 1 v 1 h 1 v 2 h 1 v 1 h 1 v 1 h 1 v 2 h 1 v 1 h 1 v 1 h 1 v 2 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 2 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 2 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 2 v 1 h 1 v 1 h 2 v 1 h 1 v 1 h 1 v 1 h 2 v 1 h 1 v 1 h 1 v 1 h 2 v 1 h 2 v 1 h 1 v 1 h 2 v 1 h 2 v 1 h 1 v 1 h 2 v 1 h 2 v 1 h 2 v 1 h 2 v 1 h 2 v 1 h 2 v 1 h 2 v 1 h 2 v 1 h 3 v 1 h 2 v 1 h 3 v 1 h 3 v 1 h 3 v 1 h 3 v 1 h 3 v 1 h 4 v 1 h 4 v 1 h 4 v 1 h 7 v 1 h 7 v 1 h 39 v -1 h 6 v -1 h 7 v -1 h 4 v -1 h 4 v -1 h 4 v -1 h 4 v -1 h 2 v -1 h 3 v -1 h 3 v -1 h 3 v -1 h 3 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 1 v -1 h 2 v -1 h 2 v -1 h 2 v -1 h 1 v -1 h 2 v -1 h 1 v -1 h 2 v -1 h 1 v -1 h 1 v -1 h 2 v -1 h 1 v -1 h 1 v -1 h 2 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 2 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -2 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -2 h 1 v -1 h 1 v -1 h 1 v -2 h 1 v -1 h 1 v -1 h 1 v -2 h 1 v -1 h 1 v -2 h 1 v -2 h 1 v -1 h 1 v -2 h 1 v -1 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -2 h 1 v -3 h 1 v -2 h 1 v -3 h 1 v -3 h 1 v -2 h 1 v -4 h 1 v -3 h 1 v -4 h 1 v -4 h 1 v -5 h 1 v -6 h 1 v -6 h 1 v -11 h 1 v -5"
                        style="fill:url(#radialGradient);" />
                </svg>
            """;

var svgBytes = Encoding.UTF8.GetBytes(svgText);

using var svgStream = new MemoryStream(svgBytes);

var svg = new SkiaSharp.Extended.Svg.SKSvg(new SKSize(500, 500));

svg.Load(svgStream);

using var bitmap = new SKBitmap(500, 500);
using var canvas = new SKCanvas(bitmap);

canvas.DrawPicture(svg.Picture);

using var outputStream = new FileStream("test.png", FileMode.Create);
using var image = SKImage.FromBitmap(bitmap);
using var data = image.Encode(SKEncodedImageFormat.Png, 100);

data.SaveTo(outputStream);

Console.WriteLine("Done!");

Expected Behavior

A PNG that with the same Colors as the SVG

Actual Behavior

A PNG that is just blue

Basic Information

  • Version with issue: SkiaSharp 2.88.8, SkiaSharp.Svg 1.60.0
  • Last known good version: /
  • IDE: VS Professional and VS Code
  • Platform Target Frameworks:
    • Windows Classic: Windows 11 Pro
Detailed IDE/OS information (click to expand)

PASTE ANY DETAILED VERSION INFO HERE

Screenshots

SVG:
image

Generated PNG:
image

Reproduction Link

@binber18 binber18 added the bug label Sep 16, 2024
@mattleibow
Copy link
Contributor

The SkiaSharp.Svg is no longer support or maintained. However, there is a far better library with almost full SVG support: https://github.com/wieslawsoltes/Svg.Skia

@mattleibow
Copy link
Contributor

Closing this issue for now as SkiaSharp.Svg will not receive any updates and the code has been removed from the main branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants