Why the document is rendered in such way?

[bykka]

Hi,
I need to render a few svg images in one row (for displaying two-three charts)
The first an idea that I got was to use table.
So, here is my test for that

public void SvgToComponent()
    {
        var svgString = @"
            <svg width=""300"" height=""300"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" version=""1.1"" baseProfile=""full"" style=""position:absolute;left:0;top:0;user-select:none""><rect width=""300"" height=""300"" x=""0"" y=""0"" id=""0"" fill=""none"" fill-opacity=""1""></rect><g><path d=""M157.9285 209.4739L159.9106 224.3423L174.9106 224.3423"" fill=""none"" stroke=""#5470c6""></path><path d=""M136.6327 91.508L75.6679 111.258"" fill=""none"" stroke=""#91cc75""></path><path d=""M142.1336 90.5179L105.7522 93.158L90.7522 93.158"" fill=""none"" stroke=""#fac858""></path><path d=""M147.6402 90.0464L147.0503 75.058L132.0503 75.058"" fill=""none"" stroke=""#ee6666""></path><path d=""M150 90A60 60 0 1 1 134.2821 92.0953L150 150Z"" fill=""#5470c6"" stroke=""#fff"" stroke-linejoin=""round""></path><path d=""M134.2821 92.0953A60 60 0 0 1 139.005 91.016L150 150Z"" fill=""#91cc75"" stroke=""#fff"" stroke-linejoin=""round""></path><path d=""M139.005 91.016A60 60 0 0 1 145.2841 90.1856L150 150Z"" fill=""#fac858"" stroke=""#fff"" stroke-linejoin=""round""></path><path d=""M145.2841 90.1856A60 60 0 0 1 150 90L150 150Z"" fill=""#ee6666"" stroke=""#fff"" stroke-linejoin=""round""></path><text dominant-baseline=""central"" text-anchor=""start"" style=""font-size:8px;font-family:sans-serif;"" xml:space=""preserve"" transform=""translate(179.9106 224.3423)"" fill=""black"">Airplane: 95.78%</text><text dominant-baseline=""central"" text-anchor=""end"" style=""font-size:8px;font-family:sans-serif;"" xml:space=""preserve"" transform=""translate(70.6679 111.258)"" fill=""black"">Car: 1.29%</text><text dominant-baseline=""central"" text-anchor=""end"" style=""font-size:8px;font-family:sans-serif;"" xml:space=""preserve"" transform=""translate(85.7522 93.158)"" fill=""black"">Train: 1.68%</text><text dominant-baseline=""central"" text-anchor=""end"" style=""font-size:8px;font-family:sans-serif;"" xml:space=""preserve"" transform=""translate(127.0503 75.058)"" fill=""black"">No value: 1.25%</text></g></svg>";
        
        var svgComponent = Document.Parse(new StringReader(svgString), ParseSourceType.DynamicContent);
        
        var svg = (Component)svgComponent;
        
        using var doc = new Document();

        var table = new TableGrid
        {
            Width = Unit.Percent(100),
        };
        var row = new TableRow();
        table.Rows.Add(row);
        
        var widgetCell1 = new TableCell();
        row.Cells.Add(widgetCell1);
        widgetCell1.Contents.Add(svg);
        
        var widgetCell2 = new TableCell();
        row.Cells.Add(widgetCell2);
        widgetCell2.Contents.Add(new TextLiteral("Hello"));

        
        doc.Pages.Add(new Page
        {
            Contents = { svg, table }
        });

        doc.SaveAsPDF("svg.pdf", FileMode.Create);
    }

But after the execution I have got the next result

svg image has been rendered after the table but in the configuration it is defined before table
and the first cell of the table is empty but should contain the same svg image.

How to configure the document for getting the expected result - when svg is rendered before table and the first table cell will contain the same svg image?

[bykka]

I figured out.
Echarts generate SVG with absolute style and that brakes the layout

style=""position:absolute;left:0;top:0;user-select:none""

if to remove it - everything became fine

[richard-scryber]

Thank you Pavlo. I have created a separate branch to work on the viewport issue and getting there.

End of the week (almost) definitely 👍