Overlay image and SVG created in CODA

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… !

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"
  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />

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 ?

Thanks in Advance !


Edit : same code works outside of coda

1 Like

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"

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

1 Like

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:

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:


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:

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:


Wow, very impressive!

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.