Converting SVG to HTML in C# using Aspose.PDF for .NET and Aspose.SVG for .NET

Examples.zip (586.0 KB)
We are evaluating various aspose products to convert svg to html.
We attempted this in 2 ways, first using the code:
public void ConvertSvgToHtml( string svgFilename, string htmlFilename )
{
// Initialize MemoryStream to save intermediary PDF file
MemoryStream stream = new MemoryStream();

	    // Load input SVG file
	    using ( SVGDocument document = new SVGDocument( svgFilename ) )
	    {
		    // Specify PdfRenderingOptions
		    PdfRenderingOptions options = new PdfRenderingOptions()
		                                  {
			                                  // Set Page Setup properties
			                                  PageSetup =
			                                  {
				                                  Sizing = SizingType.FitContent
															 
			                                  }
		                                  };
		    using ( PdfDevice device = new PdfDevice( options, stream ) )
		    {
					
			    // Render SVG to PDF file
			    document.RenderTo( device );
		    }
	    }

	    // Load the PDF document
	    Document pdfDocument = new Document(stream);
	    pdfDocument.PageInfo.IsLandscape = true;

	    // Save SVG file contents to output HTML format
	    pdfDocument.Save( htmlFilename, SaveFormat.Html );
	   
    }
}

This threw an exception in the line:
Document pdfDocument = new Document(stream); using document drivers-hbt.svg (included in the attached zip, in directory Examples\Data\convert). It was successful on other documents.
The second attempt used the attached solution and worked at converting; however, tags were generated that split words/strings into multiple spans and also “rearranged” or at least put $ into places unexpected. Ideally we would want strings to be kept in one span. There doesn’t seem to any pattern to the spans.
I’ve attached the solution that generated the documents. The resulting files are in the convert subdirectory.

@dbupp

We tested the scenario in our environment and did not notice any Exception. The API generated an output HTML without raising any issue. Could you please make sure that you are using a valid license while evaluating the APIs? Please try to apply for a 30-days free temporary license in order to evaluate the APIs without trial mode restrictions and let us know in case you still notice any issue.

Drivers-hbt-out.zip (351.1 KB)
I downloaded the trial license. And there isn’t an exception now. But the strings converted from svg to html still have issues. The strings where curly brackets occur, are split into multiple spans. We need to have these strings maintained as single strings so they are translated properly when in html. Also if you look at the spans, they characters appear out of sequence. Perhaps there is something int he classes that make them render properly in html, but they are needed as single strings and not split up. There is any highlighting, bolding or color changes, in the original string, so not sure why they are getting split across multiple spans. Not sure if there is an option that can be set that keeps strings intact or not. thanks,

@dbupp

Before we proceed with scenario testing, please check the screenshot of how your SVG rendered at our end (i.e. the text is overlapping in the table). Please confirm if the SVG is correct format and share a screenshot of the multiple spans issue so that we can develop a better understanding of the case.

svgrendering.png (108.5 KB)

our main use of Aspose will be to convert html to pdf and PowerPoint; however, currently the customer has a lot of svg based templates and we need to convert these to html and incorporate into a web application. When we saw the svg to html functionality, we wanted to see if we could use that functionality to do assist this conversion.

The provided png shows that final html properly renders in a browser. I guess the question is what is the definition of conversion: Is it how the final html displays or does it also include some internal consistency, across input and output files, with regards to text/data structure concepts internal to svg and html. We’d like to maintain the rendering of the original svg layout, but also maintain the integrity of text in the svgs when converting to html.

The strings in the text areas of the original svg contain handlebar expressions. we replace these with data before rendering as svgs. we use these to allow data values to be injected into the svg and html. Our goal is to convert the svg containing these expressions to html that also contains these expressions, so that the html can be used as templates.

Ideally any text within a single <text. or would be kept contiguous and not broken across multiple tags in the resulting output.
An Example from our file:
In the original svg text statement: (this can be found in previously attached Drivers-hbt.svg file)

 <text
       id="text130"
       style="font-variant:normal;font-weight:500;font-stretch:normal;font-size:21px;font-family:'Arial Nova Bold';-inkscape-font-specification:ArialNovaBold;writing-mode:lr-tb;fill:#0d355c;fill-opacity:1;fill-rule:nonzero;stroke:none"
       transform="matrix(1,0,0,-1,846,542.8803)"><tspan
         id="tspan128"
         y="0"
         x="0">{{CURRENT_DATE}} Cost Drivers</tspan></text>

The Aspose conversion process generated the following: (in the Drivers-hbt-out.html file)

<div class="stl_01" style="left:4.5em;top:4.2006em;"><span class="stl_13 stl_08 stl_09">{{CURRENT_D</span><span class="stl_13 stl_08 stl_14">A</span><span class="stl_13 stl_08 stl_09">T</span><span class="stl_13 stl_08 stl_09" style="word-spacing:0em;">E}} Cost Drivers &nbsp;</span></div>

The original string:
{{CURRENT_DATE}} Cost Drivers
was broken out into multiple spans with multiple css class decorating it. Even though the original string didn’t have multiple tspans.

Ideally the original svg would be translated generally into:

<div class="class if required" style="left:4.5em;top:4.2006em;"><span class="class if required">
{{CURRENT_DATE}} Cost Drivers</span></div>

where the classes would define the fonts and any text transformations needed.
There are other examples in the generated output file I attached. Some even create spans that are “out of order” relating to the original text. I’m assuming that the classes make these render correctly, but the text is split across multiple html tags and sometimes not even in order (positionally within the file) with the original text in the svg.
thanks,

@dbupp

Thanks for further elaborating on the issue.

We have tested the scenario using latest versions of Aspose.SVG and Aspose.PDF for .NET and observed that the issue seems related to Aspose.PDF. The HTML is generated by Aspose.PDF from the PDF document which is obtained using Aspose.SVG and it looks fine. Therefore, we have logged an issue as PDFNET-50096 in our issue tracking system for further investigation.

We will look into its details and keep you posted with the status of its correction. Please be patient and spare us some time.

We are sorry for the inconvenience.