While renderer as SVG the SaveAsImage png file can't use

[KinkiWu]

One-line summary [问题简述]

when we use renderer:'svg' to init the echart as following
echarts.init(element[0],theme,{renderer: 'svg'});
the SaveAsImage echart.png file can't use.

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 4.02
• Browser version [浏览器类型和版本]: Chrome 63.0.3239.132
• OS Version [操作系统类型和版本]: Win10

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {

}

Other comments [其他信息]

[Ovilia]

Currently, only SVG file can be saved (with toolbox, set type to be svg) when rendering in SVG. We will improve it later to save as png.

[KinkiWu]

@Ovilia Yes, now if I manually change the file extenstion from png to svg, the image file can open and view normally. @Ovilia Thanks for your help.

[vlakam]

When i set renderer to svg and use saveAsImage tool the resulting SVG goes like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" style="position: absolute; left: 0px; top: 0px;" width="520" height="620"><path d="M 52 470.5 L 400 470.5" fill="none" stroke="

Which is totally invalid

[davidpham87]

Any update on this issue? :-)

[sswaroopk]

Have the same issue as commented by @vlakam , Got my exported svg as
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="1366" height="562" style="user-select: none; position: absolute; left: 0px; top: 0px;"><path d="M 683 140.5 L 683 84.3 A 196.7 196.7 0 0 1 827.0271 147.0333 L 785.8765 185.3095 A 140.5 140.5 0 0 0 683 140.5 Z" fill="
Any updates?

[hughess]

I'm also interested in saving images as png when using the svg renderer.

Is this on the roadmap?

[plainheart]

@hughess Hi, it looks not very hard to implement and this feature could make the SVG renderer better. I'm going to take a try.

[hughess]

@plainheart do you know what would need to be done to enable this? I might be able to take a look at it and contribute (depending on how difficult it is)

[plainheart]

@hughess Glad to see you would like to help implement this feature! I'm sorry that I almost have forgotten it. We will mainly need to improve the echarts#getConnectedDataURL function to enable it. Now the SVG data URL can be generated synchronously, but when it comes to exporting other images of types in the SVG renderer, an asynchronous function may be needed. [1]

[1] To export the images of png/jpeg type, it should be necessary to create a temporary canvas to draw the SVG image and export it in other types via the canvas.toDataURL API when the SVG image is loaded and ready. This is also why it can't be in a synchronous way anymore.

[hughess]

Thanks @plainheart. As a first step to understand how it would work, I did the following:

• Used the svg renderer as normal to create and display a chart
• Added a custom button outside of the ECharts instance - on click, the button runs a function which:
  • Generates the same chart, but using the canvas renderer
  • Puts the chart into a hidden div
  • Runs getConnectedDataURL with type = 'png'
  • Uses the download function from the npm package download.js to take the connectedDataURL and save it into a png file which is downloaded in the browser

This must be an inefficient way of doing it, but it works for our immediate use case. I plan to learn more about creating a temporary canvas from within ECharts so I can contribute back to the project.