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
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 PNG
href to itself be a data URI:
<image xlink:href="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
From my quick testing this mostly seems to work, although oddly crashes the doc when you try to zoom in on it.
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 ?
OK, i figured out how to convert simple image to base64. Coda burns if the base64 is too long that’s kinda sad, and then its an obligation to have very poor background.
Anyway, start to be fun
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
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.