Overlay image and SVG created in CODA

1

Hi guys,

I followed @Paul_Danyliuk 's post to create svg image MEGA TRICK: SVG in Coda (one step away from generated charts and mind maps!), and this is working kinda great, creating bubbles to display information, change size and color, etc… !

image
image542×517 13.5 KB

However, the final stage of my current job would be to put those bubble in **overlay above some other existing png/jpg image from internet, calling an <image> svg function like. The aim is to display data (number) in overlay of a country map for example.

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>

But the called external image from internet wont show up. I’m absolutely no expert with SVG coding, may be I miss something or forget some references to add in the <svg> to be able to call external image with a web link ?

image
image1004×512 83.3 KB

Thanks in Advance !

Quentin

Edit : same code works outside of coda

image
image1862×570 159 KB

image
image953×365 66.9 KB

2

Hi @Quentin_Morel - I looked into this a bit when working on Packs, and for security reasons we don’t support loading external content in SVGs. One potential workaround you could explore, which is a bit like Inception, is for the inner PNGhref to itself be a data URI:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
</svg>

From my quick testing this mostly seems to work, although oddly crashes the doc when you try to zoom in on it.

3

Hi @Eric_Koleda and thanks for this answer!
Yesterday I did never code anything in svg, then I’m quite young in this subject.
Would you explain how you pass from an given image (even if I have to upload it in my doc as “local image” to your complex <image> data ?

Thanks again :slight_smile:

4

OK, i figured out how to convert simple image to base64. Coda burns if the base64 is too long :frowning: that’s kinda sad, and then its an obligation to have very poor background.
Anyway, start to be fun :slight_smile:

image
image963×768 40.2 KB

5

Ya, this use of SVG is certainly pushing the boundaries of what Coda will allow. Another approach you might consider is using @Paul_Danyliuk’s Edit Images Pack, which should allow for more robust overlays:

6

Hi @Eric_Koleda and thanks !
Yes I’m investigating Paul’s pack, even if I’m probably t0o ambitious.

Anyway, even without overlay, I can’t count how many use cases I think of since I know how to play with SVG :smiley:

image
image1508×442 84.8 KB

7

Wow, very impressive!