Page 1 of 1

SVG to PNG makes a black image

Posted: 2014-10-16T03:30:19-07:00
by thany
When I convert an SVG to a PNG, I'm getting a PNG that's completely black.

This is the command line:

Code: Select all

convert -size 296x69 logo.svg output\logo.png
My environment is Windows 7 x64. I'm using ImageMagick-6.8.9-8-Q16-x64-static.

Since I see no way to attach a file (I'm fairly new here), let's paste it in. It's not that big anyway:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="296" height="69" viewBox="0 0 296 69" role="img">
  <title>Mennekes Logo</title>
  <desc>Mennekes Logo without the "Plugs for the world" slogan</desc>
  <style>
    path { fill: #ffffff; }
    .background { fill: #a0132e; }
  </style>
  <rect class="background" x="0" y="0" height="100%" width="100%"></rect>
  <g class="graphic">
    <path d="m20,20,29,0-13.1,14.1,0.2,-7.6-16.1,17.5z"/>
    <path d="m20,49,29,0,0-24-17.1,18.4,0.212-7.57z"/>
  </g>
  <g class="text">
    <path d="m69,49h5.3v-21.8l7.5,21.8h4.5l7.3-21.8v21.8h5.3v-29h-7.4l-7.55,22-7.55-22h-7.4z"/>
    <path d="m103,49h16v-5h-10.5v-7h10v-5h-10v-7h10.5v-5h-16v29z"/>
    <path d="m123,49h5.5v-21.2l12.4,21.2h6.1v-29h-5.5v21.2l-12.4-21.2h-6.1z"/>
    <path d="m151,49h5.5v-21.2l12.4,21.2h6.1v-29h-5.5v21.2l-12.4-21.2h-6.1z"/>
    <path d="m179,49h16v-5h-10.5v-7h10v-5h-10v-7h10.5v-5h-16v29z"/>
    <path d="m199,49h5.4v-12.7l9.1,12.7h6.4l-11.1-14.5l11.1-14.5h-6.4l-9.1,12.7v-12.7h-5.4v29z"/>
    <path d="m222,49h16v-5h-10.5v-7h10v-5h-10v-7h10.5v-5h-16v29z"/>
    <path d="m240,40.4c0,6.1,6.2,8.6,9.3,8.6c4.7,0,9.7-2.9,9.7-8.9c0-6.1-5.4-7.8-7.9-8.6c-3-0.9-5-1.5-5-3.9c0-1.7,1.3-2.8,3.1-2.8c1.5,0,3.1,0.6,3.4,3.1h5.7c-0.3-5.7-5.4-7.9-8.9-7.9c-5.1,0-8.8,3.5-8.8,7.9c0,5.9,4.8,7.2,7.1,8c3.7,1.3,5.7,1.8,5.7,4.7c0,2.1-1.9,3.5-4.1,3.5c-1.7,0-3.7-0.9-4-3.7z"/>
  </g>
  <g class="registered">
    <path d="m269,17c-4.35,0-7.73,3.41-7.73,7.49,0,4.1,3.42,7.49,7.73,7.49,4.15,0,7.27-3.31,7.27-7.51,0-4.1-3.11-7.49-7.27-7.49m-0.0206,1.69c3.34,0,5.9,2.65,5.9,5.8,0,3.22-2.63,5.8-5.9,5.8-3.3,0-5.9-2.62-5.9-5.8,0-3.16,2.54-5.8,5.9-5.8"/>
    <path d="m268,21.5,1.05,0c1.28,0,1.58,0.822,1.58,1.29,0,0.451-0.225,1.32-1.58,1.32h-1.05v-2.62zm-1.63,7.09,1.63,0,0-3.28,0.0238,0,2.35,3.28,1.98,0-2.4-3.17c0.441-0.104,0.943-0.22,1.46-0.707,0.631-0.591,0.846-1.48,0.846-2.05,0-0.986-0.535-1.69-1.04-2.07-0.502-0.393-1.13-0.578-2.15-0.578h-2.7v8.58z"/>
  </g>
</svg>
This SVG works fine in every browser, and opens just fine in Inkscape too. It's hand-made, but I don't believe it has any errors.

Re: SVG to PNG makes a black image

Posted: 2014-10-16T04:11:25-07:00
by dlemstra
It looks like the rsvg (this is the default svg delegate under windows) library does not understand the style classes. If I see the fill color directly in the style attribute of the elements it does work properly.

Re: SVG to PNG makes a black image

Posted: 2014-10-16T04:36:27-07:00
by thany
Does that mean it would work fine on Linux? And/or can it be fixed?
Because it would be really nice to have colours declared in one place, especially in more complex drawings.

/edit
So the answer to my first question is no :)
It doesn't work on linux either (after installing librsvg, as imagemagick appears to require).

Re: SVG to PNG makes a black image

Posted: 2014-10-16T05:07:27-07:00
by snibgo
This SVG seems to convert fine when Inkscape is used as the renderer. (For Windows, install Inkscape and set your PATH to include that directory. Then IM will automatically use Inkscape to render SVG.)