🏠 back to Observable

Saving SVG or PDF


In trying Observable » Mike Bostock » Saving SVG, I run in to weird visualisation problems. Opening the svg in Illustrator for example completely mangles the vector image. I did read @mbostock/saving-svg rasterize oddity

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.


Come to think of it, I must include the css it uses too somehow…

Or make the svg css-less.


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).


Thanks! I’ve moved the <style> into the <svg> and it works now. I’m happy.