John Davidson

Message:

would really appreciate your help!

i'm using the following PHP code to convert SVG file to jpg.
the code works, but the generated image is missing the image elements from the svg.

the code i'm using:

$im = new Imagick();

$im->readImageBlob($svg);

$im->setImageFormat("jpeg");

$im->writeImage($jpg_path);

$im->clear();

$im->destroy();

the svg i'm using to test is:

<svg xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" 

height="500" viewBox="0 0 500 500" xml:space="preserve">

<desc>Created with Fabric.js 4.2.0</desc>

<defs>

</defs>

<g transform="matrix(1 0 0 1 250 250)" id="697fd54a-8a47-479a-95ac-     

3929f83f9c08"  >

<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none;     

stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; 

stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; 

opacity: 1;" vector-effect="non-scaling-stroke"  x="-250" y="-250" 

rx="0" ry="0" width="500" height="500" />

</g>

<g transform="matrix(Infinity NaN NaN Infinity 0 0)" id="cc4d184b- 

b672-4d1a-b6fd-dc7d2a567e07"  >

</g>

<g transform="matrix(3.79 0 0 3.79 217.48 217.48)" id="75e8436a-136b- 

4014-9427-ac7b9b4560b2"  >

<circle style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: 

none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: 

miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: 

nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  cx="0" 

cy="0" r="35" />

</g>

<g transform="matrix(0.14 0 0 0.14 217.62 226.7)" id="396bdad1-f05e- 

423e-9935-e14b2b029a4a"  >

<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; 

stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; 

stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 

1;" vector-effect="non-scaling-stroke"  xlink:href="http://...." 

x="-540" y="-810" width="1080" height="1620"></image>

</g>

<g transform="matrix(1 0 0 1 265.57 421.75)" style="" id="414d0483- 

439e-4020-8816-b41e4d9fb2db"  >

    <text xml:space="preserve" font-family="Raleway" font-size="105" 

font-style="normal" font-weight="900" style="stroke: none; stroke- 

width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke- 

dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: 

rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" > 

<tspan x="-137.76" y="32.98" >Louis</tspan></text>

</g>

</svg>

the result image contain the text, rect and circle elements.
but not the image element.

---

My Answer:
It seems like the issue might be related to the way Imagick handles SVG files with external image references.

One possible solution is to first download the external image and embed it directly into the SVG file before converting it to JPG. Here's an example of how you can modify your code to achieve this:

php
$svg = file_get_contents('your_svg_file.svg');

// Download the external image and embed it into the SVG file
$external_image_url = 'http://....';
$external_image_data = file_get_contents($external_image_url);
$base64_image = 'data:image/jpeg;base64,' . base64_encode($external_image_data);
$svg = str_replace('xlink:href="'.$external_image_url.'"', 'xlink:href="'.$base64_image.'"', $svg);

$im = new Imagick();
$im->readImageBlob($svg);
$im->setImageFormat("jpeg");
$im->writeImage($jpg_path);
$im->clear();
$im->destroy();


This code snippet downloads the external image, encodes it in base64 format, and then replaces the external image reference in the SVG file with the base64-encoded image data. This way, the image will be embedded directly into the SVG file before converting it to JPG.

Give this a try and see if it resolves the issue with missing image elements in the generated JPG file.