Export chart as svg

[Slobodan Babic]

Hello.

I was wondering - is there an easier way of exporting chart as standalone svg file?

Currently, I am using something like this:

public exportSVGChart(graph : ChartComponent, fname : string) {

    var source: string = graph.svgObject.outerHTML;

    //add name spaces.

    if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {

      source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');

    }

    if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {

      source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');

    }

    //add xml declaration

    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

    //convert svg source to URI data scheme.

    var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); 

       //export url by some means...

  }

Somehow it seems logical to me that .export method should also accept "SVG" as parameter instead of only accepting "PNG" | "JPG".

Or am I missing something?

Thank you in advance.

[Dharanidharan Dharmasivam]

Hi Slobodan, 

Thanks for using Syncfusion products. 

We have analyzed your query. As of now, we don’t have in build support for exporting chart as svg. So, we have logged feature request for your requirement on “Need to export chart as svg”. This feature will be available in upcoming Essential Studio Volume 1 main release 2018 which is expected to be out in the mid of February, 2018. 

Also we have achieved your requirement as workaround in the button click event. Find the code snippet to achieve this requirement. 

[HTML] 

<input id="chartExport" type="button" value="SVG" /> 

[TS] 

let chart: Chart; 

 

document.getElementById('chartExport').onclick = () => { 

 

    let svgData: string = chart.svgObject.outerHTML; 

    svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + svgData + "</svg>"; 

    let  svgBlob: Blob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"}); 

    let svgUrl: string = URL.createObjectURL(svgBlob); 

    let downloadLink: HTMLAnchorElement = document.createElement('a'); 

    downloadLink.rel='nofollow' href = svgUrl; 

    downloadLink.download = 'chart.svg'; 

    document.body.appendChild(downloadLink); 

    downloadLink.click(); 

    document.body.removeChild(downloadLink); 

 

} 

Sample for reference can be find from below link. 

http://plnkr.co/edit/BYAt4ASqTaa8fcHnaZ6X?p=preview  

Thanks, 

Dharani. 

[Slobodan Babic]

Thank you for the quick response. 

One more question, please: I want to be able to limit exporting the svg to the moment when the animation is complete  (for example, to disable export button until chart is fully drawn). So, are there any chart events I can hook up to achieve that?

Thank you. 

[Durga Gopalakrishnan]

Hi Slobodan, 

We have analyzed your query. Your requirement can be achieved by setting style display property as 'none ' for SVG button on rendering and in animationComplete event you can enable the button by setting display as 'block'. Please find the code snippet below: 

  

[HTML] 

 

<input id="chartExport" type="button" style="display:none" value="SVG" /> 

  

[TS] 

  

animationComplete:(agrs:IAnimationEventArgs)=>{ 

          document.getElementById('chartExport').style.display = "block"; 

 }  

Plunker sample: http://plnkr.co/edit/SsTafQsvEIZBRQjHPOnR?p=preview 

Please let me know, if you have any queries. 

Regards, 

Durga