How to export a JSXGraph to an .svg file ?

390 views
Skip to first unread message

mireilled...@yahoo.fr

unread,
Jun 9, 2016, 3:03:06 PM6/9/16
to JSXGraph
Hi,

I need some help with saving my created JSXGraph to an .svg file.

I found this answer:
"To export the mathlet to SVG we are going to use the XMLSerializer:
var svg = new XMLSerializer().serializeToString(board.renderer.svgRoot);
This will get you the whole SVG tree you can save in a .svg file."

But I don't know how to "save in an .svg file" ?

Possibly the answer is very basic, as I am new to js.
I would greatly appreciate if someone could help me with that.

I attached my files. Maybe this can help to understand what I want. I want to to save the rendered graph as an .svg file.

Thank you in advance for any help,
Mireille

index.html
icon.js

Alfred Wassermann

unread,
Jun 13, 2016, 7:10:00 AM6/13/16
to JSXGraph, mireilled...@yahoo.fr
Dear Mireille,
the answer is not trivial at all. In your example, the SVG source code of the JSXGraph construction is contained in the variable "svg".
Now, it depends where you want to save the .svg file: on the server or on the web client?
In the first case, I would recommend to send it with $.post() from jQuery to the web server. In the second case, I recommend a tool like fileSaver, see
https://github.com/eligrey/FileSaver.js/, to let the user save the svg file.

Best wishes,
Alfred


mireilled...@yahoo.fr

unread,
Jun 14, 2016, 4:53:28 AM6/14/16
to JSXGraph, mireilled...@yahoo.fr
Thank you very much Alfred for your answer.
In fact, I am working only locally. The index.html and .js files are stored on my PC and I want to save the svg file at the same location only on my PC.
So, I think both of the methods you suggested should work.
I will have to spend some time with it to understand how to use $.post() or FileSaver.js and I will let you know if I succeeded or if I have further questions.
Thank you again for your answer.
Best wishes,
Mireille

Alfred Wassermann

unread,
Jun 14, 2016, 12:08:30 PM6/14/16
to JSXGraph, mireilled...@yahoo.fr
So, you should go for fileSaver.js. It is really simple to use.
Best wishes,
Alfred

mireilled...@yahoo.fr

unread,
Jun 15, 2016, 5:43:54 AM6/15/16
to JSXGraph, mireilled...@yahoo.fr
Thank you Alfred,
It works fine with filesaver.js
I added
<script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
into the head of index.html file
and
var blob = new Blob([svg], {type: "text/plain;charset=utf-8"});
saveAs(blob, "test.svg");
to the.js file
and that works perfectly.
Thank you very much for your help.
Best wishes,
Mireille
Reply all
Reply to author
Forward
0 new messages