i converting svg graph png image in php, imagemagick. of convertion works elements (ex. shadow) missing , render of text ugly...
the svg rendered chrome :
the svg converted imagemagick in png
i first added modules php :
sudo apt-get install php5-imagick sudo apt-get install libmagickcore-6.q16-2-extra maybe, there better libmagickcore-6.q16-2-extra ?
and in 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 can see tried many things failed :-(
here full big (sorry) code of 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>
a number of thoughts...
density/resolution
if want set resolution/density, need set before load image, i.e. before imagemagick rasterises vectors bitmap. afterwards late. so,
convert -density 288 image.svg image.png will work, whereas not
convert image.svg -density 288 image.png same in php, with:
$imagick = new imagick(); $imagick->setimageresolution(288,288); $imagick->readimageblob(); inkscape fonts
i don't think imagemagick going understand inkscape fonts, may advised change editing svg file (maybe on fly), or set fallback font before load svg:
convert -density 288 -font fallback image.svg image.png shadows
not sure going on shadows, check delegate imagemagick using , see if can use rsvg 1 better job.
identify -list delegate | grep svg 
Comments
Post a Comment