javascript - Unable to get correct image when converting SVG to PNG using Imagick -

i've got svg html code generated svg.js library. using php's imagick want convert svg html png.

php:

$svg = '<?xml version="1.0" encoding="utf-8" standalone="no"?><svg id="svgjssvg2552" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="svgjsg2676"><g id="svgjsg2554"><g id="svgjsg2555"><g id="svgjsg2556"><g id="svgjsg2557"><path id="svgjspath2558" d="m665 100l665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path><path id="svgjspath2559" d="m715 100l715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path></g><g id="svgjsg2560"><path id="svgjspath2561" d="m565 85l565 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="svgjspath2562" d="m615 85l615 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g></g><g id="svgjsg2563"><g id="svgjsg2564" transform="rotate(210 640 429.5)"><path id="svgjspath2565" d="m665 100l665 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path><path id="svgjspath2566" d="m715 100l715 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path></g><g id="svgjsg2567" transform="rotate(210 640 429.5)"><path id="svgjspath2568" d="m565 85l565 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="svgjspath2569" d="m615 85l615 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g><g id="svgjsg2570"><g id="svgjsg2571"><path id="svgjspath2572" d="m565 176.7947235107422q565.4104614257812 408.6929016113281 448.6954650878906 610.8491821289062 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="svgjspath2573" d="m615 167.0881805419922a200 200 0 0 0 665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g><g id="svgjsg2574"><path id="svgjspath2575" d="m578.5992431640625 685.8491821289062q715.380615234375 448.93695068359375 715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="svgjspath2576" d="m530.4447021484375 669.2553100585938a200 200 0 0 0 487.1434631347656 644.2553100585938 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g></g><g id="svgjsg2577"><g id="svgjsg2578" transform="translate(540 25)"><g id="svgjsg2579"><rect id="svgjsrect2580" width="200" height="15" fill="none" stroke-width="0"></rect><text id="svgjstext2581" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2582" dy="0.9em" x="100">1</tspan></text></g><g id="svgjsg2583" transform="translate(0 15)"><g id="svgjsg2584"><rect id="svgjsrect2585" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2586" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2587" dy="0.9em" x="100">352</tspan></text></g></g><g id="svgjsg2588" transform="translate(0 30)"><g id="svgjsg2589"><rect id="svgjsrect2590" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2591" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2592" dy="0.9em" x="50">251</tspan></text></g></g><g id="svgjsg2593" transform="translate(0 45)"><g id="svgjsg2594"><g id="svgjsg2595"><rect id="svgjsrect2596" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2597" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2598" dy="0.9em" x="25">250</tspan></text></g></g><g id="svgjsg2599" transform="translate(50 0)"><g id="svgjsg2600"><rect id="svgjsrect2601" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2602" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2603" dy="0.9em" x="25">1</tspan></text></g></g></g><g id="svgjsg2604" transform="translate(100 30)"><g id="svgjsg2605"><rect id="svgjsrect2606" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2607" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2608" dy="0.9em" x="50">101</tspan></text></g></g><g id="svgjsg2609" transform="translate(100 45)"><g id="svgjsg2610"><g id="svgjsg2611"><rect id="svgjsrect2612" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2613" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2614" dy="0.9em" x="25">1</tspan></text></g></g><g id="svgjsg2615" transform="translate(50 0)"><g id="svgjsg2616"><rect id="svgjsrect2617" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2618" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2619" dy="0.9em" x="25">100</tspan></text></g></g></g><g id="svgjsg2620" transform="translate(0 60)"><polygon id="svgjspolygon2621" points="0,0 50,15 100,0" fill="#000000" stroke="#" stroke-width="0.1"></polygon></g><g id="svgjsg2622" transform="translate(100 60)"><polygon id="svgjspolygon2623" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="svgjsg2624" transform="translate(0 75)"></g></g><g id="svgjsg2627" transform="rotate(210 640 429.5) translate(540 25)"><g id="svgjsg2628"><rect id="svgjsrect2629" width="200" height="15" fill="none" stroke-width="0"></rect><text id="svgjstext2630" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="svgjstspan2631" dy="0.9em" x="100">2</tspan></text></g><g id="svgjsg2632" transform="translate(0 15)"><g id="svgjsg2633"><rect id="svgjsrect2634" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2635" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="svgjstspan2636" dy="0.9em" x="100">396</tspan></text></g></g><g id="svgjsg2637" transform="translate(0 30)"><g id="svgjsg2638"><rect id="svgjsrect2639" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2640" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="svgjstspan2641" dy="0.9em" x="50">123</tspan></text></g></g><g id="svgjsg2642" transform="translate(0 45)"><g id="svgjsg2643"><g id="svgjsg2644"><rect id="svgjsrect2645" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2646" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2647" dy="0.9em" x="25">100</tspan></text></g></g><g id="svgjsg2648" transform="translate(50 0)"><g id="svgjsg2649"><rect id="svgjsrect2650" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2651" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2652" dy="0.9em" x="25">23</tspan></text></g></g></g><g id="svgjsg2653" transform="translate(100 30)"><g id="svgjsg2654"><rect id="svgjsrect2655" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2656" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="svgjstspan2657" dy="0.9em" x="50">273</tspan></text></g></g><g id="svgjsg2658" transform="translate(100 45)"><g id="svgjsg2659"><g id="svgjsg2660"><rect id="svgjsrect2661" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2662" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2663" dy="0.9em" x="25">23</tspan></text></g></g><g id="svgjsg2664" transform="translate(50 0)"><g id="svgjsg2665"><rect id="svgjsrect2666" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2667" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2668" dy="0.9em" x="25">250</tspan></text></g></g></g><g id="svgjsg2669" transform="translate(0 60)"><polygon id="svgjspolygon2670" points="0,0 50,15 100,0" fill="#000000" stroke="#a80fa8" stroke-width="0.1"></polygon></g><g id="svgjsg2671" transform="translate(100 60)"><polygon id="svgjspolygon2672" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="svgjsg2673" transform="translate(0 75)"></g></g></g></g></g><g id="svgjsg2677" transform="rotate(120 1195 47.5) translate(1180 10)"><polygon id="svgjspolygon2678" points="15,0 7.5,15 22.5,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon><ellipse id="svgjsellipse2679" rx="15" ry="15" cx="15" cy="45" fill="none" stroke="#000000" stroke-width="1"></ellipse><path id="svgjspath2680" d="m15 15l15 75 " stroke="#000000" stroke-width="1"></path></g></svg>';     $imagick = new \imagick();     $imagick->readimageblob($svg);     $imagick->setimageformat('png32');     $imagick->writeimage(www_dir . '/files/12.png');     $imagick->clear();     $imagick->destroy(); 

svg:

<svg id="svgjssvg2552" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="svgjsg2676"><g id="svgjsg2554"><g id="svgjsg2555"><g id="svgjsg2556"><g id="svgjsg2557"><path id="svgjspath2558" d="m665 100l665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path><path id="svgjspath2559" d="m715 100l715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path></g><g id="svgjsg2560"><path id="svgjspath2561" d="m565 85l565 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="svgjspath2562" d="m615 85l615 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g></g><g id="svgjsg2563"><g id="svgjsg2564" transform="rotate(210 640 429.5)"><path id="svgjspath2565" d="m665 100l665 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path><path id="svgjspath2566" d="m715 100l715 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path></g><g id="svgjsg2567" transform="rotate(210 640 429.5)"><path id="svgjspath2568" d="m565 85l565 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="svgjspath2569" d="m615 85l615 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g><g id="svgjsg2570"><g id="svgjsg2571"><path id="svgjspath2572" d="m565 176.7947235107422q565.4104614257812 408.6929016113281 448.6954650878906 610.8491821289062 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="svgjspath2573" d="m615 167.0881805419922a200 200 0 0 0 665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g><g id="svgjsg2574"><path id="svgjspath2575" d="m578.5992431640625 685.8491821289062q715.380615234375 448.93695068359375 715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="svgjspath2576" d="m530.4447021484375 669.2553100585938a200 200 0 0 0 487.1434631347656 644.2553100585938 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g></g><g id="svgjsg2577"><g id="svgjsg2578" transform="translate(540 25)"><g id="svgjsg2579"><rect id="svgjsrect2580" width="200" height="15" fill="none" stroke-width="0"></rect><text id="svgjstext2581" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2582" dy="0.9em" x="100">1</tspan></text></g><g id="svgjsg2583" transform="translate(0 15)"><g id="svgjsg2584"><rect id="svgjsrect2585" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2586" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2587" dy="0.9em" x="100">352</tspan></text></g></g><g id="svgjsg2588" transform="translate(0 30)"><g id="svgjsg2589"><rect id="svgjsrect2590" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2591" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2592" dy="0.9em" x="50">251</tspan></text></g></g><g id="svgjsg2593" transform="translate(0 45)"><g id="svgjsg2594"><g id="svgjsg2595"><rect id="svgjsrect2596" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2597" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2598" dy="0.9em" x="25">250</tspan></text></g></g><g id="svgjsg2599" transform="translate(50 0)"><g id="svgjsg2600"><rect id="svgjsrect2601" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2602" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2603" dy="0.9em" x="25">1</tspan></text></g></g></g><g id="svgjsg2604" transform="translate(100 30)"><g id="svgjsg2605"><rect id="svgjsrect2606" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2607" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2608" dy="0.9em" x="50">101</tspan></text></g></g><g id="svgjsg2609" transform="translate(100 45)"><g id="svgjsg2610"><g id="svgjsg2611"><rect id="svgjsrect2612" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2613" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2614" dy="0.9em" x="25">1</tspan></text></g></g><g id="svgjsg2615" transform="translate(50 0)"><g id="svgjsg2616"><rect id="svgjsrect2617" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2618" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="svgjstspan2619" dy="0.9em" x="25">100</tspan></text></g></g></g><g id="svgjsg2620" transform="translate(0 60)"><polygon id="svgjspolygon2621" points="0,0 50,15 100,0" fill="#000000" stroke="#" stroke-width="0.1"></polygon></g><g id="svgjsg2622" transform="translate(100 60)"><polygon id="svgjspolygon2623" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="svgjsg2624" transform="translate(0 75)"></g></g><g id="svgjsg2627" transform="rotate(210 640 429.5) translate(540 25)"><g id="svgjsg2628"><rect id="svgjsrect2629" width="200" height="15" fill="none" stroke-width="0"></rect><text id="svgjstext2630" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="svgjstspan2631" dy="0.9em" x="100">2</tspan></text></g><g id="svgjsg2632" transform="translate(0 15)"><g id="svgjsg2633"><rect id="svgjsrect2634" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2635" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="svgjstspan2636" dy="0.9em" x="100">396</tspan></text></g></g><g id="svgjsg2637" transform="translate(0 30)"><g id="svgjsg2638"><rect id="svgjsrect2639" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2640" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="svgjstspan2641" dy="0.9em" x="50">123</tspan></text></g></g><g id="svgjsg2642" transform="translate(0 45)"><g id="svgjsg2643"><g id="svgjsg2644"><rect id="svgjsrect2645" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2646" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2647" dy="0.9em" x="25">100</tspan></text></g></g><g id="svgjsg2648" transform="translate(50 0)"><g id="svgjsg2649"><rect id="svgjsrect2650" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2651" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2652" dy="0.9em" x="25">23</tspan></text></g></g></g><g id="svgjsg2653" transform="translate(100 30)"><g id="svgjsg2654"><rect id="svgjsrect2655" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2656" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="svgjstspan2657" dy="0.9em" x="50">273</tspan></text></g></g><g id="svgjsg2658" transform="translate(100 45)"><g id="svgjsg2659"><g id="svgjsg2660"><rect id="svgjsrect2661" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2662" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2663" dy="0.9em" x="25">23</tspan></text></g></g><g id="svgjsg2664" transform="translate(50 0)"><g id="svgjsg2665"><rect id="svgjsrect2666" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="svgjstext2667" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="svgjstspan2668" dy="0.9em" x="25">250</tspan></text></g></g></g><g id="svgjsg2669" transform="translate(0 60)"><polygon id="svgjspolygon2670" points="0,0 50,15 100,0" fill="#000000" stroke="#a80fa8" stroke-width="0.1"></polygon></g><g id="svgjsg2671" transform="translate(100 60)"><polygon id="svgjspolygon2672" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="svgjsg2673" transform="translate(0 75)"></g></g></g></g></g><g id="svgjsg2677" transform="rotate(120 1195 47.5) translate(1180 10)"><polygon id="svgjspolygon2678" points="15,0 7.5,15 22.5,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon><ellipse id="svgjsellipse2679" rx="15" ry="15" cx="15" cy="45" fill="none" stroke="#000000" stroke-width="1"></ellipse><path id="svgjspath2680" d="m15 15l15 75 " stroke="#000000" stroke-width="1"></path></g></svg> 

this get. picture on left (taken browser) desired state. magick's not happening :)

i have tried simplier svg html code , worked. there wrong generated svg html code? i've validated generated svg , no errors found.

thanks lot in advance.

by far best way export svg use inkscape executable. have been using in production past 5 years , rock solid. on mac approach inkscape export png:

/applications/inkscape.app/contents/resources/script filename.svg --export-png=filename.png 

we have tested lot of svg parsers , none of them did inkscape. svg export plugin svg.js works brilliantly.