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

Question

I've got SVG HTML code generated by svg.js library. Using PHP's Imagick I want to convert SVG HTML to 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 is what I get. Picture on the left (taken from browser) is a desired state. Magick's not happening :)

I have tried simplier SVG HTML code and it worked. Is there anything wrong with the generated SVG HTML code? I've validated the generated SVG and no errors where found.

Thanks a lot in advance.

Answer 1

By far the best way to export svg is to use the Inkscape executable. We have been using it in production for the past five years and it is rock solid. On a mac we approach Inkscape like this to export a png:

/Applications/Inkscape.app/Contents/Resources/script filename.svg --export-png=filename.png

We have tested a lot of svg parsers and none of them did so well as Inkscape. Together with the svg export plugin for svg.js it works brilliantly.