SkiaSharp or NGraphics: Which one to use?

DirkWeltzDirkWeltz DEMember ✭✭✭

Now we have to libraries for the same thing: SkiaSharp and NGraphics. Both support drawing on most platforms in a platform independet manner. If I understand it correct, NGraphics use always the drawing capabilities of the underlaying platform. Skia seems to use its own drawing functions.

So my question is, which one should be used, when starting a new project, where speed of drawing is essential?

Tagged:

Posts

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @DirkWeltz - I haven't used either but SkiaSharp is Xamarin supported, NGraphics is community contribution (specifically by Frank Krueger)

    For me the choice would be to go with SkiaSharp as it would have a brighter future that would be supported. NGraphics you will be left to yourself.

    With much of the controls that Frank has done, which are amazing and are much needed, they fill a gap until/unless Xamarin covers it.

    From Miguel:

    Why We Chose Skia
    While Mono has supported System.Drawing for a while, and we built a CoreGraphics-powered version for Mac/iOS, it has never been a pixel-perfect match for the original .NET implementation of System.Drawing. Mono.Cairo is also generally available, but has some limitations that are difficult to work around.

    Skia gives us the same graphics output across all platforms, is actively maintained, and offers great features not found elsewhere, like filters and hardware accelerated graphics.

  • BrightLeeBrightLee KRMember ✭✭✭

    @AdamP
    Your answer is always helpful.
    I had to make big decision (for me). and you saved my money and time.
    Thanks a lot.

  • PaulHoetsPaulHoets USMember ✭✭

    But does SkiaSharp do SVG? According to my understanding, it does not, and that is quite a downside.

    Am I wrong?

  • mattleibowmattleibow ZAXamarin Team Xamurai

    @PaulHoets, SVG is rather a large question, since it is a HUGE spec. But, SkiaSharp has the same support for SVG as NGraphics (in the upcoming version of v1.55).

    Basically, skia (from Google) will probably never get SVG as they have said that it is not really a feature they want. Skia is a 2D drawing library, not a SVG rendering library.

    To get SVG support, the XML is translated into drawing calls, which can be done - and has been done. I had a look at what NGraphics did, and then mapped that to our SKSvg. This is a fairly limited implementation (with regards to the SVG spec), but very usable. This is basically a single file which parses XML and draws to a SKPicture. I am preparing a release for this week, so it will be up on NuGet.org soon.

    For much more features, you can have a look at SVG by gentledepp. This does all things in the SVG spec or something :) It is also a much larger library.

    You can always request a feature as an issue. I will try and get those in, but as we are more a wrapper for skia, that may be a lower priority. I am wanting to work closer with gentledepp to get a full SVG story for SkiaSharp, but that might be a while.

  • PaulHoetsPaulHoets USMember ✭✭

    @mattleibow
    I think one big problem with the SVG tools available is that... if encoding for SVGs is ever so slightly different, which can throw the reader off, so depending on which program generated it.

    paulpatarinski's SVG library was really nice and simple, because it let you produce and display an SVG as easily as a Xamarin imageView, no rocket science required.
    As simple as this:

    new SvgImage { 
            SvgPath = "PluginSampleApp.Images.hipster.svg",
            SvgAssembly = typeof(App).GetTypeInfo().Assembly, 
            HeightRequest = 100,
            WidthRequest = 100
            };
    

    Boom.

    Downside was it was very picky about the encoding being just so, so you had to rummage around in the SVG code and tweak it and suddenly it would accept it (and by suddenly, I mean unrepeatably, not sure exactly how or why the code was okay).
    Plus very little other functionality.

    If one could get an SVG going as easily and simply as any control, that is very tolerant of at least a few of the SVG sources (Sketch, Adobe, Boxy, Inkscape, ...), that would be very powerful and extremely useful.

    I searched and searched for the last three weeks on everything SVG/Xamarin related. SkiaSharp, plus what you just linked me to, never showed up, so thank you very much for sharing this info - I really appreciate the hard and generous work you and your friends have been doing to slowly build up these tools.

  • DirkWeltzDirkWeltz DEMember ✭✭✭

    Do you think it is possible to post an example of a SVG file, that doesn't work with this or paulpatarinski's implementation?

  • mattleibowmattleibow ZAXamarin Team Xamurai

    @PaulHoets, I also just want to mention that your example code and SkiaSharp aren't quite the same. SkiaSharp draws to a canvas, and does not provide an "image view" control. SvgImage is more of a view that shows some image file, SkiaSharp draws that image file.

    SkiaSharp can load an image file and store it as a platform image. Then that platform image can be rendered in a image view control.

  • PaulHoetsPaulHoets USMember ✭✭

    Come very far in the last three weeks.
    @mattleibow Thanks for clarifying the difference - once I understood the point that its just a canvas you draw on, I understood what to do (eh...start learning to do)

    I ended up using NGraphics and NControl, but the same results could be done with SkiaSharp. SVG really works well. I don't know if it's because I'm a patient/persistent idiot, but I also found that animations are not too hard to do in Xamarin - my meaning is that there must be a better way, but it can be done acceptably

    @DirkWeltz You mean a file, or code? The file itself needs to be encoded properly - paulpatarinski's SVG code is finicky about the exact encoding of the SVG file. I suspect it needs something from Sketch? But for NGraphics I see that SVGs made in Sketch and Adobe Illustrator are acceptable in terms of the encoding. You drag and drop into the PCL, then the file is set as an "Embedded Resource", otherwise VS complains.

    Included is an SVG in txt format (rename the extension).

    So I still need to learn how to draw on the canvas as was said, but for this exact moment, all my needs are met, but I am sure there is more power in learning how to use SkiaSharp and NGraphics properly.

  • mattleibowmattleibow ZAXamarin Team Xamurai
    edited November 2016

    @PaulHoets I think I may have not mentioned that there is the SkiaSharp.Views and SkiaSharp.Views.Forms... I thought that you knew about them. Basically, SkiaSharp is the graphics rendering engine, Views are a set of native views, such as a UIView or Android View. Views.Forms is the Xamarin.Forms versions. I think what got me was that I was thinking you wanted a simple image view control, but it appears that you want to actually draw the image?

    Did you know about those? They are in separate NuGet packages so development can be done independently.

    If you did check those out, could you share why you weren't able to use them?

  • PaulHoetsPaulHoets USMember ✭✭

    @mattleibow Well, at minimum I wanted a simple image control, but at not so simple, I wanted to be able to actually manipulate the SVG further, getting into its code and changing text values and then updating the displayed view, and beyond, manipulating shapes within the image, such as progressing a chart.

    I don't think I ever did see SkiaSharp.Views?
    Can you provide a proper link?

  • mattleibowmattleibow ZAXamarin Team Xamurai

    Hi, the links are:

    https://www.nuget.org/packages/SkiaSharp.Views/
    https://www.nuget.org/packages/SkiaSharp.Views.Forms

    You should be able to do this for XAML:

    <SKCanvasView PaintSurface="DoPaint" />
    

    If you are not using Xamarin.Forms, you can you the native platform (Android):

    var control = new SKCanvasView(Context);
    control.PaintSurface += DoPaint;
    

    And this in the code behind (for both):

    private void DoPaint(object sender, SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;
    }
    

    In the native code, you can also add the views to the UI using the designers. If you want to use the OpenGL-based views, you can just use the SKGLView or SKGLSurfaceView.

Sign In or Register to comment.