Create PNG from SVG with embedded image

Question

I have been struggling for days with this: I have an svg image which shows the colours selected by a site user overlaid on an image of the product. In other words, the svg contains the base image (either as an xlink to a local file (same directory) or as a base64 encoded embedded uri (data:image/png;base64,...).

I want to save this image as a confirmation of what was selected, which can subsequently be emailed to the customer. Since email support for svg is patchy to say the least, I want to convert the image from svg to png. However neither iMagick nor MagickWand does this successfully. They both just render the overlays and ignore the embedded or linked png.

I have tried every variation I can think of, including reading the image from a url or reading imageblob from a file_get_contents result. But the outcome is always the same: no background image.

I have also tried removing all the <![CDATA]>, <style>, <g> and other non-essential information from the svg to make sure that it is not a problem with the svg content. But again the result is the same (without the css styling of course!)

Am I wasting my time? Can iMagick not convert embedded/linked images? Or am I being stupid and missing something obvious?

Here is a sample of the code (which is pretty standard): The svgs are saved to the server when a customer has chosen a colour scheme and look like this (truncated here):

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="400px" height="400px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:rgb(17,178,0);mix-blend-mode: multiply;}
    .st2{fill-rule:evenodd;clip-rule:evenodd;fill:rgb(112,23,145);mix-blend-mode: multiply;}
]]>
</style>
<image style="overflow:visible;" width="400" height="400" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAgAElEQVR4nOy9a6xtWXYe9I0x51r7...
...U5ErkJggg==">
</image>
<path class="st2" d="M40.605,152.484c1.056,0.048,2.112,0...
...38.013,253.708z"/>
<path class="st1" d="M38.733,139.381c0.192...
114.615,234.27z"/>
</svg>

They display perfectly when used as URIs for svg images.

I am trying to convert them to pngs thus:

<?php
$im = new Imagick();
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($svg); //readImage($url) gives same result
$im->setImageResolution(72,72);
$im->resampleImage  (72,72,imagick::FILTER_UNDEFINED,1);
$im->setImageFormat("png"); //png, png24, png32 all give same result
$im->writeImage("../svg/temp.png");
?>
<img src="temp.png">

Same thing (alternatively) with MagickWand:

<?php
$mw = NewMagickWand();
$transparentColor = NewPixelWand();
PixelSetColor($transparentColor, 'transparent');
MagickSetBackgroundColor($mw, $transparentColor);
MagickReadImage($mw, $_SERVER['DOCUMENT_ROOT']."/svg/example.svg");
MagickSetImageBackgroundColor($mw, $transparentColor);
MagickSetImageFormat($mw, 'png32'); // png, png24 and png32 all same result
MagickWriteImage($mw, $_SERVER['DOCUMENT_ROOT']."/svg/temp2.png");

?>
<img src="temp2.png">

Can anyone suggest a means of getting the whole image rather than just the two paths into the png?

Grateful for any suggestions

Many thanks