PNG and SVG saving is broken for DMRS visualizations
ned2 opened this issue · comments
The DMRS visualisations use CSS to style the SVG which are not saved when downloaded, so the resultant image is essentially garbage.
One option is to use this approach: https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
Some comments on this option from @goodmami via email exchange:
The approach you linked appears to traverse the CSS defined on a page and embed used rules in an internal <style> element. The method from SVGCrowbar2 (the meat of which is here: https://github.com/NYTimes/svg-crowbar/blob/gh-pages/svg-crowbar-2.js#L211-L250, specifically the explicitlySetStyle() function) finds computed styles on each element and embeds those on the style attribute on the elements. The one you linked seems good for simple cases or if we might want a dynamic SVG (e.g. with javascript event handling; see here: https://www.w3.org/TR/SVG/script.html). The SVGCrowbar2 approach is good if you want a static SVG with the styles as-currently-displayed; that is, it's better if we've manually changed certain styles, such as overriding the CSS with "style" attributes on elements after the page loads.
I think the approach you found is good for our purposes.
I'd like to add that the crowbar method that uses getComputedStyle() might be better for the DMRS visualization, since it has hover and click events that dynamically change the styles of edges and nodes (and these appear to have been used in at least one publication: http://www.aclweb.org/anthology/C/C16/C16-1055.pdf).
I've pushed a commit that implements the style inlining from crowbar. Seems to do the trick! One little hiccup I've noticed is that the saved PNG is clipped. In the DMRS from the link below, I can see that the SVG element has a height of 150 pixels while getBBox() is returning a height of 131. I presume this is just a matter of updating the SVG canvas dimensions to match the size the image is actually taking up. @goodmami, reckon you could work out how best to do this for the DMRS visualisation? I suspect it would be much quicker than me working out what's going on.
Sorry I forgot about this issue. I don't actually know how to do that offhand, but StackOverflow suggests using getBoundingClientRect() instead of getBBox(). Maybe give that a shot?
Also, I think the problem is partly due to the transform I apply on the edges below the predicate line in order to flip them vertically.
Clipping affects both DMRS and MRS, so I created #4. I guess this issue can be closed, then, since the clipping is the main remaining problem.
Closing. See #4 for the clipping issue.