CODEWITHSUNDEEP
phpimagesvgimagemagickpng
Michael Walter
Michael Walter

Reputation: 1477

PHP: SVG to PNG conversion results in wrong image

I have an SVG image which is generated by a wordpress plugin. I want to convert it to PNG for further actions.

The plugin can do this successfully via JS. The Result is this image: enter image description here

When I use imagick to convert the SVG to png, I get this as a result: enter image description here

The SVG code looks like this:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" data-zoom="11.81102361" height="290" width="210" data-main="1">
<svg y="62" x="17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="none" width="178" height="133"><g><image x="0" y="0" width="178" preserveAspectRatio="none" height="133" xlink:href="[BASE64 IMAGE CODE]"/></g></svg>
</svg>

Full version here: https://pastebin.com/vzn7BP2d

I am using this code for the conversion:

$svg = file_get_contents('front-test.svg');

$im = new Imagick();
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->setResolution(300, 300); // for 300 DPI example
$im->readImageBlob('<?xml version="1.0" encoding="UTF-8" standalone="no"?>'.$svg);

$im->setImageFormat("png24");
//$im->resizeImage(250, 250, imagick::FILTER_LANCZOS, 1);

$im->writeImage('front-test.png');
$im->clear();
$im->destroy();

Does anyone know why this is happening and how I can solve this? It is neccessary that the image is positioned correctly on the "canvas" because it is a print template for t-shirts and needs be exact.

Upvotes: 0

Views: 1964

Answers (2)

Michael Walter
Michael Walter

Reputation: 1477

Thanks to fmw42 for giving suggestions about different renderers. After some research for this issue, I found that even imagemagick recommends to use another renderer and closed this issue with won't fix:

We recommend the libRSVG delegate library or inkscape delegate program as the preferred SVG renderer. The internal renderer is less robust and likely will never support all of the SVG standard.

Source: https://github.com/ImageMagick/ImageMagick/issues/335

To solve this, I tried different online converters to see, if they also have this problem. Most of them gave me just an empty canvas, others had the same outcome as my 2nd picture in my question.

I stopped searching for converters after I found https://convertio.co/de/ They are able to give me the correct output image. They have an API which can be used for 25 conversion minutes for free daily: https://developers.convertio.co/

This was the only soultion for my case, since I wanted the project to be flexible, since some users may won't be able to install inkscape on their server.

Upvotes: 1

ccprog
ccprog

Reputation: 21811

The SVG file you have is not really a vector image. It is only a PNG wrapped in a SVG. That makes it trivial to get the image: read the data url that makes up the image, decode it and write the result to a file. No ImageMagick required, only gd.

$svg = simplexml_load_file('front-test.svg');
$data_url = $svg->svg->g->image['xlink:href'];
$encoded = $data_url.explode(',')[1];
$data = base64_decode($encoded);
$im = imagecreatefromstring($data);
imagepng($im, 'front-test.png');

Upvotes: 1

Related Questions