Svg to png with incorrect size!

Hi ASPOSE Team and your friends

I use this component for convert svg ‘xml string’ to png image.
when I load svg string and convert it to png image, after save image, the size of png file about 1.33% larger than original svg size (width & height)

before
width: 500px
height: 300px

after
width: 667px
height: 400px

why converted png is larger than svg size?

I use Win7 with VS2015
project type: asp.net mvc
lang: c#


// my code here:

string lineBreak = Environment.NewLine;
var svg = “” + lineBreak +
" " + lineBreak;
var style = “font-family:tahoma;fill:black;direction:ltr;font-size:50;”;
svg += " Thanks ASPOSE Team" + lineBreak;
svg += " " + lineBreak +
“”;

XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(svg);

try
{
byte[] bArray = Encoding.UTF8.GetBytes(svg);
using (MemoryStream xmlStream = new MemoryStream(bArray))
{
using (Aspose.Imaging.FileFormats.Svg.SvgImage img = (Aspose.Imaging.FileFormats.Svg.SvgImage)Aspose.Imaging.Image.Load(xmlStream))
{
Aspose.Imaging.ImageOptions.PngOptions pngOptions = new Aspose.Imaging.ImageOptions.PngOptions();
pngOptions.ResolutionSettings = new Aspose.Imaging.ResolutionSetting(72, 72);

img.Save(@“c:\myPng.png”, pngOptions);
}
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}

Hi,

Thank you for your inquiry and sharing code.

This is to update you that we have investigated the issue at our end. Initial investigation shows that the issue persists. The issue has been logged into our system with ID IMAGINGNET-2253. Our product team will further look into it and provide feedback. We will update you with the feedback in this thread once available.

Hi again

New release (Aspose.Imaging for .NET 17.4) fix IMAGINGNET-2251 and IMAGINGNET-2255 issue.
But it does’nt resolve my issue IMAGINGNET-2253 !
Can you help me?

Hi Amir,

I have verified the issue status from our issue tracking system and like to share that issue resolution is still in progress and it is going to be tentatively resolved in upcoming Aspose.Imaging for .NET 17.6. We will share the good news with you as soon as the issue will be fixed.

Many Thanks,

Hi Aspose Team
Great update!
My issue is fixed but I see new issue!
When I get left and top of text element on the web page and then pass to aspose.imaging, position of text element in converted image is incorrect!
svg file on the browser is OK but on converted png is incorrect position!

svg: x: 13, y: 232
converted png: x: 25, 174

my svg sample here:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1)">
    <g>
      <text style="font-family:Tahoma;fill:rgb(51, 51, 51);direction:ltr;font-size:80px;font-weight:400;font-style:normal;text-decoration:none solid rgb(51, 51, 51);" x="13" y="232" transform="rotate(0 13 232)">Amir</text>
    </g>
  </g>
</svg>

Many Thanks

@amir1234,

Thank you for sharing the feedback. Can you please provide the working sample code, source and generated output for reference that we may use on our end to reproduce the issue.

Many Thanks,

Sure

Position of text element on generated image is wrong!
svg on the browser has good positioning but on the png image has bad position!

svg: x: 13, y: 232
converted png: x: 25, 174

My code here:

string destPath = "position_svg_string_to_Png.png";
 
string lineBreak = Environment.NewLine;
string svg = "<svg width='500' height='300' xmlns='http://www.w3.org/2000/svg'>" + lineBreak +
	" <g transform = 'scale(1)'>" + lineBreak;
string style = "font-family:tahoma;fill:black;direction:ltr;font-size:80;";
svg += " <text style='" + style + "' x='13' y='232' transform='rotate(0 13 232)'>Amir</text>" + lineBreak;
svg += " </g>" + lineBreak +
	"</svg>";
 
byte[] bArray = Encoding.UTF8.GetBytes(svg);
using (MemoryStream xmlStream = new MemoryStream(bArray))
using (SvgImage img = (SvgImage)Image.Load(xmlStream))
{
	PngOptions pngOptions = new PngOptions();
	pngOptions.ResolutionSettings = new ResolutionSetting(72, 72);
	img.Save(destPath, pngOptions);
}

@amir1234,

Thank you for sharing the sample code. As requested earlier can you please also share the source and generated image for investigation on our end.

Many Thanks,

Mudassir Fayyaz

The issues you have found earlier (filed as IMAGINGNET-2253) have been fixed in this update. This message was posted using BugNotificationTool from Downloads module by mudassir.fayyaz

svg code:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1)">
    <g>
      <text style="dominant-baseline:hanging; font-family:Tahoma;fill:rgb(51, 51, 51);direction:ltr;font-size:80px;font-weight:400;font-style:normal;text-decoration:none solid rgb(51, 51, 51);" x="23" y="13" transform="rotate(0 23 13)">Aspose Team</text>
    </g>
  </g>
</svg>

Preview:
svg-on-browser.png (10.6 KB)

Then I convert svg to png by Aspose with these code:

Stream result = new MemoryStream();
using (Aspose.Imaging.FileFormats.Svg.SvgImage img = (Aspose.Imaging.FileFormats.Svg.SvgImage)Aspose.Imaging.Image.Load(@"c:\123.svg"))
{
	Aspose.Imaging.ImageOptions.PngOptions pngOptions = new Aspose.Imaging.ImageOptions.PngOptions();
	pngOptions.ResolutionSettings = new Aspose.Imaging.ResolutionSetting(72, 72);
	img.Save(result, pngOptions);
	img.Save(@"c:\1.png", pngOptions);
}

Converted image:
convert-to-png.png (1.4 KB)

Text element on converted image has bad position.
I think “dominant-baseline:hanging” reject on converting process.
Can you help me?

@amir1234,

I suggest you to please try using following sample code on your end to serve the purpose. Please share your feedback with us if there is still an issue.

public static void TestSVG()
{
    string lineBreak = Environment.NewLine;
    string svg = "<svg width='500' height='300' xmlns='http://www.w3.org/2000/svg'>" + lineBreak +
                            "    <g transform = 'scale(1)'>" + lineBreak;
    string style = "font-family:tahoma;fill:black;direction:ltr;font-size:30;";
    svg += "        <text style='" + style + "' x='100' y='241' transform='rotate(0 191 241)'>Thanks ASPOSE Team</text>" + lineBreak;
    svg += "    </g>" + lineBreak +
                "</svg>";

    String destPath = @"C:\imaging data\test.png";
    byte[] bArray = Encoding.UTF8.GetBytes(svg);
    using (MemoryStream xmlStream = new MemoryStream(bArray))
    using (SvgImage img = (SvgImage)Image.Load(xmlStream))
    {
        PngOptions pngOptions = new PngOptions();
        pngOptions.ResolutionSettings = new ResolutionSetting(72, 72);
        img.Save(destPath, pngOptions);
    }

    using (RasterImage outImage = (RasterImage)Image.Load(destPath))
    {
        Console.WriteLine(outImage.Width);  // 500
        Console.WriteLine(outImage.Height); // 300
    }

}

Many Thanks,

Mudassir Fayyaz

Hi again
I test your solution and attach the result file

svg on web browser:
svg.png (11.9 KB)

converted png file:
png.png (3.8 KB)

svg on browser with “dominant-baseline:hanging”:
dominant.png (32.0 KB)

I think Aspose must be support dominant-baseline for convert svg to png
Because when I change the font family then top and left of text element is changed.
What’s your idea?

Thanks again

@amir1234,

I have observed your comments and have added an issue with ID IMAGINGNET-2430 as enhancement to further investigate the possibility of adding support for dominant-baseline style. This thread has been linked with the issue so that you may be automatically notified once the issue will be fixed.

Many Thanks,

Mudassir Fayyaz

1 Like

This issue exist in Aspose.Imaging
Aspose.Imaging have not relation with Aspose.Words

@amir1234,

Yes, you are right. We have removed the intimation post as well.

Hi
This issue is for 3 years ago and not any solution???

@amir1234,

We are sorry for your inconvenience. Can you please try using following sample code on your end.

string destPath = "fixed_svg_string_to_Png.png"
g_to_Png.png");

string lineBreak = Environment.NewLine;
string svg = "" + lineBreak +
" " + lineBreak;
string style = "font-family:tahoma;fill:black;direction:ltr;font-size:30;";
svg += " Thanks ASPOSE Team" + lineBreak;
svg += " " + lineBreak +
"";

byte[] bArray = Encoding.UTF8.GetBytes(svg);
using (MemoryStream xmlStream = new MemoryStream(bArray))
using (SvgImage img = (SvgImage)Image.Load(xmlStream))
{
PngOptions pngOptions = new PngOptions();
pngOptions.ResolutionSettings = new ResolutionSetting(72, 72);
img.Save(destPath, pngOptions);
}

using (RasterImage outImage = (RasterImage)Image.Load(destPath))
{
Console.WriteLine(outImage.Width); // 500
Console.WriteLine(outImage.Height); // 300
}

Syntax error on your code
Line 2: what’s this? “g_to_Png.png”);"
You don’t use style and standrad format for svg file too.
Error occured on “using (SvgImage img = (SvgImage)Image.Load(xmlStream))” because xmlStream is’nt standrad format.
svg file start by <svg> tag.

@amir1234,

Please try using following example code on your end.

    public static void TestSVG()
    {

        string destPath = "fixed_svg_string_to_Png.png";

        string lineBreak = Environment.NewLine;
        string svg = "" + lineBreak +
        " " + lineBreak;
        string style = "font-family:tahoma;fill:black;direction:ltr;font-size:30;";
        svg += " Thanks ASPOSE Team" + lineBreak;
        svg += " " + lineBreak + "";

        byte[] bArray = Encoding.UTF8.GetBytes(svg);
        using (MemoryStream xmlStream = new MemoryStream(bArray))
        using (SvgImage img = (SvgImage)Image.Load(xmlStream))
        {
            PngOptions pngOptions = new PngOptions();
            pngOptions.ResolutionSettings = new ResolutionSetting(72, 72);
            img.Save(destPath, pngOptions);
        }

        using (RasterImage outImage = (RasterImage)Image.Load(destPath))
        {
            Console.WriteLine(outImage.Width); // 500
            Console.WriteLine(outImage.Height); // 300
        }
    }

Hi
Left position and top position of text with “tahoma” font is correct, but width of text is wrong!

svg on google chrome browser: svg.png (9.3 KB)
converted svg with png format: png.png (4.3 KB)