Aspose.SVG misaligned text with shadows

pavle.aleksov · July 8, 2025, 1:23pm

Hello,

I’m trying to convert an svg to png and some of the text lines seem to be misaligned from their “shadow”:
b.png (93.1 KB)

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

C# code used to generate the svg:

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;

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

SVG that I’m trying to convert to png (sorry I couldn’t find an example smaller than this):

<svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="390" height="390" viewBox="0 0 390 390">
	<desc>Created with Highcharts 9.1.2</desc>
	<defs>
		<clipPath id="highcharts-jkdt8s9-1-">
			<rect x="0" y="0" width="370" height="365" fill="none"/>
		</clipPath>
		<clipPath id="highcharts-jkdt8s9-4-">
			<rect x="10" y="10" width="370" height="365" fill="none"/>
		</clipPath>
	</defs>
	<rect fill="none" class="highcharts-plot-background" x="10" y="10" width="370" height="365"/>
	<g class="highcharts-pane-group" data-z-index="0"/>
	<g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"/>
	<g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"/>
	<rect fill="none" class="highcharts-plot-border" data-z-index="1" x="10" y="10" width="370" height="365"/>
	<g class="highcharts-axis highcharts-xaxis" data-z-index="2">
		<path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 10 375 L 380 375"/>
	</g>
	<g class="highcharts-axis highcharts-yaxis" data-z-index="2">
		<path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 10 10 L 10 375"/>
	</g>
	<g class="highcharts-series-group" data-z-index="3">
		<g class="highcharts-series highcharts-series-0 highcharts-treemap-series highcharts-color-0 highcharts-tracker" data-z-index="0.1" transform="translate(10,10) scale(1 1)" clip-path="url(#highcharts-jkdt8s9-1-)">
			<g class="highcharts-level-group-1" data-z-index="999">
				<rect x="296.5" y="178.5" width="42" height="50" fill="#464198" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="338.5" y="344.5" width="20" height="20" fill="#697991" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="260.5" width="11" height="16" fill="#9393c9" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="345.5" width="11" height="11" fill="#0f6793" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="305.5" width="11" height="13" fill="#506180" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="244.5" width="11" height="16" fill="#00c124" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="291.5" width="11" height="14" fill="#e67e07" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="222.5" width="11" height="22" fill="#f4933b" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="296.5" y="109.5" width="40" height="69" fill="#00bfff" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="356.5" width="11" height="8" fill="#697991" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="338.5" y="178.5" width="31" height="44" fill="#44bbea" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="336.5" y="109.5" width="33" height="69" fill="#b0e9f7" stroke="#e6e6e6" stroke-width="3" class="highcharts-point"/>
				<rect x="358.5" y="276.5" width="11" height="15" fill="rgb(68,187,234)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="338.5" y="273.5" width="20" height="49" fill="rgb(192,205,216)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="296.5" y="277.5" width="42" height="45" fill="rgb(153,168,186)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="369.5" y="345.5" width="0" height="19" fill="rgb(147,147,201)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="358.5" y="332.5" width="11" height="13" fill="rgb(204,97,0)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="338.5" y="322.5" width="20" height="22" fill="rgb(80,97,128)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="217.5" y="210.5" width="79" height="88" fill="rgb(42,42,114)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="217.5" y="109.5" width="79" height="101" fill="rgb(100,226,115)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="217.5" y="-0.5" width="152" height="110" fill="rgb(15,103,147)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="358.5" y="318.5" width="11" height="14" fill="rgb(42,42,114)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="296.5" y="322.5" width="42" height="42" fill="rgb(29,219,56)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="-0.5" y="183.5" width="218" height="181" fill="rgb(70,65,152)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="217.5" y="298.5" width="79" height="66" fill="rgb(192,205,216)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="369.5" y="244.5" width="0" height="101" fill="rgb(0,191,255)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="296.5" y="228.5" width="42" height="49" fill="rgb(247,174,114)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="338.5" y="222.5" width="20" height="51" fill="rgb(153,168,186)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
				<rect x="-0.5" y="-0.5" width="218" height="184" fill="rgb(176,233,247)" stroke="rgb(230,230,230)" stroke-width="3" class="highcharts-point" data-z-index="0"/>
			</g>
		</g>
		<g class="highcharts-markers highcharts-series-0 highcharts-treemap-series highcharts-color-0" data-z-index="0.1" transform="translate(10,10) scale(1 1)"/>
	</g>
	<text x="195" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"/>
	<text x="195" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="24"/>
	<text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color:#666666;fill:#666666;" y="387"/>
	<g class="highcharts-data-labels highcharts-series-0 highcharts-treemap-series highcharts-color-0 highcharts-tracker" data-z-index="6" transform="translate(10,10) scale(1 1)" opacity="1">
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(268,284)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">Some companyy - cmpany<tspan x="5" y="16"></tspan>
				</tspan>Some companyy - cmpany</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(294,193)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_11 - Ssss Vvvvvvvvv (Cccccccc)</title>C_T_…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_11 - Ssss Vvvvvvvvv (Cccccccc)</title>C_T_…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(335,344)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_2 - Ssss Mmm Xxxx (Tttttttttttt)</title>C…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_2 - Ssss Mmm Xxxx (Tttttttttttt)</title>C…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,279)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined highcharts-data-label-hidden" data-z-index="1" transform="translate(295,289)" opacity="0" style="pointer-events:none;">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_6 - Ssss Ttttttt (Tttttttttttt)</title>C_T_…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_6 - Ssss Ttttttt (Tttttttttttt)</title>C_T_…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(14,81)">
			<text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;">
				<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">C_T_R_1 - Ppppp Nnnnnnn (Cccccccc)<tspan x="5" y="16"></tspan>
				</tspan>C_T_R_1 - Ppppp Nnnnnnn (Cccccccc)</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,264)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined highcharts-data-label-hidden" data-z-index="1" transform="translate(344,293)" opacity="0" style="pointer-events:none;">
			<text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;">
				<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,346)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,321)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,307)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,334)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,248)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined highcharts-data-label-hidden" data-z-index="1" transform="translate(359,294)" opacity="0" style="pointer-events:none;">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(293,333)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_7 - Ppppp Mmmmmm (Cccccccc)</title>C_T_…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_7 - Ppppp Mmmmmm (Cccccccc)</title>C_T_…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,229)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(223,135)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">C_T_R_9 -<tspan dy="14" x="5"></tspan>Ppppp Nnnnn<tspan dy="14" x="5"></tspan>(Cccccccc)<tspan x="5" y="16"></tspan>
				</tspan>C_T_R_9 -<tspan dy="14" x="5"></tspan>Ppppp Nnnnn<tspan dy="14" x="5"></tspan>(Cccccccc)</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(294,242)">
			<text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;">
				<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_3 - Ppppp Tttttttt (Tttttttttttt)</title>C_T_…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_3 - Ppppp Tttttttt (Tttttttttttt)</title>C_T_…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(296,133)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_6 - Ppppp Ddddddd (Tttttttttttt)</title>C_T…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_6 - Ppppp Ddddddd (Tttttttttttt)</title>C_T…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(5,263)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">C_T_R_7 - Ppppp Mmmmmmmm (Tttttttttttt)<tspan x="5" y="16"></tspan>
				</tspan>C_T_R_7 - Ppppp Mmmmmmmm (Tttttttttttt)</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(359,356)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(337,190)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_3 - Ppppp Ccccccc (Ttttt)</title>C_…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_3 - Ppppp Ccccccc (Ttttt)</title>C_…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(344,243)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<tspan x="5" y="16"></tspan>
				</tspan>
			</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(333,133)">
			<text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;">
				<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_1 - Hhhhhhhhhhhh (Cccccccc)</title>C_T…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_1 - Hhhhhhhhhhhh (Cccccccc)</title>C_T…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined highcharts-data-label-hidden" data-z-index="1" transform="translate(228,344)" opacity="0" style="pointer-events:none;">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">C_T_R_1 - Ccccccc Aaaaaaa<tspan x="5" y="16"></tspan>
				</tspan>C_T_R_1 - Ccccccc Aaaaaaa</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(218,307)">
			<text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;">
				<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">C_T_R_2 -<tspan dy="14" x="5"></tspan>Ccccccc<tspan dy="14" x="5"></tspan>Hhhhhhhhhhhh<tspan x="5" y="16"></tspan>
				</tspan>C_T_R_2 -<tspan dy="14" x="5"></tspan>Ccccccc<tspan dy="14" x="5"></tspan>Hhhhhhhhhhhh</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(226,37)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">C_T_R_3 - Grppp Grppppp<tspan dy="14" x="5"></tspan>Bbbbbb<tspan x="5" y="16"></tspan>
				</tspan>C_T_R_3 - Grppp Grppppp<tspan dy="14" x="5"></tspan>Bbbbbb</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(216,244)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>C_T_R_1 - Abcdefghijkl (Abcdefghijkl)</title>C_T_R_1 - A…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>C_T_R_1 - Abcdefghijkl (Abcdefghijkl)</title>C_T_R_1 - A…</text>
		</g>
		<g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(335,323)">
			<text x="5" data-z-index="1" y="16" style="color:#FFFFFF;font-size:11px;font-weight:bold;fill:#FFFFFF;">
				<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round" style="">
					<title>Some countryy - cntryy</title>S…<tspan x="5" y="16"></tspan>
				</tspan>
				<title>Some countryy - cntryy</title>S…</text>
		</g>
	</g>
	<g class="highcharts-legend highcharts-no-tooltip" data-z-index="7">
		<rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="8" height="8" visibility="hidden"/>
		<g data-z-index="1">
			<g/>
		</g>
	</g>
	<g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"/>
	<g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"/>
	<g class="highcharts-label highcharts-tooltip highcharts-color-0" style="cursor:default;white-space:nowrap;pointer-events:none;" data-z-index="8" transform="translate(170,-9999)" opacity="0" visibility="hidden">
		<path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 215.5 0.5 C 218.5 0.5 218.5 0.5 218.5 3.5 L 218.5 38.5 C 218.5 41.5 218.5 41.5 215.5 41.5 L 194.5 41.5 L 188.5 47.5 L 182.5 41.5 L 3.5 41.5 C 0.5 41.5 0.5 41.5 0.5 38.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"/>
		<path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 215.5 0.5 C 218.5 0.5 218.5 0.5 218.5 3.5 L 218.5 38.5 C 218.5 41.5 218.5 41.5 215.5 41.5 L 194.5 41.5 L 188.5 47.5 L 182.5 41.5 L 3.5 41.5 C 0.5 41.5 0.5 41.5 0.5 38.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"/>
		<path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 215.5 0.5 C 218.5 0.5 218.5 0.5 218.5 3.5 L 218.5 38.5 C 218.5 41.5 218.5 41.5 215.5 41.5 L 194.5 41.5 L 188.5 47.5 L 182.5 41.5 L 3.5 41.5 C 0.5 41.5 0.5 41.5 0.5 38.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"/>
		<path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 215.5 0.5 C 218.5 0.5 218.5 0.5 218.5 3.5 L 218.5 38.5 C 218.5 41.5 218.5 41.5 215.5 41.5 L 194.5 41.5 L 188.5 47.5 L 182.5 41.5 L 3.5 41.5 C 0.5 41.5 0.5 41.5 0.5 38.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#99a8ba" stroke-width="1"/>
		<text x="8" data-z-index="1" y="18" style="color:#333333;font-size:12px;fill:#333333;">
			<tspan style="font-size: 10px">Cntryy - cntryy</tspan>
			<tspan class="highcharts-br" dy="15" x="8"></tspan>
			<tspan style="fill:#99a8ba">●</tspan> Aaaaa bbbbbb : <tspan style="font-weight:bold;">12,123,123.12 USD</tspan>
			<tspan class="highcharts-br"></tspan>
		</text>
	</g>
	<g class="highcharts-control-points" data-z-index="99" clip-path="url(#highcharts-jkdt8s9-4-)"/>
</svg>

Let me know if you need more info.

Thank you!

Professionalize.Discourse · July 8, 2025, 1:23pm

@pavle.aleksov

Cause

The misalignment of text and its shadow in the SVG to PNG conversion is likely due to how the SVG rendering engine interprets the text outlines and their positioning relative to the text itself. This issue can arise if the text is not properly aligned or if the shadow properties are not correctly applied.

Solution

To resolve this issue, adjust the text alignment and shadow settings in your SVG. Ensure that the text-anchor attribute is set correctly for the text elements, and verify that the shadow properties (such as stroke-width and fill) are applied consistently.

Code

Here’s a modified version of your SVG code snippet that includes adjustments for text alignment:

<text x="195" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24">
    <tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round">Your Title Here</tspan>
</text>

Make sure to replace "Your Title Here" with the actual text you want to display.

Next Steps

Test the modified SVG with the updated text alignment and shadow properties.
If the issue persists, update to the latest version of Aspose.SVG, as newer versions may include improvements in rendering.
If you continue to experience problems, please share the updated SVG code and any specific settings you are using for shadows.

Please let me know if this resolves your issue!

pavle.aleksov · July 8, 2025, 1:31pm

Unfortunately I don’t have the control over the svg since it’s generated by Highcharts. It is however showing correctly in the browser, it’s only after I convert it to png via Aspose.SVG that it doesn’t render all of it correctly

asad.ali · July 10, 2025, 6:14pm

@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-510

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.

aspose.notifier · August 21, 2025, 8:24am

The issues you have found earlier (filed as SVGNET-510) have been fixed in this update. This message was posted using Bugs notification tool by vdeviatov