Embedding external svg's?

1

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
2

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

3

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

4

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?

5

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?

6

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

1 Like
7

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?

8

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
9

Thank you @bgchen!

1 Like