Aspose.SVG renders an imaginary line between two foreignObject divs

Aspose.SVG Product Family
,
1

Hello,

I’m trying to convert an svg to png
image.png (4.6 KB)
but there’s an imaginary line added between the two divs:
image.png (5.6 KB)

Aspose.SVG version: 24.6.0
C# target framework: .NET 8

Svg in question:

<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'>
	<foreignObject width='300' height='300'>
		<div xmlns='http://www.w3.org/1999/xhtml' style='width: 100%; height: 100%; font-family: Arial;'>
			<style type='text/css'/>
			<div style='width:100%;font-size:16px;text-align:center;font-family: Arial;color: #012ad2;background-color: #FFF;'>Some text</div>
			<div style='width:100%;text-align:center;font-family: Arial;color: #012ad2;background-color: #FFF;'>Some longer text. Something here as well.</div>
		</div>
	</foreignObject>
</svg>

C# code used to convert:

using Aspose.Svg;
using Aspose.Svg.Saving;
using Aspose.Svg.Converters;
using Aspose.Svg.Rendering.Image;

using var document3 = new SVGDocument(@"path to the svg file");
var options3 = new ImageSaveOptions();
options3.PageSetup.Sizing = Aspose.Svg.Rendering.SizingType.FitContent;
options3.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

Converter.ConvertSVG(document3, options3, @"path to the output png file");

Let me know if you need more info.

Thanks!

2

@pavle.aleksov

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): SVGNET-392

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

1 Like
3

@pavle.aleksov

We have investigated the problem. This issue stems from the internal behavior of GDI+ rendering, which can sometimes introduce visual artifacts in certain scenarios.

Although a direct fix to completely eliminate this issue is complex due to its dependency on the underlying rendering engine, we can offer you a couple of workarounds that should help mitigate the problem:

Change the Smoothing Mode: You can adjust the SmoothingMode to Default. This adjustment keeps the image quality consistent while potentially eliminating the unwanted line. You can apply this setting as follows:

options3.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.Default;

Set a Background Color: Setting a background color that matches the div backgrounds can also help mask the line. This is how you can set a white background:

options3.BackgroundColor = System.Drawing.Color.White;

We recommend trying these solutions to see which one works best for your specific case. Please let us know the outcome or if you need further assistance with any other issues.

4

Thanks @asad.ali , I indeed used something like the second workaround, although I didn’t do it through ImageSaveOptions but I rather edited the source svg: I wrapped the two text divs in another div with height 100%, to which I then added a background-color. The workarounds are fine for me if fixing it would be too complex

5

@pavle.aleksov

Thanks for your feedback. We have recorded it and will let you know in case we have more updates to share.