0

I am using the imagick to convert svg to png. But my svg contain embedded images in it. so while converting it to png does not render the embedded image.

$image = new \Imagick();
try{
    $file_name = uniqid($prefix).".jpeg";
    $image->readImageBlob($raw_svg);
    $image->setImageFormat("png24");
    $image->writeImage("$folder_name/".$file_name);
} catch (ImagickException $ex) {
    echo $ex->getMessage();
}

SVG Data

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" viewBox="0 0 600 400" xml:space="preserve">
<desc>Created with Fabric.js 2.0.0-beta7</desc>
<defs>
</defs>
<rect x="0" y="0" width="600" height="400" fill="#000000"></rect>
    <g transform="translate(300.77 141.27) scale(2.45 2.26)">
        <text xml:space="preserve" font-family="Dollar2" font-size="22" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; white-space: pre;" >
            <tspan x="-117.34" y="6.91" >Back Side</tspan>
        </text>
    </g>
<g transform="translate(289.57 247.98) scale(0.35 0.35)">
    <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANtTyE2NP5d9xZHM0bHtWwv3UYAuCINIplLWR8DS0uSOiTGLf1D2r/s3a8rxSbGLsVX4jt7nWc7JwHa/hqcyfVf6ZPmZ/u79nun+mTHHP6VX+t6lO+PckRyonYcOdqNETPJtLnBs89dwI0s7Y24alIM0g883zrzOP61/GnsT/6p607++djHcyJo6rcpFOQRCyjv8TYAAeI+bBrle9xgAAAABJRU5ErkJggg==" x="-334.5" y="-173.5" style="stroke: rgb(240,240,240); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-opacity: 0; fill-rule: nonzero; opacity: 1;" width="669" height="347"></image>
<rect x="-334.5" y="-173.5" width="669" height="347" style="stroke: rgb(240,240,240); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"/>
</g>
</svg>

SVG Image SS
PNG IMAGE SS

ccprog
  • 20,308
  • 4
  • 27
  • 44
DS9
  • 2,995
  • 4
  • 52
  • 102
  • 1
    let me know if any thing is missing, i have tried to include most of the details. – DS9 Oct 18 '17 at 10:05
  • The image data posted seem to be corrupt. – ccprog Oct 18 '17 at 13:35
  • For security, many SVG delegates will not render `image xlink` tags. See [this answer](https://stackoverflow.com/a/29632564/438117) for tips. – emcconville Oct 19 '17 at 15:15
  • @ccprog Yes, the question box doesn't allowed me to post all raw data because of limit around 30,000 or something. – DS9 Oct 23 '17 at 04:51
  • Doesn't make it easier to find out what is happening. Use a CodePen? Do you have either Inkscape or librsvg intalled in your system? (Both are used as rendering backends by ImageMagick.) – ccprog Oct 23 '17 at 15:25
  • @ccprog here's the url: https://codepen.io/dhavalsisodiya/pen/XewGey – DS9 Oct 24 '17 at 06:45
  • i have (MSVG SVG rw+ ImageMagick's own SVG internal renderer), (SVG SVG rw+ Scalable Vector Graphics (XML 2.9.1)), SVGZ SVG rw+ Compressed Scalable Vector Graphics (XML 2.9.1) – DS9 Oct 24 '17 at 07:09
  • Still not sure. I was working from the assumption the internal renderer was not able to cope with the file. But for me (v6.9.9 on windows) it renders the embeded image (albeit with that faint white outline also shown in you screenshot). Your best bet might nonetheless be to install librsvg which surely is superior to MSVG. – ccprog Oct 24 '17 at 15:41
  • Please can you try with different php versions? What I know is that imagick compiled for php 5.6 can have issues when used with php 7.0, or vice versa. I can give a full answer if this comment helps. – John B. Walugembe Oct 25 '17 at 04:20

1 Answers1

0

Above is get resolved after changing the below: php version: 5.5

apt-get install php5-imagick
apt-get install graphicsmagick-imagemagick-compat
apt-get install imagemagick
apt-get install build-essential checkinstall && apt-get build-dep imagemagick -y

To add custom fonts:
copy all custom font(ttf file) to below location:

/usr/share/fonts/truetype

then

fc-cache -v /usr/share/fonts

DS9
  • 2,995
  • 4
  • 52
  • 102