SkiaSvg with Byte-Array? I already have the SVG in Memory

[bnSonic]

In my Apps I already have some functions to load my SVG as byte[] - and I need my own functions because I manipulate the SVG at runtime in different ways. (and I have a caching system so I don't access the resources every time of course :))

Now I wonder if it is possible to draw a SVG when I have the Byte-Array? it's not possible for me to simply give a Source="name" because I doesn't have the "Default RAW"-Resource folder and - see above - I need to manipulate the "code" of the SVG at runtime for different purposes.

Plus:

• I already have two "SvgImage"-Controls written for Xamarin/Maui to display such Byte-Array-Svg with the help of Skia …
• …one of it is doing a bit more like drawing the SVG inside a filled/framed circle which I need a lot so I build it as one control

So maybe there is a documentation about how I could Rewrite my own SvgImage-Controls to use the Canvas provided by the DrawnUI 🤔

currently the Controls have their own canvas so I know: the Canvas is the Size of what I like to paint on - so I know have the Space from 0,0 to width, height available. (the Controls is a Border-Based control so in the XAML the heightRequest and such are set or MAUI is setting the size based on the parent Grid-Cell etc.)

I don't know how it would work if I don't create my own Border+Canvas but instead setting a Canvas from DrawnUI … how would my control know where to draw and in what size?

Basically my SvgImage Controls are like this:

public class SvgImageEx : Border
{
        private SKCanvasView _canvasView = new SKCanvasView();
        private SKPicture _svgPicture;

        public SvgImageEx()
        {
            Padding = new Thickness(0);
            BackgroundColor = Colors.Transparent;
            StrokeThickness = 0;

            Content = _canvasView;
            _canvasView.PaintSurface += SkiaSharpPaintSurfaceEventHandler;
        }

        public static readonly BindableProperty ResourceProperty = BindableProperty.Create(
            nameof(Resource),
            typeof(byte[]),
            typeof(SvgImageEx),
            default(byte[]),
            propertyChanged: RedrawCanvas);

        public byte[] Resource
        {
            get => (byte[])GetValue(ResourceProperty);
            set => SetValue(ResourceProperty, value);
        }

        // because if different display resolutions
        private float _resolutionFactor = 1;
        float DeviceValue(float independentValue)
        {
            return independentValue * _resolutionFactor;
        }

        private void SkiaSharpPaintSurfaceEventHandler(object sender, SKPaintSurfaceEventArgs args) 
        {
            SKCanvas canvas = args.Surface.Canvas;
            canvas.Clear();

            SKImageInfo info = args.Info;

            //-- Um Auflösungsunabhängig zeichnen zu können, müssen wir einen Faktor für die aktuelle Auflösung ermitteln
            _resolutionFactor = info.Width / (float)this.Width;

...
                    //-- Hintergrund zeichnen (Kreis mit optionalem Rand)
                    DrawBackground_Circle(args);

                    //-- Größes des Bildes in der Mitte ermitteln
                    //   = gedachter innerer Kreis in dem ein passendes Quadrat berechnet wird
                    var rect = GetCenterRect(args);

                    //-- Das Svg-Picture in die Mitte zeichnen
                    DrawPicture(args, _svgPicture, rect);
...

        void DrawBackground_Circle(SKPaintSurfaceEventArgs args)
        {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;

            float width = info.Width;
            float height = DeviceValue((float)this.Height); //info.Height;

            //-- Gesamt-Maße
            float w = width;
            float h = height;

            //-- Hintergrund Shape
            using (var paint = new SKPaint
            {
                Style = SKPaintStyle.Fill,
                StrokeWidth = 0,
                StrokeJoin = SKStrokeJoin.Miter,
                Color = ShapeBackgroundColor.ToSKColor(),
                IsAntialias = true,
            })
            {
                canvas.DrawCircle(w / 2.0f, h / 2.0f, w / 2.0f, paint);
            }

            //-- Hintergrund Shape Umrandung
            if (ShapeBorderSize > 0)
            {
                using (var paint = new SKPaint
                {
                    Style = SKPaintStyle.Stroke,
                    StrokeWidth = DeviceValue((float)ShapeBorderSize),
                    StrokeJoin = SKStrokeJoin.Miter,
                    IsStroke = true,
                    Color = ShapeBorderColor.ToSKColor(),
                    IsAntialias = true,
                })
                {
                    float r = (w / 2.0f) - (paint.StrokeWidth / 2.0f);
                    canvas.DrawCircle(w / 2.0f, h / 2.0f, r, paint);
                }
            }

        }

        SKRect GetCenterRect(SKPaintSurfaceEventArgs args)
        {
            SKImageInfo info = args.Info;

            float width = info.Width;
            float height = DeviceValue((float)this.Height); //info.Height;

            float radiusAussen = width / 2.0f;
            float radiusInnen = radiusAussen - DeviceValue((float)ShapeBorderSize) - DeviceValue((float)ShapePadding);

            float a2 = radiusInnen * radiusInnen;
            float b2 = radiusInnen * radiusInnen;
            float c2 = a2 + b2;

            float c = (float)Math.Sqrt(c2);

            float x = (info.Width - c) / 2.0f;
            float y = (info.Height - c) / 2.0f;
            float x2 = x + c;
            float y2 = y + c;

            SKRect rect = new SKRect(x, y, x2, y2);
            return rect;
        }

        void DrawPicture(SKPaintSurfaceEventArgs args, SKPicture picture, SKRect rect)
        {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;

            float width = info.Width;
            float height = DeviceValue((float)this.Height); //info.Height;

            var bmp = GetBitmapFromSvg((int)rect.Width, (int)rect.Height);

            canvas.DrawBitmap(bmp, rect.Left, rect.Top);
        }

        SKBitmap GetBitmapFromSvg(int width, int height)
        {
            SKBitmap bitmap = new SKBitmap(width, height);

            using (SKCanvas canvas = new SKCanvas(bitmap))
            {
                canvas.Clear();

                canvas.Translate(width / 2f, height / 2f);

                SKRect bounds = _svgPicture.CullRect;
                float ratio = (bounds.Width > bounds.Height) ? (width / bounds.Width) : (height / bounds.Height);

                canvas.Scale(ratio);
                canvas.Translate(-bounds.MidX, -bounds.MidY);
                    canvas.DrawPicture(_svgPicture);
                return bitmap;
            }
        }

}   

[taublast]

Hi!

Did you had the opportunity to check demo apps like Sandbox or the engine demo? I almost never load svg from source, i just use SvgString property that accepts raw svg string.

For example i get stuff from app resources like
svg.SvgString = App.Current.Resources.Get<string>("SvgDefinedInResourcesName");
or
SvgString = {x:StaticResource SvgDefinedInResourcesName}
or you can set
svg.SvgString = "<svg>...blablabla</svg>".

I imagine you could create a string from the byte array?

If this doesn't help please tell me and we would dig further! :)

[bnSonic]

I have downloaded the Demo-Code for some research but haven't yet tried to compile/start ist - BUT I definitely will do it!

My bad - You already have a SvgString 🙈
A simple var s = Encoding.UTF8.GetString(bytes); is working fine! I don't think you need to change / add something.

Thanks a lot 👌

as an explanation
I'm a bit in a hurry to find a solution for a CollectionView Problem in an app I had to migrate to MAUI - with a lot of help - to be able to publish updates for our clients and now I'm stumbling across UI-Problems and desperately searching for solutions.
I once told my product management "well - I thought for years to write my very own List-View based on Skia because then every pixel is under my own control and I know where to search for and fix problems … but … writing a Scrollable List, with reusable cells, with caching, with checking what to draw and where, with my own design-language I had to develop and parse, with scroll-physics … Phew … I never started"
And now I found THIS project and - WOW! So I'm maybe a bit over-enthusiastic 😅 - pardon me

[taublast]

You know there is another "trick" i was using before creating skiascroll - i was using canvas for cells! This way 1 - i was able to draw anything onside a cell without passing through a buggy itemtemplate (my itemtemplate was canvas and thats it) and 2 - this was scrolling much faster inside a native collectionview, i even had shadows for cells.

[taublast]

From what i see in the skiasvg source you could also subclass SkiaSvg, like:

public class MySvg : SkiaSvg
{
        public void LoadSvgFromBytes(byte[] byteArray)
        {
            using (Stream stream = new MemoryStream(byteArray))
            {
                var svg = new SKSvg();
                try
                {
                    svg.Load(stream);
                    Svg = svg;
                    if (Svg == null)
                    {
                        throw new Exception("[SkiaSvg] Failed to load string");
                    }
                    Update();
                }
                catch (Exception e)
                {
                    Super.Log($"Failed to load {e}");
                }
            }
        }
}

[taublast]

I think i should modify SkiaSvg like this:

 public virtual bool LoadSvgFromBytes(byte[] byteArray)
 {
     using (Stream stream = new MemoryStream(byteArray))
     {
         var svg = new SKSvg();
         try
         {
             svg.Load(stream);
             Svg = svg;
             if (Svg == null)
             {
                 throw new Exception("[SkiaSvg] Failed to load string");
             }
             Update();
             return true;
         }
         catch (Exception e)
         {
             Super.Log($"Failed to load {e}");
         }
         return false;
     }
 }

 public virtual bool CreateSvg(string loadedString)
 {
     byte[] byteArray = Encoding.ASCII.GetBytes(loadedString);
     return LoadSvgFromBytes(byteArray);
 }

This way you could directly call LoadSvgFromBytes?