search

mono / SkiaSharp.Extended

SkiaSharp is a cross-platform, comprehensive 2D graphics API for all .NET platforms. And, here is where you will find all sorts of extras that you can use with it.
https://mono.github.io/SkiaSharp.Extended
MIT License
218 stars 69 forks source link

[BUG] Some SVG are not correctly loaded/rendered #261

Closed ChristopheI closed 2 months ago

ChristopheI commented 3 months ago

Description

Some SVG are not correctly loaded/rendered

Code

       private void TestSVGToPng(String folder, String name, int size)
       {
           String fileToReadPath = Path.Combine(folder, name + ".svg");
           String fileToSavePath = Path.Combine(folder, name + ".png");

           SkiaSharp.Extended.Svg.SKSvg skSvg = new();

           SKBitmap bitmap;
           try
           {
               skSvg.Load(fileToReadPath);

               if ((skSvg != null) && (skSvg.Picture != null))
               {
                   bitmap = new SKBitmap(size, size);
                   using (SKCanvas canvas = new SKCanvas(bitmap))
                   {
                       canvas.Clear();

                       using (var paint = new SKPaint())
                       {
                           // get the size of the SVG
                           float svgMax = Math.Max(skSvg.Picture.CullRect.Width, skSvg.Picture.CullRect.Height);

                           // get the scale to fill the bitmap
                           float scale = size / svgMax;

                           // create a scale matrix
                           SKMatrix matrix = SKMatrix.CreateScale(scale, scale);

                           // Finally draw SVG picture using matrix and paint on canvas
                           canvas.DrawPicture(skSvg.Picture, ref matrix, paint);
                       }
                   }

                   using (SKData encoded = bitmap.Encode(SKEncodedImageFormat.Png, 90))
                   {

                       using (Stream stream = encoded.AsStream())
                       {
                           if (File.Exists(fileToSavePath))
                               File.Delete(fileToSavePath);

                           using (var fileStream = File.Create(fileToSavePath))
                           {
                               stream.Seek(0, SeekOrigin.Begin);
                               stream.CopyTo(fileStream);
                           }
                       }
                   }
               }
           }
           catch
           {

           }
       }

         List<String> imgsList = new() { "add-mic", "agent", "company_out", "dot", "dtmf", "leader" };
         int size = 200;
         foreach (var img in imgsList)
             TestSVGToPng(@"C:\media\test", img, size);

Don't hesitate to tell me if this code can be improved

Expected Behavior

The PNG file generated has the same rendered than the SVG

Actual Behavior

The PNG is black

Basic Information

Some SVG which are not working: 

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="add-mic" transform="translate(0 0.2)">
    <rect id="Frame" width="24" height="24" transform="translate(0 -0.2)" fill="rgba(180,248,196,0)"/>
    <path id="Tracé_241" data-name="Tracé 241" d="M12,14a2.946,2.946,0,0,0,3-3v-.4H13V11a1,1,0,0,1-2,0V5a.945.945,0,0,1,1-1,1.421,1.421,0,0,1,.6.2V2.1A1.268,1.268,0,0,0,12,2,2.946,2.946,0,0,0,9,5v6A2.946,2.946,0,0,0,12,14Z"/>
    <path id="Tracé_242" data-name="Tracé 242" d="M12,16a4.951,4.951,0,0,1-5-5H5a7,7,0,0,0,6,6.9V21h2V17.9A7,7,0,0,0,19,11H17A4.951,4.951,0,0,1,12,16Z"/>
    <path id="Tracé_243" data-name="Tracé 243" d="M21.6,3.2,20.2,1.8,18,3.9,15.9,1.8,14.5,3.2l2.1,2.1L14.5,7.4l1.4,1.4L18,6.7l2.2,2.1,1.4-1.4L19.5,5.3Z" transform="translate(9.034 -11.211) rotate(45)"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="Agent" transform="translate(1 1)">
    <rect id="Frame" width="24" height="24" transform="translate(-1 -1)" fill="rgba(180,248,196,0)"/>
    <path id="support_agent" d="M-103.5-1936v-2h8v-7.1a7,7,0,0,0-7-7,7,7,0,0,0-7,7v6.1h-1a2.006,2.006,0,0,1-2-2v-2a1.967,1.967,0,0,1,1-1.72,9,9,0,0,1,9-9.28,9.005,9.005,0,0,1,9,9.22,1.842,1.842,0,0,1,1,1.62v2.3a1.849,1.849,0,0,1-1,1.64v1.22a2.006,2.006,0,0,1-2,2Zm3-8a1,1,0,0,1,1-1,1,1,0,0,1,1,1,1,1,0,0,1-1,1A1,1,0,0,1-100.5-1944Zm-6,0a1,1,0,0,1,1-1,1,1,0,0,1,1,1,1,1,0,0,1-1,1A1,1,0,0,1-106.5-1944Zm4.049-7a6.042,6.042,0,0,1,5.951,5.03,8.038,8.038,0,0,1-7.121-4.469,8.072,8.072,0,0,1-4.86,5.89A6.048,6.048,0,0,1-102.447-1951Z" transform="translate(113.993 1956.001)"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="out" transform="translate(0.258 0.258)">
    <rect id="Frame" width="23.685" height="24" transform="translate(-0.258 -0.258)" fill="rgba(180,248,196,0)"/>
    <path id="Union_26" data-name="Union 26" d="M8.171,18.311V14.464H6.219v3.848H0V0H14.314V18.311Zm1.972-5.847V16.31h2.2V2H1.972V16.31H4.247V12.463Zm7.334-.918,1.065-1.08c-.058,0-.118-.01-.168-.01H15.186v-2h3.187c.059,0,.119.01.177.01l-1.075-1.09,1.39-1.42,3.451,3.5-3.451,3.5ZM8.257,10.31v-2H10.23v2Zm-4.142,0v-2H6.088v2Zm4.142-4v-2H10.23v2Zm-4.142,0v-2H6.088v2Z" transform="translate(1.426 2.586)"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="dot" transform="translate(2.574 6.926)">
    <rect id="Frame" width="24" height="24" transform="translate(-2.574 -6.926)" fill="rgba(180,248,196,0)"/>
    <path id="Tracé_983" data-name="Tracé 983" d="M5.078,0A5.078,5.078,0,1,1,0,5.078,5.078,5.078,0,0,1,5.078,0Z" transform="translate(4.336)"/>
    <path id="Tracé_982" data-name="Tracé 982" d="M19.019.75H.084V-.75H19.019Z" transform="translate(-0.084 5.205)"/>
  </g>
</svg>

<svg id="dtmf" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <rect id="Frame" width="24" height="24" fill="rgba(180,248,196,0)"/>
  <path id="Union_30" data-name="Union 30" d="M10564.3-2550.3l.7-3.5h-1.7l-.7,3.5h-1.9l.6-3.5h-2.1v-1.8h2.4l.4-2h-2.2v-1.8h2.5l.7-3.6h2l-.7,3.6h1.7l.7-3.6h1.9l-.6,3.6h2.1v1.8h-2.5l-.4,2h2.3v1.8h-2.6l-.7,3.5Zm-.7-5.3h1.7l.4-2h-1.7Zm-9.6.8-1.1,2-1.7-1,1.1-2h-2.3v-2h2.3l-1.1-2,1.7-1,1.1,2,1.1-2,1.7,1-1.1,2h2.3v2h-2.3l1.1,2-1.7,1Z" transform="translate(-10548 2567.9)"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="leader" transform="translate(-127 -256)">
    <rect id="Frame" width="24" height="24" transform="translate(127 256)" fill="rgba(180,248,196,0)"/>
    <path id="leader-2" data-name="leader" d="M19,18H5a1,1,0,0,1-1-1V9a1,1,0,0,1,1.71-.71L8.8,11.35l2.34-3.9a1,1,0,0,1,1.72,0l2.34,3.9,3.09-3.09A1,1,0,0,1,20,9v8A1,1,0,0,1,19,18ZM6,16H18V11.38l-2.29,2.29a1,1,0,0,1-1.57-.19L12,9.91,9.86,13.48a1,1,0,0,1-1.57.19L6,11.38Z" transform="translate(127 258.04)"/>
  </g>
</svg>

Screenshots

image

mattleibow commented 2 months ago

SkiaSharp.Extended.Svg is no longer support or recommended. Please use https://nuget.org/packages/svg.skia instead.

Svg.Skia is far superior and will probably fix this issue.