🏠 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.


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.


1 Like