Very bad SVG to PNG convertion in PHP

I am converting a SVG graph to an PNG image in PHP, with ImageMagick. Most of the convertion works but some elements (ex. shadow) are missing and the render of the text is ugly...

The SVG rendered by Chrome :

The SVG converted by ImageMagick in PNG

I first added modules to PHP :

sudo apt-get install php5-imagick
sudo apt-get install libmagickcore-6.q16-2-extra

Maybe, there is something better than libmagickcore-6.q16-2-extra ?

And in my PHP file :

$image = new Imagick();
$svg2 = file_get_contents('roue1.svg');
$image->readImageBlob('<?xml version="1.0" encoding="UTF-8" standalone="no"?>' . $svg2);
//$image->setImageFormat("png24");
$image->setImageFormat("png");
//$image->resampleimage($width * 10, $height * 10, imagick::FILTER_LANCZOS, 1);
//$image->setresolution($width * 10, $height * 10);
//$image->setimageresolution($width * 10, $height * 10);
//$image->resampleimage($width, $height, imagick::FILTER_LANCZOS, 1);
$image->resizeImage($width, $height, imagick::FILTER_LANCZOS, 1);
$output = $image->getimageblob();
header("Content-type: image/png");
echo $output;

As you can see I tried many things but all failed :-(

Here is the full big (sorry) code of my SVG :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <filter id="b" color-interpolation-filters="sRGB">
      <feFlood flood-opacity=".5" flood-color="#000" result="flood"/>
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feOffset dx="4" dy="4" result="offset"/>
      <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
    </filter>
    <filter id="a" color-interpolation-filters="sRGB">
      <feFlood flood-opacity=".5" flood-color="#000" result="flood"/>
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feOffset dx="4" dy="4" result="offset"/>
      <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
    </filter>
    <filter id="c" color-interpolation-filters="sRGB">
      <feFlood flood-opacity=".5" flood-color="#000" result="flood"/>
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feOffset dx="4" dy="4" result="offset"/>
      <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
    </filter>
    <filter id="d" color-interpolation-filters="sRGB">
      <feFlood flood-opacity=".5" flood-color="#000" result="flood"/>
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feOffset dx="4" dy="4" result="offset"/>
      <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="100" fill="#ccc"/>
  <g fill="#fff" fill-rule="evenodd">
    <path d="M94.286 5.714h11.43v188.57h-11.43z"/>
    <path d="M194.286 94.286v11.43H5.716v-11.43zM85.714 185.714L100 200l14.286-14.286H85.714zM85.714 14.286L100 0l14.286 14.286H85.714z"/>
    <path d="M14.286 114.286L0 100l14.286-14.286v28.572zM185.714 114.286L200 100l-14.286-14.286v28.572z"/>
  </g>
  <g font-weight="bold" font-size="100" font-family="Calibri" letter-spacing="0" word-spacing="0" fill="#fff">
    <text style="line-height:125%;-inkscape-font-specification:'Calibri Bold'" x="56.338" y="273.877" opacity=".5" filter="url(#a)" transform="translate(0 -85.714) scale(.57143)">
      <tspan x="56.338" y="273.877">d</tspan>
    </text>
    <text style="line-height:125%;-inkscape-font-specification:'Calibri Bold'" x="253.506" y="274.707" opacity=".5" filter="url(#b)" transform="translate(0 -85.714) scale(.57143)">
      <tspan x="253.506" y="274.707">i</tspan>
    </text>
    <text style="line-height:125%;-inkscape-font-specification:'Sans Bold'" x="246.436" y="423.877" opacity=".5" filter="url(#c)" transform="translate(0 -85.714) scale(.57143)">
      <tspan x="246.436" y="423.877">s</tspan>
    </text>
    <text style="line-height:125%;-inkscape-font-specification:'Sans Bold'" x="60.484" y="423.926" opacity=".5" filter="url(#d)" transform="translate(0 -85.714) scale(.57143)">
      <tspan x="60.484" y="423.926">c</tspan>
    </text>
  </g>
  <path fill="#0074d9" fill-rule="evenodd" d="M85 100h15v15H85z"/>
  <path fill="#2ecc40" fill-rule="evenodd" d="M100 100h25v25h-25z"/>
  <path fill="#ffdc00" fill-rule="evenodd" d="M100 65h35v35h-35z"/>
  <path fill="#ff4136" fill-rule="evenodd" d="M55 55h45v45H55z"/>
  <path d="M55 55l80 10-10 60-40-10z" opacity=".5" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="2"/>
  <rect width="55" height="20" x="143" y="177" ry="5.227" fill="#fff" stroke="#000" stroke-width="1.022"/>
  <path fill="#fff" fill-rule="evenodd" stroke="#000" stroke-width=".587" d="M148 182h10v10h-10z"/>
  <text style="line-height:125%;-inkscape-font-specification:'Sans Bold'" x="161" y="189.899" font-weight="bold" font-size="9" font-family="Verdana" letter-spacing="0" word-spacing="0">
    <tspan x="161.38" y="189.899" font-size="8">Adapté</tspan>
  </text>
</svg>

Very bad SVG to PNG convertion in PHP

1 Answers