火山引擎-你的AI云

.NET 8 中使用 SkiaSharp + Svg.Skia 转换 SVG 为指定尺寸 PNG 仅显示背景色的问题求助

阿华AIGC实验室

2026-4-2

.NET 8 中使用 SkiaSharp + Svg.Skia 转换 SVG 为指定尺寸 PNG 仅显示背景色的问题求助

大家好，我最近在做.NET 8项目时遇到了个棘手的问题：用SkiaSharp搭配Svg.Skia把SVG字符串转成指定尺寸的PNG，结果输出的图只有背景色，SVG里的内容完全没画出来！我反复检查了DrawPicture的调用逻辑，就是找不到问题所在，想请各位帮忙看看。

先贴一下我的测试代码：

using SkiaSharp;
using Svg.Skia;
using System.IO;

byte[] pngData;
int width = 50;
int height = 50;
// 测试用的闹钟SVG图标
string svgString = @"<svg xmlns=""http://www.w3.org/2000/svg"" width=""1em"" height=""1em"" viewBox=""0 0 32 32""><g fill=""none""><path fill=""#D3D3D3"" d=""M23.207 24.58C21 25.5 19.05 26 16.5 26c-2.788 0-4.5-.5-7.203-1.86l-2.586 2.237C5.317 27.588 6.11 30 7.905 30H24.09c1.796 0 2.599-2.412 1.194-3.623z""/><path fill=""#F8312F"" d=""M16.5 27C22.299 27 27 22.299 27 16.5S22.299 6 16.5 6S6 10.701 6 16.5S10.701 27 16.5 27""/><path fill=""#fff"" d=""M16.5 24a7.5 7.5 0 1 0 0-15a7.5 7.5 0 0 0 0 15""/><path fill=""#F9C23C"" d=""M4.273 9.228c-.735-2.284.039-4.883 2.033-6.294s4.588-1.178 6.32.396c.542.497.484 1.4-.106 1.817l-6.601 4.66c-.6.416-1.414.132-1.646-.579m24.454 0c.735-2.284-.039-4.883-2.033-6.294s-4.588-1.178-6.32.396c-.542.497-.484 1.4.106 1.817l6.601 4.66c.6.416 1.414.132 1.646-.579""/><path fill=""#F8312F"" d=""M15.168 16.445a1 1 0 0 1 1.387-.277l3 2a1 1 0 1 1-1.11 1.664l-3-2a1 1 0 0 1-.277-1.387""/><path fill=""#212121"" d=""M16 11a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1""/></g></svg>";

using (var svg = new SKSvg())
{
    using (var stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(svgString)))
    {
        svg.Load(stream);
    }

    var picture = svg.Picture;
    if (picture != null)
    {
        using (var bitmap = new SKBitmap(width, height))
        using (var canvas = new SKCanvas(bitmap))
        {
            canvas.Clear(SKColors.White);

            // 计算缩放比例让SVG适配画布
            var scaleX = (float)width / picture.CullRect.Width;
            var scaleY = (float)height / picture.CullRect.Height;
            var scale = Math.Min(scaleX, scaleY);

            if (scale > 0) 
                canvas.Scale(scale);

            // 改成绿色背景方便测试，结果还是只有绿色
            canvas.Clear(SKColors.Green);
            canvas.DrawPicture(picture);
            canvas.Flush();
            canvas.Save();

            using (var image = SKImage.FromBitmap(bitmap))
            using (var pngEncodedData = image.Encode(SKEncodedImageFormat.Png, 100))
            {
                pngData = pngEncodedData.ToArray();
            }
        }
    }
    else
    {
        throw new ArgumentException("Failed to load SVG.");
    }
}

// 保存生成的PNG到本地
using (var fileStream = File.OpenWrite("icon-preview.png"))
{
    fileStream.Write(pngData, 0, pngData.Length);
}

我已经排查了这些点：