So I wonder what the best way is to save an SVG either as proper SVG or, preferably, as a clean PDF, which in tun I can use to reuse in other apps like InDesign or on a website.
Also, I wonder what the best techniques are in Observable to generate the most compatible SVG that can be reused outside of Observable.
Any help and pointers appreciated.
I really love Observable and I use it to visualise data and other stuff, and need to use the visualisations in other documents.
SVG has a <style> element, so embedding CSS directly shouldn’t be a problem.
Beyond that I’d argue that it heavily depends on what the importing application supports. A litmus test might be to open and check your exported SVG in the browser first before moving on to other applications.
Another common source of problems are missing namespace attributes (you may have noticed that serialize() sets them explicitely).
Hi Martien. Did you ever come up with a solution for exporting to PDF? I just started reading into PDF export utilities for JS. While many examples work for basic text, I have found few ‘generic’ solutions into which I can plug a table supplied with data from JS and have it render out correctly. Any tips?
I’d love a Save SVG As PDF option that would do the trick and give me a PDF with the proper width and height for ‘paper size’. The browser print option puts it on an A4 with margins. Too bad.
Your approach is cool, and great for printing - which is ultimately all I need to do.
I suppose I was imaging an option that would preserve tables as readable text. Since PDFs are collections of image files, however, you give me the idea that I could run OCR over the rendered file.
In any of your other workflows are you generating stylized PDFs from JS?
The workflow most familiar to me is to write in markdown on my computer, use HTML to render out tables, and run everything through pandoc. Works well, but as I tried supplying JS data into the html tables, it seems I’m opening a new can of worms with the pandoc conversions. Looking for easier ways to print tables and graphs
That is exactly what’s happening when you print an HTML page. Text both in tables and embedded SVGs will be preserved, and in Mac OS e.g. you can save the print preview directly to a PDF.
I would have also suggested printing from within the worker iframe, but unfortunately the sandbox prevents this (@tom perhaps this could be allowed?). Beyond that you can include a print stylesheet to alter or remove elements within the notebook iframe.
Edit: If allow-modals (required for printing) is a no-go perhaps an alternative path could be provided which would render the notebook without the Observable UI.
Thanks Fabian! I didn’t see that out of the box. When I downloaded Martien’s SVG, I could only highlight a word at a time, I see now that, on printing, I can select out entire sentences.
