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
2 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.