Request to Add SVG Export Option without Interactive Attributes in Function-Plot Library

[elizmichelle]

Description:
There are use cases where users need a static representation of the graphs in SVG format without the additional interactive attributes.

Request:

Addition of an export option in the Function-Plot library that allows users to export the generated graphs in SVG format without the interactive attributes. This would be beneficial for a variety of scenarios one of them including:

1. Publication and Documentation: Users often need to include static math function graphs in academic papers, blog posts, or technical documentation where interactivity is not required.

Proposed Solution:

It would be helpful to introduce an additional export function or option that generates a clean SVG representation of the graph, excluding any interactive attributes added by default. This can be a valuable addition to the library's existing features, enhancing its versatility.

Thank you for considering this request. I look forward to the possibility of seeing this enhancement in a future release of the Function-Plot library.

[mauriciopoppe]

To render a SVG to an image tag you can follow this answer https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser or use a library in the npm ecosystem. The example below uses the stack overflow answer to render the SVG node to an <img> tag:

https://codesandbox.io/s/brave-ganguly-w96mtl?file=/public/index.html

---

I think providing function-plot as a service is not a goal of the project I'm willing to work on, however I don't think it'd be that hard to write a server that you can host with the above code. The idea is to have a web server e.g. a nodeJS server which is able to fulfill requests asking for a image representation of function.

For example for this configuration:

let data = {width: 800, height: 500, data: [{fn: "x^2"}]}

You could make a request like this (assuming that the server is hosted at example.com):

encodeURI(JSON.stringify(data))
// returns '%7B%22width%22:800,%22height%22:500,%22data%22:%5B%7B%22fn%22:%22x%5E2%22%7D%5D%7D'

curl example.com/function-plot?data=%7B%22width%22:800,%22height%22:500,%22data%22:%5B%7B%22fn%22:%22x%5E2%22%7D%5D%7D

Now the server side would need to do the above and return an image so that you can use it in your app e.g.

<img src="https://example.com/function-plot?data=%7B%22width%22:800,%22height%22:500,%22data%22:%5B%7B%22fn%22:%22x%5E2%22%7D%5D%7D"></img>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.