Pikchr

Hyperlinks in SVG documents
Login

Hyperlinks in SVG documents

(1) By Stephan Beal (stephan) on 2020-09-14 01:18:55 [link] [source]

i'm just going to drop this here and let the idea grate on Richard like a piece of sand in one's bed...

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a

C: circle fill yellow
move to C.w
arc from C.w + 0.1,-0.1 to C.e - 0.1,+0.1
move to C.nw + 0.05,-0.1
circle rad 0.05 fill black
move to C.ne - 0.15,+0.1
circle rad 0.05 fill black

Fossil might now have the single most powerful emoji system ever to exist in a forum. We really need to collect a gallery of these and maybe add a toolbar to forum posts to inject them.

C: circle fill yellow
move to C.w
arc from C.w + 0.1,-0.1 to C.e - 0.1,+0.1 thin thin fill black
arc ccw from C.e - 0.1,+0.1 to C.w + 0.1,-0.1 thin thin fill black
move to C.nw + 0.05,-0.1
circle rad 0.05 fill black
move to C.ne - 0.15,+0.1
circle rad 0.05 fill black

(2) By Stephan Beal (stephan) on 2020-09-14 01:21:51 in reply to 1 [link] [source]

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a

FWIW, something along the lines of the following comes to mind:

link "url" [
  all elements in here are encased by the <A> tag.
]

(3) By drh on 2020-09-14 04:20:45 in reply to 1 [source]

I've actually thought about adding a "url" attribute to Pikchr objects, so that they could hyperlink. But there are issues that I see so far:

  1. You would probably want to use the enhanced URL syntax of whatever wiki system the Pikchr image is being embedded in. But Pikchr itself has no knowledge of that syntax. So we'd have to enhance the pikchr() interface to include some kind of callback by which Pikchr could call back to the controlling markup engine to ask it to resolve URLs into a standard format.

  2. By default (at least on the web browsers I have at hand) there is no visual indication that a particular graphic element in SVG is in fact a hyperlink - other than the fact that the cursor changes when you mouseover, which people are unlikely to notice.

I've pushed this off for now, so that I can focus on getting basic documentation in place. Adding a "url" attribute later seems like it would be easy enough, if we can resolve the issues above.

(4) By Stephan Beal (stephan) on 2020-09-14 06:18:55 in reply to 3 [link] [source]

Those are good points. Vaguely related: it occurs to me that we might want to eventually reimplement the timeline graph in pikchr :). The current problem i see with that is being (un)able to embed enough metadata in the SVG so that we could hook up appropriate click/hover handlers on the nodes. Just off the top of my head, maybe a syntax addition which allows setting of arbitrary SVG attributes:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*

Something along the lines of:

line data-foo "value" data-bar "other value" ...

That might also give us what we need to add URLs to them and hook up the URLs via JS:

circle data-url "[/wiki?name=home]" ...

We could then, in JS, select all elements matching [data-url] and process those links... except that we need the server in order to process wiki-style links properly. Hmmm. Perhaps a family of data-...:

circle data-url-wiki "home"
circle data-url-doc "www/changes.wiki"
circle data-url-checkin "hash or tag"
# and other data-xxx attributes could be used to define URL parameters
circle data-url-raw "src/foo.c" data-param-mimetype="text/plain"

In short, data-* gets assigned as data-* attribute directly on the SVG element, with the given value.

With that format we could do such link conversions client-side. Note that we don't need any label text for such links - that text, if any, is part of the SVG output.

Something to consider, maybe.