Exporting SVG for use in Illustrator

I want to export the SVG from chart found in this notebook: force network with images and bbox / Bianchi Dy / Observable. My goal is to edit it further in Adobe Illustrator. However, I receive the following error message:
image (4)

I have tried to do the manual replacement option (and applied it to all relevant images) but I still keep getting this error. How do I ensure that any SVG I export from Observable that uses hosted images can also be edited in Illustrator?

Instead of specifying the images as URLs on the web (which Illustrator doesn’t seem to handle?), you could specify them as base64, with two changes:

First, load the images from the URLs:

images = Object.fromEntries(await Promise.all(Object.entries({
  a: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_1.svg",
  b: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_2.svg",
  c: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_3.svg",
  d: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_4.svg",
  e: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_5.svg",
  f: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_6.svg",
  g: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_7.svg",
  h: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_8.svg",
  i: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images/CUHK_silhouette_9.svg"
}).map(([key, url]) => fetch(url).then(d => d.text()).then(d => [key, d]))))

Second, use base64 urls:

const img = node
    .append("image")
    .attr(
      "xlink:href",
      (d) => "data:image/svg+xml;base64," + btoa(images[d.person])
    )
   ...

You can find the result here:

(sorry I can’t test on Illustrator atm)

1 Like

Thanks so much for your help! I tried out both the sample result you posted and applied your solution to my notebook too. Unfortunately, both produced this curious result, which is what it looks like when I select all the elements on the artboard:

I’m not familiar with the intricacies of SVG and Illustrator, so I admit I’m scratching my head at this one. Is it possible something was missing from the conversion to base64?

It seems to work when I export the svg (from my fork) to the PDF format (to do so I used Inkscape, “save as… PDF 1.5… no rasterization…”). That PDF then opened correctly with Illustrator.

Thank you, it worked perfectly!

1 Like