Adding "Export SVG" button

[denilsonsa]

This is a very basic implementation of SVG export.

It looks into DOM elements to figure out the positions and dimensions,
and then re-creates the tables as plain SVG and .

Works fine on both Firefox and Chrome.

Known issues:

• The positions are incorrect if the browser has some zoom applied. In
  fact, the display is already incorrect in the browser itself (the SVG
  paths are not correctly aligned with the elements).
• Rounded corners are not supported. Implementing that (properly) would
  require SVG clipping or some extra tricks. Not worth the extra trouble
  for now.
• The borders are 2-pixel wide because otherwise they would not align to
  the pixel grid (1-pixel border would cover two half pixels).
• There are no translations for other languages.

Related issues:

• Export as SVG or other Graphics #131
• Add image export capability #132

[denilsonsa]

Idea for future refactoring (that I am not going to do):

Completely replace the HTML elements (the <div class="table"> and <table>) with SVG ones. This way, the display would always be correct, independent of the zoom, and exporting to SVG would become trivial.

For editing a table, we still need HTML elements, and that could be handled by a modal window. This way, the "diagram" will be 100% rendered through SVG, while the interactions are still HTML.

As bonus, it would be trivial (using the <use> element) to generate the minimap and keep it in-sync.

[ondras]

Hi @denilsonsa,

thanks a lot! This looks great. I am now packing for vacation, so I will completely review and merge this PR once I return.

Some initial observations:

The borders are 2-pixel wide because otherwise they would not align to
the pixel grid (1-pixel border would cover two half pixels).

What about the trick with 1-pixel border and positions offset by 0.5 pixels?

Completely replace the HTML elements (the <div class="table"> and <table>) with SVG ones. This way, the display would always be correct, independent of the zoom, and exporting to SVG would become trivial.

Yes, this would be the best approach. This is probably the first thing to do if I had time to maintain this more.

For editing a table, we still need HTML elements, and that could be handled by a modal window. This way, the "diagram" will be 100% rendered through SVG, while the interactions are still HTML.

Perhaps the <foreignElement> SVG feature would enable inline HTML?

[denilsonsa]

Perhaps the <foreignElement> SVG feature would enable inline HTML?

<foreignObject>? Never used it, but seems like a good idea.

What about the trick with 1-pixel border and positions offset by 0.5 pixels?

I forgot to try that. But maybe that can/should be done if/when the entire rendering is moved to SVG.

I also forgot to add stroke-linejoin="round", that should make the border a bit rounded.

if I had time to maintain this more.

I know that feeling. ;)

[Zeldri]

Any news on it ? Would be a cool feature :D

[ondras]

Any news on it ? Would be a cool feature :D

Dammit, I have completely forgotten about this. @denilsonsa, is your code still working agains the current master branch? Is is safe to merge this?

[denilsonsa]

It's been two years since I last touched the code, so I don't know. We have to rebase/merge the code and test. I'm not gonna do that right now, so feel free to check it if you have some time.