Can I render SVG to PNG using SkiaSharp?

Question

I'm trying to use SkiaSharp to convert an SVG file to PNG. I know there are many alternatives, but I wanted to evaluate it's SVG load support.

Is this possible? I tried this:

var svg = new SKSvg(new SKSize(200, 200));
svg.Load("image.svg");

var bitmap = new SKBitmap((int)svg.CanvasSize.Width, (int)svg.CanvasSize.Height);
var canvas = new SKCanvas(bitmap);
canvas.DrawPicture(svg.Picture);
canvas.Flush();
canvas.Save();

using (var image = SKImage.FromBitmap(bitmap))
using (var data = image.Encode(SKImageEncodeFormat.Png, 80))
{
    // save the data to a stream
    using (var stream = File.OpenWrite("image.png"))
    {
        data.SaveTo(stream);
    }
}

But I just get an empty image.

Wallaroo

Show us what image.svg looks like – Auberbach

...also, when debugging, what are the values of svg.CanvasSize.Width and svg.CanvasSize.Height – Auberbach

Ahh, good question. In my haste I did not think to test well known file. I just tested against github.com/mono/SkiaSharp/blob/…. It rendered fine. So code is good. Perhaps filters are not supported. – Wallaroo

Answer 1

Yes it can. The above code works against test SVG shipped with SkiaSharp. https://github.com/mono/SkiaSharp/blob/8ca298b448810cf65ab13cd7b2de94c627a033c1/tests/Content/images/logos.svg.

My SVG may not be supported. I will post different question if I want to investigate further.

Wallaroo

Answer 2

Use this Code. i painted a flag from a svg web service.

  var svg = new SkiaSharp.Extended.Svg.SKSvg();
  svg.Load(msSvg);
  using (var bitMap = new SKBitmap((int)svg.CanvasSize.Width, (int)svg.CanvasSize.Height))
  using (SKCanvas canvas = new SKCanvas(bitMap))
  {
    canvas.DrawPicture(svg.Picture);
    canvas.Flush();
    canvas.Save();

    using (SKImage image = SKImage.FromBitmap(bitMap))
    {
      using (SKData data = image.Encode(SKEncodedImageFormat.Png, 80))
      {
        MemoryStream memStream = new MemoryStream(); 
        data.SaveTo(memStream);
        memStream.Seek(0, SeekOrigin.Begin);
        this._flagImage = ImageSource.FromStream(() => memStream);
      }
    }
  }

Peplum

Answer 3

SkiaSharp doesn't do too well with SVGs and can render quite poorly. SVG.Skia integrates nicely and will render an SVG to a file or stream in just a few lines of code:

private static MemoryStream? FlattenImage(string svg, SKEncodedImageFormat imageFormat)
{
    try
    {
        using var skSVG = SKSvg.CreateFromSvg(svg);

        var ms = new MemoryStream();
        skSVG.Save(ms, imageFormat == SKEncodedImageFormat.Jpeg ? SKColors.White : SKColors.Empty, imageFormat, 100, 1f, 1f);

        ms.Seek(0, SeekOrigin.Begin);

        return ms;
    }        
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
        throw;
    }
}

Marrissa