SVG element to PNG file with C#

Question

I'm trying to convert SVG into a PNG file. My main problem is not the convertion itself (I can do it with few line of code), but is the centering of the SVG element I want to sender into the "window" that get's rendered.

I use SVG engine (https://github.com/vvvv/SVG) and my idea is to get the element I want to render, then reposition it at the origin and then set width and height of the svg document to the width/height of the element. here's the code:

var svgDocument = SvgDocument.Open(filename);
var el =(SvgVisualElement) svgDocument.GetElementById("MyId");

// set in the origin
el.Transforms.Add(new SvgTranslate(-el.Bounds.X, -el.Bounds.Y));

// set doc dimensions
svgDocument.Width = el.Bounds.Width;
svgDocument.Height = el.Bounds.Height;

bitmap.Save("PNGFile", ImageFormat.Png);

Unfortunally it doesn't work that way. Here's an example of svg that doesn't work (it's lenthy, so I cut the relevant parts):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="70.125473"
   height="190.98564"
   id="svg6678"
   version="1.1">
   <g id="MyId">
    <g
       transform="translate(-2375.7448,475.88408)"
       id="Texture:door_single_rocks_gear">
      <path
         id="path9179-8-2-8-71-4-2-7"
         d="..." style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#5b3636;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.53245842;marker:none;enable-background:accumulate" />
      <path
         id="path9179-8-2-8-71-4-6"
         d="..." style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#815656;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.53245842;marker:none;enable-background:accumulate" />
      <path
         id="path4080-5-2"
         d="..."
         style="fill:#866262;fill-opacity:1;stroke:none" />
      <path
         id="path7662-1-1-4-9"
         d="..."
         style="fill:#5b3636;fill-opacity:1;stroke:none" />
      <path
         id="path7662-1-1-4-5-5"
         d="..."
         style="fill:#5b3636;fill-opacity:1;stroke:none" />
    </g>
    <g
       id="Texture:door_single_rocks"
       inkscape:label="#g5299"
       inkscape:export-filename="C:\Users\stefano.liboni\Dropbox\AndroidStudio\AsteroidRage\scenes_source\door_single_rocks.png"
       inkscape:export-xdpi="199.88191"
       inkscape:export-ydpi="199.88191">
      <path style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#5b3636;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
         d="..."
         id="rect4972-3-8-9" />
      <path
         id="rect4972-9"
         d="..." style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#815656;fill-opacity:1;fill-rule:nonzero;stroke:#5b3636;stroke-width:1.0026859;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" />
      <path
         style="fill:#5b3636;fill-opacity:1;stroke:none"
         d="..."
         id="path7662-1-1-4-5-5-0" />
      <path
         style="fill:#5b3636;fill-opacity:1;stroke:none"
         d="..."
         id="path7662-1-1-4-5-5-03-9" />
      <path
         style="fill:#5b3636;fill-opacity:1;stroke:none"
         d="..."
         id="path7662-1-1-4-5-5-03" />
    </g>
    <g
       id="AnimatedTexture:door_single_rocks_led"
       inkscape:label="#g5295">
      <path
         id="path9095-7"
         d="..."
         style="fill:#9486ff;fill-opacity:1;stroke:#000000;stroke-width:1.07693017;stroke-opacity:1" />
      <path
         id="path9095-7-5-1"
         d="..."
         style="fill:#9486ff;fill-opacity:1;stroke:#000000;stroke-width:1.07693017;stroke-opacity:1" />
    </g>
  </g>
</svg>

As you can see there is a g element MyId full of other g elements and some paths. I add an image of it rendered in inkscape.

Once I get the bounds of the element (which is the one at the bottom left) in my code I get: {X = -1502.69763 Y = 668.7914 Width = 2514.11938 Height = 870.0564}

It seems wrong since the element is just 141px of width and 395px of height... If I run the code on that file the output is:

So the PNG has a lot of unused space, both y, width and height of the png are wrong. The right ones would be:

svgDocument.X = 0;
svgDocument.Y = -476;
svgDocument.Width = 141;
svgDocument.Height = 395;

Any idea of what I'm doing wrong?

Note: I know that inkscape would do it right (I used to use it), but there's a bug since at least 3years that they don't bother to solve that prevents inkscape to run in silent mode if you specify "verb" in the command line. So uning it is a pain because for every file it opens the UI and takes 3-4secs to do it...

Answer 1

pushed by the comment of ccprog I found out that the UI was openend by inkscape because I was doing also other stuff in the same command I run.

Actually running inkscape as:

MyFile.svg --export-id=ElementIdToRender --export-id-only --export-dpi=200 --export-png="TargetFile"

Does the job.

Still to understand why the SVG library gives strange numbers as Bounds for g elements containing one or more children with transform attribute set, but at the moment I can go on. Tnx

Answer 2

I have not found if there is a documentation for the library. I've looked around in the source, but mainly what I can explain is the SVG part of things. Maybe there are simpler ways the engine provides itself.

transform attributes on the root svg element are legitimate, but in the context of what you want to accomplish, they are more confusing than helpfull, since there are other attributes that result in transformations, but are written in a different form.

An <svg> element provides attributes that match what you want to accomplish much more directly:

• x and y attributes on an outermost svg element are ignored.

• width and height describe the output dimensions the image is rendered into. So they should reflect the final "window" dimensions. If the SVG initially has dimensions not fitting your "window", change them.

• viewBox describes which part of the internal SVG viewport (the coordinate system of the root element) should be rendered. This not what the SVGVisualElement.Bounds struct for a selected element returns. (Values relative to the coordinate system of the element itself, but excluding all parent element transformations) I can't find any function in the library that would get you the values you need.

• preserveAspectRatio describes how the rendered part is fit into the output window. For example, XMidYMid meet, which is the default, means: Size the viewBox area with the maximum size so that it just fits into the width/height without overflowing in any direction, and position it in the center.

While I don't know how to get the needed values of the bounding box from the library, other programs deliver them without problem:

• inkscape -I MyID in the command line
• in the browser via Javascript document.getElementById("MyId").getBBox()