I am using Imagick to convert my SVG to JPG. The SVG is actually a chart generated with FusionCharts library. The image is created but my chart is not properly converted to image. It means the colors are not converted as well as the BARS of the charts. First look how my chart looks like
But when I convert the SVG of this chart using Imagick PHP library it generated the image which looks like
Iam using the following code to convert the SVG to JPG
$svg = $this->_request->getPost('svg');
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>'.$svg;
$im->readImageBlob($svg);
header("Content-Type: image/jpg");
$im->setImageFormat("jpeg");
$im->writeImage($dir.'/'.$id.'.jpg');/*(or .jpg)*/
$im->clear();
$im->destroy();
I am getting SVG at Rendered event of Fusionchart like
myChart.addEventListener( "Rendered", function(evt, args) {
var svg = myChart.ref.getSVGString();
});
And my SVG looks like
<svg style="overflow: hidden; -moz-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="480" version="1.1" height="283"><desc>framework 3.3.1.sr2.19840</desc><defs><clipPath id="B0590631-A9A1-4149-BEF9-2DE5773DC243"><rect transform="matrix(1,0,0,1,0,0)" height="241" width="403" y="15" x="62"></rect></clipPath></defs><g class="red-background-0"><rect fill-opacity="0.6" stroke-width="0" stroke-opacity="0.5" style="" stroke="#545454" fill="#ffffff" ry="0" rx="0" r="0" height="283" width="480" y="0" x="0"></rect></g><g class="red-canvas-6"><rect stroke-linejoin="miter" stroke-opacity="1" stroke-width="1" style="stroke-linejoin: miter;" stroke="#969899" fill="none" ry="0" rx="0" r="0" height="242" width="404" y="14.5" x="61.5"></rect><rect fill-opacity="1" stroke-width="0" style="" stroke="none" fill="#ffffff" ry="0" rx="0" r="0" height="241" width="403" y="15" x="62"></rect></g><g class="red-axisbottom-9"><g class="red-x-axis-bands-12"></g><g class="red-y-axis-bands-18"><rect stroke-width="0" fill-opacity="0" style="" stroke="#000" fill="#d8dcc5" ry="0" rx="0" r="0" height="48.20000000000002" width="403" y="159.6" x="62"></rect><rect stroke-width="0" fill-opacity="0" style="" stroke="#000" fill="#d8dcc5" ry="0" rx="0" r="0" height="48.19999999999999" width="403" y="63.19999999999999" x="62"></rect></g><g class="red-y-axis-bands-24"></g><g class="red-x-axis-lines-14"></g><g class="red-y-axis-lines-20"><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,208.5L465,208.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,160.5L465,160.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,111.5L465,111.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,63.5L465,63.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path></g><g class="red-y-axis-lines-26"></g><g class="red-x-axis-labels-16"><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="112.375" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="112.375" dy="-2">Mar-13</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="213.125" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="213.125" dy="-2">Dec-12</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="313.875" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="313.875" dy="-2">Nov-12</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="414.625" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="414.625" dy="-2">Oct-12</tspan></text></g><g class="red-y-axis-labels-22"><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="256" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="3">$0</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="207.8" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="2.9992187500000114">$300</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="159.6" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="2.9984374999999943">$600</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="111.39999999999998" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="3.0015624999999773">$900</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="63.19999999999999" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="3.0007812499999886">$1.2K</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="14.999999999999972" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="2.9999999999999716">$1.5K</tspan></text></g><g class="red-y-axis-labels-28"></g><g class="red-axis-name-29"><text transform="matrix(0,-1,1,0,17.5,136)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="0" x="0" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="0" dy="8">Millions</tspan></text></g></g><g class="red-dataset-1"><g class="red-shadows-47"><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect></g><g clip-path="url('http://test.hbinsights.com/admin/scorecard/kpipdf/cid/1/dtype/1#B0590631-A9A1-4149-BEF9-2DE5773DC243')" style="" class="red-columns-48"><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect></g></g><g class="red-axistop-10"><g class="red-x-axis-bands-11"></g><g class="red-y-axis-bands-17"></g><g class="red-y-axis-bands-23"></g><g class="red-x-axis-lines-13"></g><g class="red-y-axis-lines-19"></g><g class="red-y-axis-lines-25"></g><g class="red-x-axis-labels-15"></g><g class="red-y-axis-labels-21"></g><g class="red-y-axis-labels-27"></g></g><g style="display: none;" class="red-datalabels-5"><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="254.5" x="112.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="112.5" dy="3">$0.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="220.5" x="213.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="213.5" dy="3">$433.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="219" x="313.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="313.5" dy="3">$449.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="222" x="414.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="414.5" dy="3">$417.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="254.5" x="112.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="112.5" dy="3">$0.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="104" x="213.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="213.5" dy="3">$1024.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="110.5" x="313.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="313.5" dy="3">$912.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="108.5" x="414.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="414.5" dy="3">$1008.0</tspan></text></g><g class="red-hot-2"></g><g class="red-buttons-4"></g><text font-family="Verdana" font-size="9px" fill-opacity="0.5" fill="#000000" stroke="none" text-anchor="start" y="279" x="6" style="text-anchor: start; font-size: 9px; font-family: Verdana; cursor: pointer;"><tspan x="6" dy="-1.3984375">FusionCharts XT Trial</tspan></text></svg>
The above svg on jsfiddle.
Can any body tell and guide me how can I convert my whole chart with all colors and bars to jpg. I have proper checked the SVG. It is same that is creating the chart.
EDITED
After comments of ERIK, I have come to know that Fusionchart render event is not the exact event. Because it is giving SVG that is not complete. So Now I my question is what is the exact even of Fusion Chart that chart has completed its animation?
https://stackoverflow.com/questions/19558094
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian