I’ve got some fun GraphViz generated graphs labeled with MathJaX below. For some reason, I don’t have the option to download SVG or PNG images and I’m wondering if that’s a bug?
I think it’s because of the wrapper div. If the cell is an SVG or a canvas, instead of a div, you should have the option to download the image.
1 Like
I think you’re on to something - thanks!
It seems a bit more complicated than just that, because I’ve built plenty of images that place either a Canvas or an SVG into a DIV but have still been able to download the images. For example, here’s the graph of a function that’s built that way.
What I have noticed, though, is that nesting or stacking Canvases and SVGs within a DIV seems to confuse the download buttons. For example, this n-body simulator places an SVG (which draws moving bodies( on top of a Canvas (which draws paths of growing complexity). There are download buttons but you only get the bodies.
In the case at hand, the image consists of a DIV with an SVG that contains nested SVGs. Perhaps that extra level of complexity is the problem because, I find the same problem in the second image in this notebook.
1 Like
Observable’s rules for SVG detection are:
- top level element is instance of
SVGSVGElementOR - top level element contains exactly one
svgelement (at any level) AND- svg fills at least 75% of top level element’s width OR
- svg fills at least 75% of top level element’s height
Equivalent conditions apply to canvas detection.
Graphviz plots fail these tests because they nest See next answer.svg elements.
@mbostock I think Observable’s detection could be improved by not counting SVG that are nested inside other SVGs.
2 Likes
Not quite. You can download SVGs of Mike’s original Graphviz graphs, for example. The problem is the way that I introduce typeset math into an SVG, which explicitly nests SVG (for the typeset stuff) into a larger SVG. If I return the larger SVG, then no problem. If I place the whole thing inside a DIV, then there’s an issue.
Thanks!
1 Like