Exporting SVG for use in Illustrator

Community Help
#1

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?

#2

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
#3

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:

Screenshot 2022-03-30 at 11.29.32 PM
Screenshot 2022-03-30 at 11.29.32 PM2132Ă—1620 300 KB

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?

#4

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.

#5

Thank you, it worked perfectly!

1 Like