SVG output

[gufoe]

Hello, I am wandering if generating SGV files is possible, or if there is any design limitation.

I can work on a PR myself if you think the work should be straight forward.

Thanks for the effort you put into this :)

[striezel]

Good question!

The current implementation uses PhantomJS and its web page render() method to create the actual image file, as can be seen here:

echarts-node-export-server/export-server/renderPhantom.js

Lines 71 to 73 in 2d8d1d3

	page.render(outFile, {
	format: 'png'
	});

Unfortunatly, SVG is not among the supported formats of the render() method. According to the PhantomJS documentation, the supported formats are:

Supported formats

• PDF
• PNG
• JPEG
• BMP
• PPM
• GIF support depends on the build of Qt used

So an output in JPEG format instead of PNG format could be easily done (it's basically a one-liner). But SVG is not possible, because PhantomJS simply does not support it. It is a limitation of PhantomJS.

[gufoe]

It is a little tricky to find from google somehow, but e-charts actually implement server side rendering which is way faster (~70ms vs ~3s) than the phantomjs implementation, it is really simple to use and does just that, it also supports other image types aswell, so i built my own small server!
You can find it here:
https://apache.github.io/echarts-handbook/en/how-to/cross-platform/server/

Thank you any way a lot for your kind interest :)

[striezel]

The server-side rendering (SSR) was added as a new feature in ECharts 5.3.0, which is quite recent. Since echarts-node-export-server still was using an older version, I just updated it to ECharts 5.3.2 in the new release v2.2.0.

Bear in mind that I have not looked into the new SSR feature of ECharts yet. However, I guess(!) that it should be possible to implement SVG output using the new SSR feature of ECharts. Maybe I will take a closer look into it in the coming days, but I cannot promise that anything in that direction will be happening.

server side rendering which is way faster (~70ms vs ~3s) than the phantomjs implementation

I don't think that is a fair comparison, because the output formats are different (PNG vs. SVG).

That being said: The performance difference may be in part due to PhantomJS being rather old and not getting any updates anymore. It may also be due to the fact that the ECharts people did some performance improvements in ECharts 5.3.0:

[Feature] [svg] Refactor SVG renderer. Improved SVG rendering performance by 2x ~ 10x. ecomfe/zrender#836 (pissang)

So maybe the version 2.2.0 of echarts-node-export-server will bring some improvements to the performance, too, because it also uses the newer ECharts version, but I doubt it will be anywhere near the 70ms, because there still is PhantomJS doing its part here, and that will probably still be slower. Note that I haven't measured anything here, because I do not need to generate many images within a short time where performance would become an issue. So any of that is purely speculation, and should be taken as such. The only way to find out is by measuring it.

[gufoe]

Nice, thanks for the update!
On performance: the huge difference is given by the fact that phantomjs has to instanciate chrome each time, so 90% of the time is spent on loading the browser, rather than rendering the svg. The new ssr feature completely bypasses the browser, so that no time is spent instanciating things, thus the huge performance gain. With phantomjs it will always be so much slower than using the new ssr feature, no matter what.

[striezel]

@gufoe:

Bear in mind that I have not looked into the new SSR feature of ECharts yet. However, I guess(!) that it should be possible to implement SVG output using the new SSR feature of ECharts. Maybe I will take a closer look into it in the coming days, but I cannot promise that anything in that direction will be happening.

Well, it is indeed possible: https://github.com/striezel/echarts-node-export-server/releases/tag/v3.0.0
The new release of version 3.0.0 abandons PhantomJS in favour of the server-side rendering feature of ECharts and adds the possibility to get an SVG file instead of a PNG file. (PNG is still the default, though.) So it should be faster and you can have your SVG file, too. :)

To get an SVG file instead of a PNG file, just add the HTTP header X-Image-Format: svg to the request to the server.