search

mono / SkiaSharp

SkiaSharp is a cross-platform 2D graphics API for .NET platforms based on Google's Skia Graphics Library. It provides a comprehensive 2D API that can be used across mobile, server and desktop models to render images.
MIT License
4.44k stars 538 forks source link

SVG shows fine on browser rasterization with SkiaSharp has artifacts #557

Closed rraallvv closed 6 years ago

rraallvv commented 6 years ago

Description

I'm getting the svg string from this library, and I wanted to rasterize it on both Android and iOS with SkiaSharp:

<svg viewBox="0 0 160 160" width="160" height="160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/xlink">
<defs>
    <clipPath id="hexagon-clip-3602224084" transform="scale(0.5) translate(0, 16)">
        <path d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
    </clipPath>
</defs>
<path fill="white" stroke="#bbbbbb" transform="translate(0, 8) scale(0.5)" d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
<g transform="scale(0.9) translate(9, 8)">
    <g clip-path="url(#hexagon-clip-3602224084)">
        <g color="#3949ab" fill="#fb8c00">
            <rect fill="#795548" x="0" y="0" width="160" height="160">
            </rect>
            <circle cx="80" cy="80" r="40" fill="#3949ab">
            </circle>
            <g opacity=".1" fill="#010101">
                <path d="M119.21,80a39.46,39.46,0,0,1-67.13,28.13c10.36,2.33,36,3,49.82-14.28,10.39-12.47,8.31-33.23,4.16-43.26A39.35,39.35,0,0,1,119.21,80Z" />
            </g>
            <path d="M78.1 20.6C59.9 21.7 45.6 26.4 46 31.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" opacity=".1" />
            <path d="M78.1 19.6C59.9 20.7 45.6 25.4 46 30.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" fill="#fff800" />
            <path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464s-2.035 4.07-9.022 4.07c-6.988 0-24.148-13.092-30.163-25.121-6.014-12.03-4.068-15.214-3.095-17.248z" stroke-width=".885" />
            <path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464-4.334-7.518-7.873-6.633-15.214-6.191-12.118-3.184-21.582-14.418-20.079-16.806 0 .088 5.307-14.595-6.987-15.302z" opacity=".18" fill="#010101" stroke-width=".885" />
            <path d="M26.7 55.6c-4.2 2.2-8.8 8.3-9.7 13" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M30 59.2c-3.4 1.8-7.2 6.8-7.9 10.7" opacity=".6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M94 85s4.8-2 8.2 0c.8.4.7 1.1 0 2 0 0-3.4 4-4.1 4s-4.8-4-4.8-4c-.6-1-.3-1.7.7-2z" fill="#3a3a3a" />
            <path d="M99.3 84.1c1 .2 2 .4 3 .9.8.4.7 1.1 0 2-1.2 1.5-2.6 2.9-4.1 4 1.9-3.2 2.6-6.3 1.1-6.9z" opacity=".2" />
            <path d="M96 100c1.6.2 2-5.8 2-9M88 95.5s7.5 11 18 0" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M79 82s0-12 6-12 6 11.6 6 11.6S86 70 79 82zM102 82s0-12 6-12 6 11.6 6 11.6-5-11.6-12 .4z" fill="#010101" opacity=".6" />
            <path d="M96 86s4-1 6 0h-6z" opacity=".3" fill="#fff" />
            <path d="M93 90c-9.9-3.8-20.4-6.2-31-7M92.6 91.3c-12-2.8-27.7-1.2-27.7-1.2M92.5 93.2c-12.3-1-27.6 5-27.6 5M101 90c8.5-3.8 17.7-6.2 27-7M101.3 91.3c10.5-2.8 24.1-1.2 24.1-1.2M101.4 93.2c10.7-1 24 5 24 5" fill="none" stroke="#000" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 5.6 7 16.7 11.8 22.9 8.4s5.6-15.3-1.4-20.2c-1.7-1.4-3.2-2.9-4.4-4.7-7.9-3.2-14.6-8.1-19.5-15.8z" fill="#99671d" />
            <path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 12.2 12.9 22.9 8.4 22.9 8.4-10.1 1.1-21.6-35.8-21.6-35.8-1.4-1.5-2.6-3.1-3.7-4.9z" fill="#6d4716" />
            <path d="M54.8 115.4c-4 0-7.3-3.3-7.3-7.3.1-1.3.5-2.7 1.1-3.8.1-.2 7.1 8.1 10.8 9.5 0-.1-1.3 1.2-4.6 1.6z" fill="#fff" />
            <path d="M58.8 113.3c-.8.3-1.7.5-2.6.6-3.4-.1-6-2.9-5.9-6.3 0-.6.1-1.2.2-1.8 0 .2 4.6 6.2 8.3 7.5z" opacity=".2" />
            <path d="M94 124.5s-2.8 5.5-5.5 7.5c-1.2.8-2.3 1.8-3.4 2.7v4.4c0 .4 10.2-3 8.9-14.6z" fill="#6d4716" />
            <path d="M94.6 124.5s-5.4-1.4-8.9 2c-3.4 3.4-3.4 8.2-1.4 8.2s2.2.7 10.3-10.2z" fill="#fff" />
            <path d="M120.5 108.8s-4.8-8.2-19.1-.7c-14.3 7.5-2.7 23.2-15.7 30.7 0 0 3.7 3.64 8.39-5.85 4.644-9.396 4.61-24.75 26.41-24.15z" fill="#99671d" />
            <path d="M85.8 138.8s6.1 2.7 10.2-10.9 8.9-21.8 20.4-21.1c1.6 0 3.2.6 4.4 1.7 5.6 5 1.3 19.6-4.4 24.2-6.8 5.4-21.8 10.9-27.9 8.9s-2.7-2.8-2.7-2.8z" fill="#444" />
            <path d="M84.8 119.2l1 7.4c1.9-1.4 3.6-2.3 5-2.3l-.6-6.2c-1.8.5-3.6.8-5.4 1.1z" fill="#ffc866" />
            <path d="M119.2 112.6h-11.6c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h11.6c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM120.3 115.8h-14.7c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h14.7c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM120.3 118.9h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM119.2 122.1h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .2-.2.5-.5.5zM118.1 125.2h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM116.1 128.4H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h17.9c.3 0 .5.2.5.5 0 .2-.3.5-.5.5zM114 131.5H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5H114c.3 0 .5.2.5.5v.1c0 .2-.3.4-.5.4zM109.8 134.7H96.1c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h13.7c.3 0 .5.2.5.5v.1c0 .2-.3.5-.5.5zM104.5 137.8H95c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h9.5c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5z" />
        </g>
    </g>
</g>
</svg>

Code

This is how I'm currently doing it:

var byteArray = Encoding.ASCII.GetBytes(svgStoredAsString);
using (var inputStream = new MemoryStream(byteArray))
{
    var svg = new SkiaSharp.Extended.Svg.SKSvg();
    svg.Load(inputStream);
    using (var bitmap = new SKBitmap(100, 100))
    using (var canvas = new SKCanvas(bitmap))
    {
        canvas.Scale(100 / svg.CanvasSize.Width, 100 / svg.CanvasSize.Height);
        canvas.DrawPicture(svg.Picture);
        canvas.Flush();
        canvas.Save();

        using (var file = File.OpenWrite(path))
        using (var outputStream = new SKManagedWStream(file))
        {
            bitmap.Encode(outputStream, SKEncodedImageFormat.Png, 100);
        }
    }
}

((Image)image).Source = ImageSource.FromFile(path);

Expected Behavior

The svg shows just fine on the browser and even opens on Illustrator:

Actual Behavior

This is what I'm getting instead when rasterizing with my code:

Basic Information

mattleibow commented 6 years ago

This issue was moved to mono/SkiaSharp.Extended#45