IMagick renders SVG groups offset. Help!
Posted: 2015-11-22T15:34:45-07:00
Hi all. I've got an app that takes an SVG as input and converts to a PNG as output. I've run into a problem where if the SVG has grouped items using the <g> tag, that content gets rendered way off to the right and down on the SVG.
This only happens using IMagick. If I open the SVG in Illustrator or Inkscape, it looks fine. Here's what the SVG code looks like:
and here's the code I'm using to pull in and render:
Nothing out of the ordinary here. Now, if I remove the <g> tag and leave the image in there, then the SVG renders with no issue. However, I can't control whether the app sends grouped items or not, and IMagick needs to render it no matter what.
Here's the image when it gets rendered to PNG with a <g> tag in the SVG: http://brainboxinteractive.com/bad-svg.png
And here's what is should look like: http://brainboxinteractive.com/what-it- ... k-like.png
I've got inkscape installed on the server as well, so I'm not sure where to start debugging and fixing this issue. Any help would be appreciated!
This only happens using IMagick. If I open the SVG in Illustrator or Inkscape, it looks fine. Here's what the SVG code looks like:
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2400px" height="3200px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="SvgjsG1048" transform="rotate(0 1200 1600) translate(30.927835051559143 41.23711340207863) scale(0.9742268041237008 0.9742268041237009) " x="30.927835051559143" y="41.23711340207863">
<image id="SvgjsImage1049" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="aerosmith.png" width="2400" height="3200"></image>
</g>
</svg>
Code: Select all
// setup the SVG
$svg_front = new Imagick();
$svg_front->setBackgroundColor(new ImagickPixel('transparent'));
$svg_front->readImage($json->imageFront); // pull in the SVG image
// convert the SVG to PNG @ 200 dpi - yes, it works!
$svg_front->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
$svg_front->setImageResolution(200,200);
$svg_front->setImageFormat('png');
// render the SVG
echo $svg_front;
Here's the image when it gets rendered to PNG with a <g> tag in the SVG: http://brainboxinteractive.com/bad-svg.png
And here's what is should look like: http://brainboxinteractive.com/what-it- ... k-like.png
I've got inkscape installed on the server as well, so I'm not sure where to start debugging and fixing this issue. Any help would be appreciated!