Export SVG file

[jakobaxelsson]

Provide a menu choice to export the graphics to an SVG file.

[jakobaxelsson]

This has been implemented. However, it does not capture the style information (colors) that is defined in CSS.

[jakobaxelsson]

This appears to be a solution to include CSS in SVG file: https://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css.

The CSS of the page can be accessed as explained here: https://stackoverflow.com/questions/1679507/getting-all-css-used-in-html-file.

The easiest solution is probably to make a deep clone of the map element, then add the styling information into it according to the link above, and finally serializing it.

Also, the DOCTYPE info should be added to the start of the file.

[jakobaxelsson]

The changes above have been implemented, and it works. The SVG file can be opened in Microsoft Edge. However, for some reason it does not display correctly when imported into e.g. a Powerpoint document.

[jakobaxelsson]

Correction. The file can be imported into a Powerpoint document. However, Powerpoint does not apply the stylesheet. To fix this, it is probably necessary to walk the whole tree of the SVG image, and for each element e do e.style.cssText = window.getComputedStyle(e).cssText. Iterating over the tree can be done using a query with the string "# map > *".

[jakobaxelsson]

I have tried the following approach:

       with document.query("#map") as m:
            # Walk through all children of the SVG, inlining the applicable CSS style.
            for e in js.document.querySelectorAll("#map *"):
                style = js.JSON.stringify(js.window.getComputedStyle(e))
                print(style)
                e.style.cssText = style

It does not work well. getComputedStyle returns all computed styles, not just those that override the defaults, so there are hundreds of them. Also, it is difficult to get out the css text in an easy way.