Embedding external svg's?

Hi, is there a way to embed an external svg into the current svg?

The closest thing I could find is this notebook:

However, in Martien’s case, he’s placing the svg directly as an Observable cell… for my use case, I’d like to host/pull it elsewhere (like from Gist or Github, etc).

Surely there’s a way! (I just have no idea how to do it…)

1 Like

You should be able to use the <image> tag and its xlink:href attribute.

Hm, that’s not working for me. So this is what I’m trying to pull:

And here’s my code:

svg.append("image").attr("xlink:href", "https://gist.githubusercontent.com/abeyang/7f382e53d6ae92fb64e7fad4ebdfda06/raw/62ca0d16dae9c500afb45397f882b92044b0a8ea/Assets.svg")

Looking at my dev console, this is what I see (I think this is related?):

CloudApp

However, when I hosted it elsewhere (like cloudapp), it seems to work.

But would be nice to host from github / gist… or am I asking too much?

Not sure… this SO answer says that adding ?sanitize=true to the end of the URL might help, and doing this seems to work for my test notebook in Chrome, but not Firefox. Maybe that’s good enough?

Wow, thanks so much! Yeah think that’s good enough!

1 Like

Ack, sorry! I need this to be downloadable (rasterized or serialized), and this method seems to not work?

Is it because of the image tag? Or am I doing something wrong?

I’ve updated the test notebook with an approach that allows rasterization (using @mootari’s “Embedding fonts into an SVG” notebook from your earlier thread).

2 Likes

Thank you @bgchen!

1 Like