# Graphviz SVG for Obsidian

**URL:** https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114
**Category:** Dev
**Created:** [April 10, 2022, 2:19am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114 "2022-04-10T02:19:43Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 10, 2022, 2:19am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/1 "2022-04-10T02:19:43Z")

</div>

Hi –

I need to get the SVG generation of graphviz to work better for the macos obsidian app. The problem appear to be that html anchor elements ("\<a …\>") use “xlink:href” instead of plain old “href=”, and that the graphviz “class=” directives need to annotate the

Mermaid generates this, which does the url correctly, but apparently can’t be correctly css styled:

```auto
<g class="node default internal-link" id="flowchart-C-3586" transform="translate(297.81249237060547, 36.0000057220459)">
<rect class="basic label-container" style="" rx="0" ry="0" x="-85.75" y="-28.0000057220459" width="171.5" height="56.0000114440918"></rect>
<g class="label" style="" transform="translate(-78.25, -20.5000057220459)">
<foreignObject width="156.5" height="41.0000114440918">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
<a class="internal-link" href="cooperation">cooperation</a>
</div></foreignObject></g></g>

```

Graphviz generates this, which does annotate the url correctly, but has all the correct css styling:

```auto
<g id="node21" class="node">
<title>OUT2</title>
<g id="a_node21"><a xlink:href="cooperation" xlink:title=" &nbsp;BASIC CATEGORY THEORY &nbsp;" target="_top">
<polygon fill="none" stroke="red" stroke-width="3" points="720.07,-647.48 510.07,-647.48 510.07,-611.48 720.07,-611.48 720.07,-647.48"></polygon>
<text text-anchor="middle" x="615.07" y="-625.78" font-family="Times,serif" font-size="14.00" fill="blue"> &nbsp;BASIC CATEGORY THEORY &nbsp;</text>
</a>
</g>
</g>

```

Hacking the graphviz generated SVG to this worked:

```auto
<g id="node21" class="node **default internal-link**">
<title>OUT2</title>
<g id="a_node21"><a xlink:title=" &nbsp;BASIC CATEGORY THEORY &nbsp;" target="_top" **class="internal-link"**  **href** ="cooperation">
<polygon fill="none" stroke="red" stroke-width="3" points="720.07,-647.48 510.07,-647.48 510.07,-611.48 720.07,-611.48 720.07,-647.48"></polygon>
<text text-anchor="middle" x="615.07" y="-625.78" font-family="Times,serif" font-size="14.00" fill="blue"> &nbsp;BASIC CATEGORY THEORY &nbsp;</text>
</a>
</g>
</g>

```

where the changes are in \*\*bold\*\*.

How should I go about making this change? Where in the source code should I look?

Thanks!

– Perry

---

<div class="post-metadata">

### Author: ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)
#### Post date: [April 10, 2022, 5:50pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/2 "2022-04-10T17:50:36Z")

</div>

the svg generator is here: plugin/core/gvrender\_core\_svg.c

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 10, 2022, 5:53pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/3 "2022-04-10T17:53:34Z")

</div>

The gitlab repo search is horrible, so I wasn’t able to find it until I got even more persistent.

Thanks!

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 10, 2022, 5:57pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/4 "2022-04-10T17:57:43Z")

</div>

Should I make my own fork of graphviz, or try to modify the existing graphviz to have this option?

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 10, 2022, 11:52pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/5 "2022-04-10T23:52:39Z")

</div>

I got the fix to work, now I need to do it for only the urls that are obsidian internal-links.

What would be the best way to implement this node definition:

```auto
  OUT2 [obsidian-internal-link, label=" THEORY ", URL="cooperation"];

```

Main problem is that anchor emitters aren’t provided any information about the obj being rendered.

Threading that parameter into the `begin_anchor` functions would be messy, but it might be the way to do it?

What’s the thinking on this sort of thing?

---

<div class="post-metadata">

### Author: ![mark](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/mark/32/84_2.png) [@mark](https://forum.graphviz.org/u/mark)
#### Post date: [April 12, 2022, 7:42am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/6 "2022-04-12T07:42:19Z")

</div>

Why do you want to replace xlinkhref with href?

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 12, 2022, 7:44am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/7 "2022-04-12T07:44:32Z")

</div>

Because obsidian doesn’t do internal links with xlink:href anchors, only href.

---

<div class="post-metadata">

### Author: ![mark](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/mark/32/84_2.png) [@mark](https://forum.graphviz.org/u/mark)
#### Post date: [April 12, 2022, 8:19am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/8 "2022-04-12T08:19:41Z")

</div>

(I don’t know much about this topic) are hrefs more legit than xlink:href? Why does obsidian not handle xlink:href? Is href better than xlink:href?

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 12, 2022, 9:22pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/9 "2022-04-12T21:22:03Z")

</div>

Dunno. I get no response when I ask obsidian devs about that. I just have to work with how it is.

Why is the “xlink:” stuff generated?

---

<div class="post-metadata">

### Author: ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)
#### Post date: [April 12, 2022, 11:08pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/10 "2022-04-12T23:08:23Z")

</div>

It appears that href may be preferable to xlink:href in future versions of SVG.

> **[xlink:href - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)**
>
> The xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it.

I doubt there were any deep reasons for however we designed gvrender\_core\_svg.c (speaking as its primary author). Graphviz was an early adopter of SVG and there’s certainly some unnecessary baggage. Also in general XML is sort of the light that failed, isn’t it, though the SVG rendering model has preserved the best of why we liked PostScript, so much, right?

At this point any proposed change needs to be tested against the popular SVG rendering programs, or maybe it’s possible to emit both xlink:href and href for more compatibility.

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 12, 2022, 11:29pm UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/11 "2022-04-12T23:29:47Z")

</div>

Obsidian also requires "class=“internal-link” on the html/svg anchor.

I propose (but see below) something like a “obsidian-internal-link=true” argument (but without hyphens) on graphviz node (and whatever else can have “URL=” parameters) definitions to cause the emitted html/svg anchor to emit the anchor with both the addition of the above “class=” and the replacement of “xlink:html=” with “html” for that one anchor.

Actually there are two layers of “\<g …\>” produced surrounding the anchor, and I’m uncertain that I am covering all the cases in the seeming mess I produced. I’m planning to make another stab at it tonight.

---

<div class="post-metadata">

### Author: ![mark](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/mark/32/84_2.png) [@mark](https://forum.graphviz.org/u/mark)
#### Post date: [April 13, 2022, 12:20am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/12 "2022-04-13T00:20:02Z")

</div>

I expect Graphviz to outlast Obsidian, so I don’t think im keen to have an obsidian-specific attribute name.

You can set class on nodes today. Maybe if href is preferred to xlink:href we could switch over entirely

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 13, 2022, 12:27am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/13 "2022-04-13T00:27:32Z")

</div>

Well right now, you can’t annotate svg anchors with “class=” (only the surrounding “\<g …\>” gets annotated), which is the actual thing needed, if you can do “href=”.

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 13, 2022, 12:48am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/14 "2022-04-13T00:48:04Z")

</div>

I guess I’m proposing two separate changes:

1. 
  - Permit “xlink:href=” to be changed to “href=”.

2. 
  - Permit svg anchors to have “class=”.

---

<div class="post-metadata">

### Author: ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)
#### Post date: [April 13, 2022, 1:16am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/15 "2022-04-13T01:16:14Z")

</div>

Yes, if preferred in the SVG standard, I would adhere to that.

---

<div class="post-metadata">

### Author: ![mark](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/mark/32/84_2.png) [@mark](https://forum.graphviz.org/u/mark)
#### Post date: [April 13, 2022, 3:12am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/16 "2022-04-13T03:12:31Z")

</div>

I’d be in favor of unconditionally updating the href output from xlink:href to just use “href”, following the guidance Stephen posted on MDN. Feel free to mail a merge request about it, might need some tests updated too, and a changelog.md entry.

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 13, 2022, 3:31am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/17 "2022-04-13T03:31:46Z")

</div>

How about annotating anchors with the classlist specified in the node (and whatever) declaration?

Its there, so far, in “job”:

```auto
svg_begin_anchor(GVJ_t * job, char *href, char *tooltip, char *target,
                 char *id) {

```

but right now `svg_begin_anchor` does NOT generate a “class=” parameter for the anchor, but I have figured out how to do it:

```auto
  if ((str = agget(job->obj->u.n, "class")) && str[0]) {

```

If everything is “href=” instead of “xlink:href=”, then I’m done.

Is there a reason for the anchor to _not_ inherit the classes?

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 13, 2022, 3:36am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/18 "2022-04-13T03:36:38Z")

</div>

Searching for “xlink:xref” yields a lot of tests, but more notably, a number of usages not in anchors. How to handle that?

Lots of these:

```auto
rtest/linux.x86/cairo_dot_cairo.svg: <use xlink:href="#glyph0-1" x="741" y="25.699219"/>

```

but it looks like graphviz doesn’t generate “\<use”?

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 13, 2022, 8:58am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/19 "2022-04-13T08:58:16Z")

</div>

My proposed `href=` fix is here:  
[https://github.com/wagle/graphviz/commit/233f554edb1b705b068c4cabd7e4ea39f561cec9](https://github.com/wagle/graphviz/commit/233f554edb1b705b068c4cabd7e4ea39f561cec9)

following that is my proposed `class=` fix:  
[https://github.com/wagle/graphviz/commit/67c1c24e6245a1cd0da4f2b813109f26c4976c7b](https://github.com/wagle/graphviz/commit/67c1c24e6245a1cd0da4f2b813109f26c4976c7b)

I’m not seeing how to convince my gitlab mirror to display these two diffs or to submit them as pull requests.

My gitlab repo (mirror of my github) is here (if that helps):  
[https://gitlab.com/cognodica/graphviz](https://gitlab.com/cognodica/graphviz)

What else would you like me to do, like modifying the testing, etc?

---

<div class="post-metadata">

### Author: ![wagle](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/wagle/32/667_2.png) [@wagle](https://forum.graphviz.org/u/wagle)
#### Post date: [April 14, 2022, 12:29am UTC](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114/20 "2022-04-14T00:29:53Z")

</div>

Where do I mail the merge requests?

I don’t know how you all handle “new features”.

[Next page](https://forum.graphviz.org/t/graphviz-svg-for-obsidian/1114.md?page=2)
