Save / export stand-alone SVG-file with legend #1936

Hvass-Labs · 2023-11-30T12:01:10Z

Hvass-Labs
Nov 30, 2023

I searched and there are a few issues that relate to this, but they apparently don't solve my problem.

I'm using Observable Plot in a web-site and I am having trouble saving / exporting the SVG that is generated by Plot when there is a legend.

This is essentially my HTML file, which has a button that uses the well-known filesaver.js script to save the plot as an SVG-file:

<html>
  <body>
    <main>
      <div id="graph"></div>

      <button onclick="saveAs(new Blob([document.getElementById('graph').innerHTML], {type: 'text/plain;charset=utf-8'}), 'test.svg');" type="button">
        Save
      </button>
    </main>
    
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>

    var data = [
      { Date: new Date('1962-01-02'), Value: 0.0406, Name: 'Foo' },
      { Date: new Date('1962-01-03'), Value: 0.0403, Name: 'Bar' },
      { Date: new Date('1962-01-04'), Value: 0.0399, Name: 'Foo' },
      { Date: new Date('1962-01-05'), Value: 0.0402, Name: 'Bar' },
      { Date: new Date('1962-01-06'), Value: 0.0402, Name: 'Foo' },
    ];

    var plot = Plot.frame().plot({
      grid: true,
      y: {percent: true},
      color: {legend: true},
      marks: [
        Plot.lineY(data, {x: "Date", y: "Value", stroke: "Name"}),
      ],
    });

    var graphDiv = document.getElementById('graph');
    graphDiv.append(plot);
    </script>

  </body>
</html>

This works and saves the contents to a file. But I cannot open the file in e.g. InkScape or even in the web-browser, which gives the error: "This XML file does not appear to have any style information associated with it. The document tree is shown below."

The contents of the file start with <figure class="plot-d6a7b5-figure" style="max-width: initial;">. Then there are some <svg> elements for the legend. Further down the main SVG element begins with <svg class="plot-d6a7b5" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400">.

I tried removing everything before the main <svg> element and adding the xmlns attribute like so: <svg ... xmlns="http://www.w3.org/2000/svg">, and then it worked for the main <svg> element, but I cannot get it to work for the legend.

I also tried adding  to the start of the SVG-file, but that doesn't seem to matter.

I don't know much about the SVG format. So what is the correct way of extracting the SVG generated by Observable Plot and saving it to a stand-alone SVG-file that can be opened in other programs?

Thanks!

Fil · 2023-11-30T16:23:25Z

Fil
Nov 30, 2023
Collaborator

Please let's open questions in this space ("discussions"), and keep issues for bug reports.

Plot generates both SVG (for the chart itself) and HTML (for the legends, title, subtitle…), so you need something that exports HTML to the output format that suits you best.

A browser can save a PDF, for example.

The bubkoo/html-to-image package is also great (this is what the observable website uses for its "download as png" feature.

I'm still looking for a good generic "html to svg" package, but in the meantime I've developed a partial something that works for me:
https://observablehq.com/@fil/plot-figure-to-svg

(See also observablehq/feedback#541)

0 replies

Hvass-Labs · 2023-12-02T12:43:05Z

Hvass-Labs
Dec 2, 2023
Author

Thanks. I tried html-to-image as you suggest, but I couldn't get it to work. It also seems to be a very awkward solution, compared to the simple and elegant solution I wrote above - which unfortunately doesn't work because you split the plot into several HTML and SVG components.

Allow me to ask why you do that? Is there a technical reason why the legend and title are not a part of the main SVG? I normally use Matplotlib for Python where these are just a part of the main plot. The caption is not a part of the plot, as it is usually a longer text written below the plot.

The reason I want to be able to save the plot as a stand-alone SVG-file, is so the users of my web-site can easily save and use the plot elsewhere, e.g. on other web-forums, in Word / PDF documents, etc.

Regarding where to post different kinds of issues here on GitHub, you may want to make a little template that people see when they create a new issue, so they know where to post, and what info they should provide you with. I can see you work very hard, so I want to make it as easy as possible for you to deal with the issues I bring up.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Save / export stand-alone SVG-file with legend #1936

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Save / export stand-alone SVG-file with legend #1936

Hvass-Labs Nov 30, 2023

Replies: 2 comments

Fil Nov 30, 2023 Collaborator

Hvass-Labs Dec 2, 2023 Author

Hvass-Labs
Nov 30, 2023

Fil
Nov 30, 2023
Collaborator

Hvass-Labs
Dec 2, 2023
Author