SVG renderer / export

[jarben]

It's great that ECharts uses ZRender abstraction to draw stuff into canvas. Makes me thinking how hard would it be to render it as SVG? It doesn't need to support animations, the use case is to download a snapshot of what you see into SVG so it can be potentially printed etc.

Is there any in-memory tree of shapes with calculated positions that can be rendered by something else?

[jordansmith42]

@jarben we are attempting to do something similar and would love SVG support, any update here?

[pissang]

@jordansmith42 We are developing a brand new SVG renderer. It will solve this issue then.

[jarben]

This is a great news @pissang, you guys rock!

[jordansmith42]

That's awesome @pissang, very excited about this. Any idea of a timeline?

[pissang]

@jordansmith42 Not sure yet. It probably will take much more time than we think to do testing.

[Ovilia]

We are now preparing the SVG rendering and export work and we'd like to hear @jarben @jordansmith42 if you have any application scenarios that may help us better understand this feature. When would you prefer SVG to canvas?

[jarben]

Hi Olivia, that's great to hear, one of the most asked scenario is to be able to save graph in vector so it is possible to print it anywhere. Im on holiday now, will write more when i get back. Anyway, great news about the svg rendering!

[kfirdado]

Hi, That would be great, thank you. I need the SVG feature because we convert html to PDF to create reports. SVG remain vector on the PDF, so it is much lighter in size and resolution independent. Thanks for this great library. Kfir

…

On Aug 15, 2017 5:22 AM, "Wenli Zhang" ***@***.***> wrote: We are now preparing the SVG rendering and export work. @jarben <https://github.com/jarben> @jordansmith42 <https://github.com/jordansmith42> Do you have any application scenarios that may help us better understand this feature? When would you prefer SVG to canvas? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1764 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADcx5-rlO-JK5S6bwx5ry5QAAbx8IdEOks5sYQDXgaJpZM4FQZvk> .

[Ovilia]

@jarben Have a nice holiday!
And when you're back, it would be very nice of you to tell me more about why using SVG for printing is better, since I believe you may also make a large enough canvas (like 2x) to make it?

[Ovilia]

@kfirdado That sounds reasonable for me. 😃
Another question is, if ECharts provides an extra method to export charts as PDF file with charts in SVG format inside, would it be helpful to you in this case?
Or it happens more often that you need to add some extra content in the PDF, in which case exporting charts as PDF may not be very helpful?

[kfirdado]

Report is based not only on charts (tables, header, footer, text), and layout is customizable, so it would be best and most flexible to allow rendering charts as SVG in target div. Exporting as PDF would not be useful to us, but can be another nice feature to share single chart. Kfir Dadosh On Aug 15, 2017 11:29, "Wenli Zhang" <notifications@github.com> wrote: @kfirdado <https://github.com/kfirdado> That sounds reasonable for me. 😃 Another question is, if ECharts provides an extra method to *export charts as PDF file* with charts in SVG format inside, would it be helpful to you in this case? Or it happens more often that you need to add some extra content in the PDF, in which case exporting charts as PDF may not be very helpful? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1764 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADcx5_0aeyEkw5ZsKwSAS4cnalARl08Fks5sYVbYgaJpZM4FQZvk> .

[Ovilia]

@kfirdado Thanks! That's very helpful.

[jordansmith42]

Our use case is almost the same as @kfirdado, we're rendering charts into reports with other types of items which will likely be printed to PDF and likely to paper. Currently using canvas to achieve any reasonable resolution we're forced to bump DPI resulting in a very heavy file size or do what we're currently doing, use another library that sits on top of canvas and rerenders as an svg.

[Ovilia]

@jordansmith42 Thanks for that! 😄

[jonavila]

+1 for SVG option. Would be interested to see if there's a way to specify a custom class name to the graphics drawn. I guess that way we could style certain parts of the chart with CSS. Just today I was running the SVG tests in zrender 😍

[Ovilia]

@psumstr Thanks for your suggestion. Although we may not provide class name for users to use CSS to change certain parts of the chart, since this may interfere with the chart rendering and cause potential problems.

[jonavila]

@Ovilia Thanks for the quick reply. Yeah, I haven't thought of the full implications of adding classes to chart elements, but AMCharts does something like this:
https://www.amcharts.com/kbase/css-class-names/
https://www.amcharts.com/kbase/css-animations/

SVG rendering may also allow for future accessibility requirements (screen reader compatibility). Looking forward to all the future improvements.

[Ovilia]

@psumstr Thanks for your advice. We will consider them when making our SVG version. 😄

[jarben]

Hi @Ovilia , regarding the printable size, similarly to what @jordansmith42 has mentioned, vector is much smaller and suitable for PDFs. Also, SVG is easily editable which is great for using ECharts inside infographics.

Also agree with @psumstr around using CSS to customize charts. There might be some implications but's that's same as any widget library in HTML isn't it?

Anyway, thanks again for asking and working on this, it's such a good news!

[Ovilia]

@jarben We will consider the CSS suggestion. Thank you!

[Mattdjuret]

+ 1 for SVG Export. It would be nice if this also can be done programmatically with javascript as we like to export the chart as vector to Powerpoint. @Ovilia

[Ovilia]

@Mattdjuret That sounding nice! Thanks for your advice.

[Ovilia]

Hey guys, here I'd like to update some information about our work on SVG.
ECharts has just release a beta version of SVG rendering: https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG

SVG version may be released officially in about two months.
You're welcomed to try it out and send us some feedback, either on use scenarios or features requested.
Thanks!

[jarben]

Hi @Ovilia , this is such a great news, will give it a try today!

[jarben]

One question @Ovilia, is there any way to save as SVG from a chart that is rendered as canvas? I'm asking because while this SVG painter is in beta, it might be handy to provide SVG export while displaying chart with stable echarts.

Would this require rendering echarts in a hidden DOM element with SVG renderer enabled or is there any way to do this while chart is rendered in canvas?

Also, is there any list of known issues in the SVG painter so that we don't need to create news issues for known issues? I've noticed few issues with maps, animations and resizing. Will submit to the repo but maybe there is already a list of known TODO so we don't need to spend time on providing use cases etc?

Anyway, this is such as milestone, thanks so much for your hard work!

[Ovilia]

Hi @jarben , thanks for trying out!

Currently, we provide exporting SVG in toolbox when rendering as SVG. Here's how to do it:

1. Use 'svg' as renderer when init ECharts;
2. Add saveAsImage in toolbox;
3. Click download in toolbox and will download the SVG chart.

We will provide function to export SVG later, other than with toolbox.
Besides that, if you have the need of exporting SVG while rendering as Canvas, please tell me in which cases it is needed.

I will make a TODO list of bugs and improvements of SVG. Thanks for your advice!

Hope you a nice weekend! 😄

[jarben]

Hi @Ovilia, sorry it took me ages to report this but here is a list of issues I found: #7332

So great to see charts scalable!

[Ovilia]

@jarben Thank you!

[Ovilia]

I'm going to close this issue. Please feel free to open another if you find some SVG problems. Thanks all for your support!