Embedded .svg files with clickable internal links during edit mode

Share & showcase
1

What I originally expected canvas to be is something to easily embed a self-designed navigation diagram into a note (![[Diagram.canvas]]), but the labels are currently not visible and you can’t click on entries to go to them.

I’ve found a way to do the above, however, using iframes:

  1. Create a diagram Untitled Diagram.svg using the Diagrams (v1.5.0) plugin
  2. Create any shape with fill (of the types supported by the plugin; src)
  3. Right-click “Copy Obsidian URL” of a file you want to link, say Concept 1.md
  4. Right-click “Edit link” and paste the obsidian://open url - this will create links of the xfile:href type into the .svg file
  5. Create a new note ToEmbed.md with contents <iframe src="Untitled Diagram.svg" width="500" height="500"></iframe>
  6. Open Untitled Diagram.svg in explorer and copy its path, paste that in the iframe src to complete the link
  7. Create a note MOC.md with contents ![[ToEmbed]] - it will now show Untitled Diagram.svg with a clickable, filled element that links to Concept 1.md

This has some quirks:

  • You can only directly click links, not ctrl-click them (a benefit for some, a downside for others)
  • The method is not sync-proof unless you have immaculately well set-up synced vaults
    • The iframe src only works if the path is never altered (no renames or moves of the vault or other folders in the path)
    • The .svg xfile:href only works if the vault name is unchanged (I think?)

Alternatives I’ve tried:

  • Embedding excalidraw files (links aren’t clickable)
  • Embedding .svg files directly (links aren’t clickable)
  • Using iframes directly (non-embedded iframes only show in read mode, not in edit mode)
  • <a href/> block around iframes or image embeds of .svg files (while this does go to the .svg file, it requires one extra click for every embedded diagram you want to traverse)

Alternatives I’ve seen suggested:

  • HTML Image Maps - apparently not available in Obsidian
4 Likes
2

This would be great.
Obsidian has some nice tools for making map-like displays, but a more portable format would be more fitting. Just making the links clickable would allow the use of obsidian URLs.

3

Unfortunately, I had problems with iframe sanitization causing issues as well as internal links to headers not working, so I had to go a different route. Posting for anyone else experiencing similar issues.

The following worked for me, using dataviewjs

//```dataviewjs
// Path to your SVG (vault-relative)
const path = "Path/To/My/InteractiveSVG.svg";
const svg = await dv.io.load(path);

// Insert as raw HTML so it stays interactive
const host = this.container.createEl("div", { cls: "vd-inline-svg" });
host.innerHTML = svg;
//```

and links like this inside my svg:

<a href="MyFile.md#MyHeader" class="internal-link">

I made my own svg from scratch, so I haven’t tested this with Diagrams plugin svgs, but it might work for those as well.

1 Like
4

Thanks for the dataviewjs snippet. Using it, I could display the svg file in Obsidian.
I had to add the following at the beginning of the SVG file:
xmlns:xlink=“http://www.w3.org/1999/xlink”
The link inside the SVG looks like: <a href=”obsidian://open?file=h.md">H
It works both on PC and app. Not sure it can be published using Obsidian Publish