How do I set the DPI for generated images?

May 2, 2013 at 12:32 AM
Hi

I am generating png images from svg.
The problem is that the images are blurry and not the best quality.
I would just like to increase the DPI of the generated image (without decreasing the size of the image obviously).

My basic test code is as follows:
string filePath = MapPath("chart.svg");
var sampleDoc = SvgDocument.Open(filePath);
sampleDoc.Draw().Save(MapPath("output/chart.png"));
I have tried setting the PPI for the document before doing the Draw but that seemed to have no effect.

Is anyone able to point me in the right direction?

Thanks
Oct 1, 2013 at 8:50 PM
Hey,

I've been looking into this same issue recently. Did you have any luck in figuring this out?
Oct 2, 2013 at 12:05 AM
Hi Stuart

No I didn't manage to get it working using the SVG rendering engine.

For various reasons I ended up using a third party tool called AbcPdf.
I wanted to export various reports made up of HTML and SVG to PDF files and AbcPdf did the trick.

I think AbcPdf uses SVG Rendering Engine under the covers anyway so their must be some way to get it to behave.

I did have some troubles with AbcPdf.
If you do end up using it you will need to do things like.
  • Set the rendering engine from the default to EngineType.Gecko otherwise SVG won't be exported.
  • Set the "DotsPerInch" for the document
  • Flatten each page of the document.
There is help online about how to do all that and the support is quite good.
Feb 26, 2015 at 11:26 AM
actually you CAN, but maybe its a bit of a workaround.

what i discovered was that in my original SVGs i had a resolution set. what i then did, was manipulate the SVG before converting.

so in my case the start of a saved SVG file would therefore chage from:
<?xml version="1.0" encoding="UTF-8"?><svg version="1.2" baseProfil="full" width="1011px" height="638px" viewBox="0 0 1011 638" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="1011" height="638" fill="#FFFFFF"/>
  <g>
to:
<?xml version="1.0" encoding="UTF-8"?><svg version="1.2" baseProfil="full" width="4044px" height="2552px" viewBox="0 0 4044 2552" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="4044" height="2552" fill="#FFFFFF"/>
  <g transform="scale(4.0, 4.0)">
what i did after that was change the source code in SvgDocument.cs in the Draw() method. I added an overload taking 2 floats for setting the DPI;

my final code then looks like this:
SvgDocument document = SvgDocument.Open(@"C:\TEMP\svgs\example.svg");
document.Ppi = 1200;
var bitmap = document.Draw(1200, 1200);
var png = ImageFormat.Png;
bitmap.Save(@"C:\TEMP\svgs\example.png", png);
my Draw method in SvgDocument.cs looks like this:
public virtual Bitmap Draw(float? dpiX, float? dpiY)
        {
            //Trace.TraceInformation("Begin Render");

            var size = GetDimensions();
            var bitmap = new Bitmap((int)Math.Ceiling(size.Width), (int)Math.Ceiling(size.Height));

            if (dpiX != null && dpiY != null)
                bitmap.SetResolution(dpiX.Value, dpiY.Value);

            try
            {
                using (var renderer = SvgRenderer.FromImage(bitmap))
                {
                    renderer.TextRenderingHint = TextRenderingHint.AntiAlias;
                    renderer.TextContrast = 1;
                    renderer.PixelOffsetMode = PixelOffsetMode.Half;
                    this.Render(renderer);
                    renderer.Save();
                }
            }
            catch
            {
                bitmap.Dispose();
                throw;
            }

            //Trace.TraceInformation("End Render");
            return bitmap;
        }
hope this helps somebody