Consider splitting rendering and processing

[gvheertum]

In the light of the issue #576 (where the author indicated a .NET standard build might be helpful) we might consider splitting some of the parts from the SVG library. As far as I known part of the rendering (System.Drawing) is the main culprit for the library not being able to be built against .NET standard. From my understanding the SVG library can facilitate 2 things: processing and transforming SVG files (the XML part) and rendering an SVG to a bitmap.

The first part could classify for a .NET standard build. Downside however is that this might result in 2 libraries/packages, but it might help people that want to use the SVG part in .NET standard applications.

Just a random thought, but perhaps something to consider in the future.

[wieslawsoltes]

This would help a lot with my SkiaSharp port.

This is my current rendering interface used for SkiaSharp:
https://github.com/wieslawsoltes/Svg.Skia/blob/4ac1dfb7d58cf9121a472a1d086367b39ba0cf01/src/Svg.Skia/ISvgRenderer.cs#L9
https://github.com/wieslawsoltes/Svg.Skia/blob/master/src/Svg.Skia/SvgRenderer.cs#L11
and a lot of helper methods:
https://github.com/wieslawsoltes/Svg.Skia/blob/master/src/Svg.Skia/SvgHelper.cs#L16

[mrbean-bremen]

So, I understand you are volunteering for this? 😛

[wieslawsoltes]

So, I understand you are volunteering for this? 😛

I will not be easy to decouple the System.Drawing dependencies from current implementation.

Anyway I will have pretty good idea and some implementation (for Skia) for further discussion when I finish implementing basic support for rendering in the Svg.Skia library.

[mrbean-bremen]

Sounds good! 👍

[tebjan]

See the linked issue, we could evaluate whether we could join forces with the skia drawing repo.

[paolofulgoni]

As I wrote on Gitter yesterday, I was thinking about extracting the SVG manipulation part in a separate library too, and make it fully netstandard compliant.
My original idea was a completely separate lib, not a split of the this one. But the latter may actually make more sense. I'm just a bit afraid it would be harder and more constrained.

[paolofulgoni]

@wieslawsoltes do you think you could achieve the full rendering functionality of vvvv/Svg with your Svg.Skia implementation?

[wieslawsoltes]

@wieslawsoltes do you think you could achieve the full rendering functionality of vvvv/Svg with your Svg.Skia implementation?

I think we can, a lot of rendering functionality already there.

[paolofulgoni]

So creating the new svg parsing/manipulation library seems a good idea for many reasons.
If vvvv/Svg will use such libary, should it maintain backward compatibility?
I mean, splitting the library without breaking changes could be difficult.
What do you think @tebjan?

[wieslawsoltes]

@tebjan @mrbean-bremen

So my current approach in Svg.Skia for rendering using SkiaSharp and document processing from Svg library is:

Step 1 - load document

var svgDocument = SvgDocument.Open<SvgDocument>(path, null);
if (svgDocument != null)
{
    // ...
}

Step 2 - draw using SKCanvas

float width = svgFragment.Width.ToDeviceValue(null, UnitRenderingType.Horizontal, svgFragment);
float height = svgFragment.Height.ToDeviceValue(null, UnitRenderingType.Vertical, svgFragment);
var skSize = new SKSize(width, height);
var cullRect = SKRect.Create(skSize);
using (var renderer = new SKSvgRenderer(skSize))
using (var skPictureRecorder = new SKPictureRecorder())
using (var skCanvas = skPictureRecorder.BeginRecording(cullRect))
{
    renderer.DrawFragment(skCanvas, svgFragment);
    return skPictureRecorder.EndRecording();
}

Here I am also using SKPictureRecorder to record SKPicture. The SKPicture is nice class that records draw command and you can cheaply redraw the SKPicture without the costly processing and allocations.

---

My current custom rendering interface:

public interface ISvgRenderer : IDisposable
{
    void DrawFragment(object canvas, SvgFragment svgFragment);
    void DrawImage(object canvas, SvgImage svgImage);
    void DrawSwitch(object canvas, SvgSwitch svgSwitch);
    void DrawSymbol(object canvas, SvgSymbol svgSymbol);
    void DrawUse(object canvas, SvgUse svgUse);
    void DrawForeignObject(object canvas, SvgForeignObject svgForeignObject);
    void DrawCircle(object canvas, SvgCircle svgCircle);
    void DrawEllipse(object canvas, SvgEllipse svgEllipse);
    void DrawRectangle(object canvas, SvgRectangle svgRectangle);
    void DrawMarker(object canvas, SvgMarker svgMarker);
    void DrawGlyph(object canvas, SvgGlyph svgGlyph);
    void DrawGroup(object canvas, SvgGroup svgGroup);
    void DrawLine(object canvas, SvgLine svgLine);
    void DrawPath(object canvas, SvgPath svgPath);
    void DrawPolyline(object canvas, SvgPolyline svgPolyline);
    void DrawPolygon(object canvas, SvgPolygon svgPolygon);
    void DrawText(object canvas, SvgText svgText);
    void DrawTextPath(object canvas, SvgTextPath svgTextPath);
    void DrawTextRef(object canvas, SvgTextRef svgTextRef);
    void DrawTextSpan(object canvas, SvgTextSpan svgTextSpan);
}

You can see in all cases I am passing drawing context object canvas as object.

In each the draw method I am casting drawing context canvas to appropriate SkiaSharp canvas (it can be Graphics object when using System.Drawing).

if (!(canvas is SKCanvas skCanvas))
{
    return;
}

Example how draw SvgCircle element using SkiaSharp:

float cx = svgCircle.CenterX.ToDeviceValue(null, UnitRenderingType.Horizontal, svgCircle);
float cy = svgCircle.CenterY.ToDeviceValue(null, UnitRenderingType.Vertical, svgCircle);
float radius = svgCircle.Radius.ToDeviceValue(null, UnitRenderingType.Other, svgCircle);
SKRect bounds = SKRect.Create(cx - radius, cy - radius, radius + radius, radius + radius);
SKMatrix matrix = SkiaUtil.GetSKMatrix(svgCircle.Transforms);

skCanvas.Save();

var skPaintOpacity = SkiaUtil.SetOpacity(skCanvas, svgCircle, _disposable);
var skPaintFilter = SkiaUtil.SetFilter(skCanvas, svgCircle, _disposable);
SkiaUtil.SetTransform(skCanvas, matrix);

if (svgCircle.Fill != null)
{
    var skPaintFill = SkiaUtil.GetFillSKPaint(svgCircle, _skSize, bounds, _disposable);
    skCanvas.DrawCircle(cx, cy, radius, skPaintFill);
}

if (svgCircle.Stroke != null)
{
    var skPaintStroke = SkiaUtil.GetStrokeSKPaint(svgCircle, _skSize, bounds, _disposable);
    skCanvas.DrawCircle(cx, cy, radius, skPaintStroke);
}

if (skPaintFilter != null)
{
    skCanvas.Restore();
}

if (skPaintOpacity != null)
{
    skCanvas.Restore();
}

skCanvas.Restore();

---

When we would have spitted processing of documents from the rendering of them each SvgElement would implement simple interface with Draw method:

void Draw(object canvas, ISvgRenderer renderer)

Currently I have to have this ugly hack method as I did not wan;t to change Svg library yet:

private void Draw(object canvas, SvgElement svgElement)
{
    // HACK: Normally 'SvgElement' object itself would call appropriate 'Draw' on current render.
    switch (svgElement)
    {
        case SvgFragment svgFragment:
            DrawFragment(canvas, svgFragment);
            break;
        case SvgImage svgImage:
            DrawImage(canvas, svgImage);
            break;
        case SvgSwitch svgSwitch:
            DrawSwitch(canvas, svgSwitch);
            break;
        case SvgUse svgUse:
            DrawUse(canvas, svgUse);
            break;
        case SvgForeignObject svgForeignObject:
            DrawForeignObject(canvas, svgForeignObject);
            break;
        case SvgCircle svgCircle:
            DrawCircle(canvas, svgCircle);
            break;
        case SvgEllipse svgEllipse:
            DrawEllipse(canvas, svgEllipse);
            break;
        case SvgRectangle svgRectangle:
            DrawRectangle(canvas, svgRectangle);
            break;
        case SvgMarker svgMarker:
            DrawMarker(canvas, svgMarker);
            break;
        case SvgGlyph svgGlyph:
            DrawGlyph(canvas, svgGlyph);
            break;
        case SvgGroup svgGroup:
            DrawGroup(canvas, svgGroup);
            break;
        case SvgLine svgLine:
            DrawLine(canvas, svgLine);
            break;
        case SvgPath svgPath:
            DrawPath(canvas, svgPath);
            break;
        case SvgPolyline svgPolyline:
            DrawPolyline(canvas, svgPolyline);
            break;
        case SvgPolygon svgPolygon:
            DrawPolygon(canvas, svgPolygon);
            break;
        case SvgText svgText:
            DrawText(canvas, svgText);
            break;
        case SvgTextPath svgTextPath:
            DrawTextPath(canvas, svgTextPath);
            break;
        case SvgTextRef svgTextRef:
            DrawTextRef(canvas, svgTextRef);
            break;
        case SvgTextSpan svgTextSpan:
            DrawTextSpan(canvas, svgTextSpan);
            break;
        default:
            break;
    }
}

Please note that I have not yet implement drawing for some element, so there might be some changes, this is just some ideas from my work with Svg.Skia.

[wieslawsoltes]

I might add that I have some experience with abstracting rendering interfaces in my other projects:

One example is my Core2D drawing application:
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Model/Renderer/IShapeRenderer.cs#L12
and the custom renderers implementations:
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Renderer.Avalonia/AvaloniaRenderer.cs#L24
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Renderer.Dxf/DxfRenderer.cs#L24
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Renderer.PdfSharp/PdfSharpRenderer.cs#L19
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Renderer.SkiaSharp/SkiaSharpRenderer.cs#L20
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Renderer.WinForms/WinFormsRenderer.cs#L21
https://github.com/wieslawsoltes/Core2D/blob/86dc381798f5fbd03fb24fe0bc1e9f687f45ef80/src/Core2D.Renderer.Wpf/WpfRenderer.cs#L25