Add support for svg reading

[sofroniewn]

Add support for svg reading

[sofroniewn]

First step would be probably be round trip reads to ensure we can read any svg that we write. it's not clear if we'll be able to easily support reading ANY svg, but we might be able to get quite far ...

[imagesc-bot]

This issue has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/is-it-possible-to-load-an-svg-file-as-a-shapes-layer-in-napari/41873/3

[jmontoyam]

Hi @sofroniewn ,
as I mentioned in the image.sc forum, I would like to work on this issue. I am not an expert on svg and I am a beginner user of Napari, but I would like to learn the inner workings of this amazing library and at the same time I would like to contribute to it :-). Taking into account that this code base is new to me, could be please give me some advises and tips so that I can understanding it better, in particular the files that I would need to modify in order to include this new feature into Napari: load an svg file and visualize it as a Shapes Layer. I think this would be very useful to load a set of annotations stored as an svg file. All the advises and suggestions are truly welcome! ;)

[sofroniewn]

That's great @jmontoyam! I'm happy to guide you through your first contribution to napari, to make an svg readable as a shapes layer. Doing this should also require changes to this repository.

To get started you should look at the overall contributing guide for napari and then set up a development version of this repository napari_svg as you are ultimately going to be making pull requests to this repo.

You'll also want to familiarize yourself with the plugin section of our documentation.

Step 1 is going to be to add a napari_get_reader hook implementation to our hook implementations here in napari_svg/hook_implmentations.py. This hook implementation is going to recognize the svg file extension and return a function capable of reading svg files. See this hook implementation that recognizes .dv or .mrc files and returns a function called dv_reader. Your hook implementation should recognize .svg and return an svg_reader.

Step 2 is going to be to create a function called svg_reader that will be capable of reading svg files and returning layer data. This is analogous to the dv_reader function in this plugin, and should probably live in its own file called napari_svg/svg_to_layer.py.

Step 3 Is going to be to actually write the svg_reader function. We'll have a couple of options for parsing the svg. One is to look at the xml directly (if you note in the writing of the svgs I just directly write the xml), or to use a 3rd party svg parser that will read the svg into something in python that we are more able to work with. The full svg spec is quite a lot though and in napari we're only using a small part of it, so I'd probably focus first on just reading the xml directly and the subset that napari can write. You might want to experiment here though and get a sense for what is possible before deciding on an approach.

Hope this helps get you started!! I'm looking forward to helping you with this.

[jmontoyam]

Thank you very much @sofroniewn for all the advice and suggestions!...I will get back to you as soon as I have finished reading and understanding all the info/code you mentioned above ;).

[ctrueden]

@jmontoyam I have some Python code I adapted for reading many (not all) SVG elements and drawing them with Turtle. Maybe it's useful as a reference? https://github.com/ctrueden/miles-python/blob/master/drawsvg.py

[sofroniewn]

Thanks for sharing that @ctrueden! That looks like a great starting point. Nice to use BeautifulSoup to make parsing the xml easier. I'd start with that approach too @jmontoyam.

[jmontoyam]

Thank you very much @ctrueden !