In Download of SVG, Map is Missing When Viewed in Inkscape

[emmahodcroft]

Current Behavior
When the SVG is downloaded from the Nextstrain website, the whole section which should have the map is missing (viewed in Inkscape on Windows 10):

Further, on Windows 10 IE, the download does not work at all. Nothing happens.

Edit: Notably, the map is visible when the SVG is viewed in Chrome (Windows 10) or Firefox (Linux) when it is not visible in Inkscape on these platforms. However, as the main purpose of downloading the SVG is to edit it, this is still a fair-size bug.

Expected behavior
The SVG should include the map, with the map background, plus all of the lines/demes/etc.

How to reproduce
Select download data at the bottom of the webpage. Select 'SVG'. Open it up.

Your environment: if browsing Nextstrain online
Broken on: Windows 10 with Chrome & Firefox. Also Linux with Firefox (tested by @rneher ) Appears to be working on macOS High Sierra 10.13.4 & Chrome 80.0.3987.149 (Official Build) (64-bit) (tested by @eharkins )

Also, totally broken on IE, but this appears to be maybe a separate issue? Download doesn't work at all.

Your environment: if running Nextstrain locally
Also broken locally on Windows 10 in Chrome

[eharkins]

Some more differences of my env beyond what you listed:

• I was viewing the downloaded SVGs using Chrome not Inkscape
• Can't tell here but looks like your browser width was set such that the map should appear below the tree, as opposed to on the right side? When it was "working" for me it was with the map next to the tree.

[emmahodcroft]

Ahh... you found a good difference though! I can also see the map in Chrome - and Richard can see it in Firefox. This is an important and interesting bit of information!

Unfortunately though, having it work in vector programs is important - when I need the map/tree/etc from download (rather than screenshot) it's so I can edit it! But I'll update the issue with this detail - thanks!

[eharkins]

Yep, indeed, when I try to view in Inkscape it doesn't show the map. Glad we narrowed it down to something specific!

[jameshadfield]

Linking this PR to read about the history of how we got here: https://github.com/nextstrain/auspice/pull/925

[emmahodcroft]

Thanks James!

[CameronDevine]

This appears to be a problem with the SVG foreignObject element in Inkscape. The text at the bottom which includes the dataset, date downloaded, and other information is also missing. I tested this with Inkscape 0.92.3, 0.92.5, and 1.0 RC1, and all three versions did not show the map or footer.

[emmahodcroft]

Thank you for looking into this!

[rleir]

@emmahodcroft Hi Emma, What sort of editing change would you be interested in doing?

The reason I ask is that HTML is not SVG. When you export the whole page to an SVG you have a round peg to square hole problem. It looks as if the SVG foreignObject element is an attempt to bridge between SVG and HTML. When you have SVG and HTML combined, Inkscape has a difficult challenge. And the HTML WYSIWYG editors would want to open an HTML file containing some SVG elements (if they even support SVG inline). I did a google search for 'convert html to svg' and found many people talking about it but no good answers. I will keep looking.

One solution might be to download three SVG's simultaneously, one each for map, tree, and entropy. The names for these files could contain the date and dataset name so you could keep track of which files are related. Then you would have real SVG files which Inkscape would (hopefully) accept.

Another solution is the Chrome 'inspect' debugger, if you know the details of how SVG works. You can inspect the nextstrain page and make live changes to the SVG (I am assuming considerable web dev knowledge). Wish I could be more helpful. -- Rick

[emmahodcroft]

Hi @rleir the editing varies, depending on what's being done, but the way it worked in the past was fine - the map in the background is an image and thus uneditable (just croppable), and then the circles & lines on the map (individual slices if in 'pie chart' mode) were SVG objects. This means that a wide variety of edits can be done. I hope that makes sense!

[ktmeaton]

I've found a workaround for this issue that I wanted to share. Briefly, the steps are:

1. Screenshot the map to pdf, using the pyppeteer API.
2. Import the pdf into vector editing software (Inkscape or Illustrator)
3. Export the pdf to svg.

An example is:

1. Install pyppeteer.

   pip install pyppeteer

2. Save the following script as screenshot.py

   import asyncio
   from pyppeteer import launch
   import time
   
   url = "https://nextstrain.org/ebola?d=map&legend=closed&onlyPanels&p=full&sidebar=closed"
   
   async def main():
       browser = await launch()
       page = await browser.newPage()
       await page.setViewport({'width':800, 'height':600, 'deviceScaleFactor':4})
       print("Waiting 5 seconds for Nextstrain to load page...")
       await page.goto(url)
       time.sleep(5)
       print("Taking a pdf screenshot...")
       await page.emulateMedia('screen')
       await page.pdf({'path': 'map.pdf'})
       await browser.close()
   
   asyncio.get_event_loop().run_until_complete(main())

3. Execute the screenshot script:

   python screenshot.py
   
   Waiting 5 seconds for Nextstrain to load page...
   Taking a pdf screenshot...

   Note: The first time running pyppeteer, Chromium will be downloaded. You may need to run this script a second time afterwards.

4. This saves map.pdf in the working directory. map.pdf

5. Open map.pdf in Inkscape.

6. "Save As" plain svg format. map.svg.zip

7. Open svg in Inkscape, edit away! The map tile is a raster, while the nodes and paths are editable vectors.

[emmahodcroft]

Edit: Important note: via this method you lose the Mapbox icons and copyright symbols, so please ensure that if you are distributing the image, that you screengrab these and add them back in.

As another slightly hacky option but one that seems to work ok - if you 'Download SVG' as described above - you can open it in Google Chrome and it displays correctly:

Then save this as PDF, and import into Inkscape. Even if the tree & other panels isn't showing up brilliantly, you can grab the map and pies and move this to your downloaded SVG in Inkscape.

(This is on Windows 10)