🏠 back to Observable

Can't download PNG or SVG of

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 SVGSVGElement OR
  • top level element contains exactly one svg element (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 svg elements. See next answer.

@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