How to convert SVG string to Component?

[bykka]

Hi,

I use code approach for building document. And now I need to embed an svg image.
Im my case svg image comes as string, so I need to convert it somehow to the Component instance.

Documentation shows only how to use html templates but not how to do that programatically.

[bykka]

I have managed to implement it as the next

var svgString = @"
            <svg xmlns=""http://www.w3.org/2000/svg"" style=""border:solid 1px black"" >
                <rect x=""0pt"" y=""0pt"" width=""100pt"" height=""80pt"" fill=""lime"" ></rect>
                <g id=""eye"" stroke=""black"" stroke-width=""2pt"" >
                    <ellipse cx=""50pt"" cy=""40pt"" rx=""40pt"" ry=""20pt"" fill=""white""></ellipse>
                    <circle cx=""50pt"" cy=""40pt"" r=""20pt"" fill=""#66F""></circle>
                    <circle cx=""50pt"" cy=""40pt"" r=""10pt"" fill=""black""></circle>
                    <line x1=""10"" x2=""90"" y1=""40"" y2=""40"" />
                    <line x1=""50"" x2=""50"" y1=""20"" y2=""60"" />
                </g>
            </svg>";
        var component = Document.ParseHtml("", new MemoryStream(Encoding.UTF8.GetBytes(svgString)), ParseSourceType.Template);
        HTMLFragmentWrapper w = (HTMLFragmentWrapper)component;
        var svg = w.Content[0];

but do not like an idea of hardcoded type casting and Document.ParseHtml method invocation looks overcomplicated
So, maybe someone knows a better way?

[richard-scryber]

Hi Pavlo

As the svgString is valid XML is probably more efficient and easier to use the Parse methods on the Document class, rather than ParseHtml, and this has more overloads. But all visual components now include the DataContent property. This can be used to set string values that will be parsed as xml during the document processing.

These properties were added as part of this discussion #96

I have added a unit test with 3 examples in Scryber.UnitTests/Html/SVGParsing_Tests and attached the resulting document.

SVGInserted.pdf

But the code is as follows....

            var doc = new Document();
            

            var svgString = @"
            <svg xmlns=""http://www.w3.org/2000/svg"" style=""border:solid 1px black"" >
                <rect x=""0pt"" y=""0pt"" width=""100pt"" height=""80pt"" fill=""lime"" ></rect>
                <g id=""eye"" stroke=""black"" stroke-width=""2pt"" >
                    <ellipse cx=""50pt"" cy=""40pt"" rx=""40pt"" ry=""20pt"" fill=""white""></ellipse>
                    <circle cx=""50pt"" cy=""40pt"" r=""20pt"" fill=""#66F""></circle>
                    <circle cx=""50pt"" cy=""40pt"" r=""10pt"" fill=""black""></circle>
                    <line x1=""10"" x2=""90"" y1=""40"" y2=""40"" />
                    <line x1=""50"" x2=""50"" y1=""20"" y2=""60"" />
                </g>
            </svg>";



            //1. Explicit parsing of the content and adding to the page.
            //Allows handling of any parsing errors independently of the document flow.

            var pg1 = new Page();
            doc.Pages.Add(pg1);

            pg1.Contents.Add("The parsed component will be explicitly added after this.");
            var icomp = Document.Parse(new StringReader(svgString), ParseSourceType.DynamicContent);
            pg1.Contents.Add(icomp as Component);
            pg1.Contents.Add("This is after the parsed component");

            //2. Appending the data content to the page
            //Simply setting the DataContent to a string and the action as append.

            var pg2 = new Page();
            doc.Pages.Add(pg2);

            pg2.Contents.Add("The SVG content will be appended to the page.");
            pg2.DataContent = svgString;
            pg2.DataContentAction = DataContentAction.Append;
            pg2.Contents.Add(" Will still appear before the data content.");

            
            var pg3 = new Page();
            doc.Pages.Add(pg3);

            //3. Adding the content to an inner div (with some margins)
            //Gives flexibility in positioning and document flow.

            var div = new Div();
            div.DataContent = svgString;

            div.Margins = new Thickness(10);
            pg3.Contents.Add("Before the div with the inner svg");
            pg3.Contents.Add(div);
            pg3.Contents.Add("After the div with the inner svg");


            //Output the document (including databinding the data content)

            using (var stream = DocStreams.GetOutputStream("SVGInserted.pdf"))
            {
                doc.SaveAsPDF(stream);
            }

[bykka]

Thank you advice.
The example with SVG is interesting because I use Apache echarts for building exactly the same charts for the web and for pdf.
Together with that discovered that sometimes it is simpler to represent components as HTML templates than as Component class instances.

[bykka]

Have got a problem to convert the next SVG image

<svg width="1000" height="400" 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="1000" height="400" x="0" y="0" id="0" fill="none" fill-opacity="1"></rect><g><path d="M503.1463 120.0619L503.7363 105.0735L745 105.0735" fill="none" stroke="#5470c6"></path><path d="M504.3059 279.884L505.1132 294.8623L649 294.8623" fill="none" stroke="#91cc75"></path><path d="M488.3618 120.8511L417.7603 131.2324L291 131.2324" fill="none" stroke="#fac858"></path><path d="M495.7775 120.1115L494.9857 105.1324L315 105.1324" fill="none" stroke="#ee6666"></path><path d="M500 120A80 80 0 0 1 506.2878 120.2475L500 200Z" fill="#5470c6" stroke="#fff" stroke-linejoin="round"></path><path d="M506.2878 120.2475A80 80 0 1 1 485.1759 121.3855L500 200Z" fill="#91cc75" stroke="#fff" stroke-linejoin="round"></path><path d="M485.1759 121.3855A80 80 0 0 1 491.5667 120.4457L500 200Z" fill="#fac858" stroke="#fff" stroke-linejoin="round"></path><path d="M491.5667 120.4457A80 80 0 0 1 500 120L500 200Z" fill="#ee6666" stroke="#fff" stroke-linejoin="round"></path><text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(750 294.8623)" fill="black">Airplane</text><text dominant-baseline="central" text-anchor="start" style="font-size:12px;font-family:sans-serif;" transform="translate(250 131.2324)" fill="black">Car</text><text dominant-baseline="central" text-anchor="start" style="font-size:12px;font-family:sans-serif;" transform="translate(250 105.1324)" fill="black">Train</text></g></svg>

It fails with the next error

Scryber.PDFParserException : The XmlParser could not parse the source file 'Dynamic'. Could not read the value d from the Xml source
  ----> Scryber.PDFParserException : Could not read the value d from the Xml source
  ----> Scryber.PDFException : Could not parse the string '503.1463' into a valid unit value
   at Scryber.Generation.XMLParser.Parse(String source, XmlReader reader, ParseSourceType type)
   at Scryber.Generation.XMLParser.Parse(String source, TextReader reader, ParseSourceType type)
   at Scryber.Components.Document.Parse(String source, TextReader textreader, ParseSourceType type, PDFReferenceResolver resolver, ParserSettings settings)
   at Scryber.Components.Document.Parse(String source, TextReader textreader, ParseSourceType type, PDFReferenceResolver resolver)
   at Scryber.Components.Document.Parse(TextReader reader, ParseSourceType type)

[bykka]

Actually it is the issue described in the ticket #107