You can save an SVG graphic in its current state with firefox. If you have the graphic open in its own tab, just click "File > Save Page As...". If the graphic is displayed in a <object> tag, then you can right click on it and select "This Frame > Save Frame as ...".
Depending on your document and your purpose, you may want to edit the document some. For instance, with the hypocycloid example, it necessary to remove the attribute onload="setup()" to prevent the initialization script from being run. Here is the result:
If you wanted to publish this static picture, you might remove the links that edit p and q. You might also remove whole scripting section.
If you are viewing a page with an SVG, right click on the SVG and then select "Inspect Element" from the bottom of the menu. The code for the page will come up. Then right click the SVG tag (containing whatever tag is initially selected). Select "Copy as HTML". Then open a text editor and paste whatever you copied into the text editor and save as something like "filename.svg". This will result in saving the current state of the document.
I did notice one problem with this method which appears if you use xlink to clone objects. If you use the above method on the tree example, it introduces a bunch of bad attributes of the form xmlns="http://www.w3.org/1999/xlink" in the <use> tags. They can be removed by doing a search and replacing xmlns="http://www.w3.org/1999/xlink" by the empty string. If you do this, you get a partially expanded tree, which can still be manipulated.
If you save the hypocycloid example without removing the attribute onload="setup()" as discussed above, you will run into a problem when you reopen the fine. Namely, the ECMAScript we wrote for hypocycloid3.svg expects to initially have p=1 and q=3. If we edit these values by manipulating the image, save and reopen the image, then the same script runs and doesn't handle the changed values.
The main point is that these methods allow you to save the content of the SVG document, but not the values of the variables used in ECMAScript. You can deal with this by loading all your variable's values from places in the document at setup. For instance, the hypocycloid example would work betten when saved if the values of p and q were read from the associated <tspan> elements when the document is loaded. For variables that aren't already in the document as an attribute somewhere, you could create extra hidden objects to store their value. This could be done in the textual content of <text> tags in the <defs> section, for instance.
