SVG Image Maps From PNG Using Inkscape

[Ste_W]

Interesting. I might give this a try.

Just a an aside, for those pesky work computers you can use portableapps.com to download and install ink scape without those admin passwords.

[Scott_Sauyet]

…unless of course, your work environment blocks portableapps.com, because someone might use it to download and install inkscape.

[Ste_W]

It’s slipped under the radar of my employers thus far!

[wattahay]

This makes me really wonder about the most minimal TW plugin for this purpose.

1. Import a png to TiddlyWiki
2. Convert it to base64
3. use a single multi-line connector tool to outline areas of the PNG
4. convert the setup to an SVG

Requires mouse interaction to record coordinates of mouse clicks over the image, so the ability to draw dots and lines between mouse clicks. Secondly, perhaps add a shade over the area for a hover effect.

It’s too minimal for there to be existing examples, so it would have to be developed from the ground up.

[Eskha]

Another option, I found useful to convert a png to svg is the online tool: SVGcode—Convert raster images to SVG vector graphics that can be installed as a PWA or integrated as an iframe inTW.

[Scott_Sauyet]

@Eskha

Another option, I found useful to convert a png to svg [ … ]

There are a number of such tools, of varying levels of ability.

But if I read correctly, the context here is not really converting PNGs to SVGs, but to use the PNG inside an SVG in order to make a TW-specific ImageMap. I had no idea this was possible, and I’m very impressed.

Moreover, the OP makes for a very readable tutorial. I look forward to trying it!

[TW_Tones]

@wattahay thanks for you contribution. I just wanted to let you know there is one very useful lesson here for me, even if one does not go to the effort of using inkscape etc…

@wattahay

Surround the <path /> tags with Tiddlywiki <$link> widgets

I just grabed an existing SVG I had, and found it had no path statements, it only had a text statement. However I wrapped it in a link widget and it works. Now I see it it is somewhat obvious and it is similar to how I use HTML tables and use list widgets within it, to itterate rows and columns.

This fact on its own is excelent information for “Tips & Tricks” and “howto”.

It does of course beg the question what other image and graphing solutions allow this or could allow this?

But wait there is more;

Your example then goes on to demonstrate how the path statements can be included by transclusion, which in someways follows from the above recognition of TiddlyWiki Script working inside an SVG, but of course we can extend this further;

and more

I have not tried it yet, but given the order of rendering I expect we could use the single backticks against path attributes to calculate the values of attributes as well.

• One use that we may document would be how to use an existing button image and overlay an annotation, perhaps programaticaly, that makes the button image unique in a related application eg an edit button that edits the tiddler in a different editor.
• This led me to learn other html can be used freely within SVG

[wattahay]

I updated the example
Old XBox Controller.json (451.6 KB)

Best I could do is update the tooltips, but I couldn’t add buttons or anything. Let me know if there’s a solution to that.

A good use for this might be to create diagram menus, that look like MS Visio flow charts to serve as menus or visual aids.

[buggyj]

This thread has stuff about buttons in svg:

SVG <g> element as <$button> widget

I’ve been working on a complicated interactive SVG infographic, and I’ve learned I can use <$link> widgets to make ordinary <a> tags within it. I’ve been trying to create the SVG element as something within the TiddlyWiki widget tree. So, I’ve been trying to create the tag using <$button tag="g">. But then the particular <g> curve doesn’t render. Wrapping the <g> in a <$link> does work, and I understand that it creates a neutral <a> element wrapping the <g> element. But using <$link> I can on…

[TW_Tones]

Thanks to this thread I have managed to return to satisfy a desire to get images or perhaps more importiantly diagrams which represent common venn diagram relationships. I just wanted to make a set of svg’s that can be edited and used to represent such combinations visualy. But I want to also allow links from those diagrams, which is solved as a result of theis thread.

Of course I am lazy and using an LLM to generate these, but in this case it is a quite deterministic request, and ChatGPT is quite knowlegble about SVG’s.

• The diagrams have lables for each region resulting using set annotations, but appear in the wrong place, when you deside the names to use your will need to nudge them into place.
• It would be possible to wrap a link around each label using the methods in this topic. In some maybe even a region.
• With some the lable only appears if in a tiddler with the type “image/svg+xml”

Anyone want me to share these here?, or shall I in a seperate topic?

[TW_Tones]

@wattahay

Adding Links

Surround the <path /> tags with Tiddlywiki <$link> widgets

The following 2 SVG’s are for two common forms of venn diagram that you could apply the above hints to, perhaps just the labels are sufficent?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180" width="300" role="img" aria-labelledby="title desc">
  <title id="title">Two overlapping circles with labels</title>
  <desc id="desc">Left circle A, right circle B, overlap labeled A ∩ B</desc>

  <!-- circles -->
  <circle cx="120" cy="90" r="70" fill="rgba(0,136,255,0.35)" stroke="#1f6fb2" stroke-width="3"/>
  <circle cx="180" cy="90" r="70" fill="rgba(255,0,128,0.35)" stroke="#b21f6f" stroke-width="3"/>

  <!-- labels -->
  <g font-family="system-ui, sans-serif" font-size="20" fill="#111" text-anchor="middle" dominant-baseline="middle"
     style="paint-order: stroke; stroke: #fff; stroke-width: 4">
    <text x="90" y="90">A</text>
    <text x="210" y="90">B</text>
    <text x="150" y="90">A ∩ B</text>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 230" width="320" role="img" aria-labelledby="title desc">
  <title id="title">Three overlapping circles with labels</title>
  <desc id="desc">Labeled Venn diagram of sets A, B, and C with intersection labels</desc>

  <!-- circles -->
  <circle cx="140" cy="100" r="70" fill="rgba(0,136,255,0.35)" stroke="#1f6fb2" stroke-width="3"/>
  <circle cx="180" cy="100" r="70" fill="rgba(255,0,128,0.35)" stroke="#b21f6f" stroke-width="3"/>
  <circle cx="160" cy="150" r="70" fill="rgba(255,215,0,0.35)" stroke="#c49b00" stroke-width="3"/>

  <!-- labels -->
  <g font-family="system-ui, sans-serif" font-size="18" fill="#111" text-anchor="middle" dominant-baseline="middle"
     style="paint-order: stroke; stroke: #fff; stroke-width: 4">
    <!-- individual sets -->
    <text x="90" y="85">A</text>
    <text x="230" y="85">B</text>
    <text x="160" y="195">C</text>

    <!-- pairwise overlaps -->
    <text x="160" y="65">A ∩ B</text>
    <text x="120" y="140">A ∩ C</text>
    <text x="210" y="140">B ∩ C</text>

    <!-- triple overlap -->
    <text x="160" y="115">A ∩ B ∩ C</text>
  </g>
</svg>

I am experimenting with other forms and additional unions but these two possibly for 60% of the most common ven diagrams. Any way when you go above three other shapes are needed like this;

This is interesting but wrong.

Doing 4 n 5 region union disagams are difficuly of not prohibited by 2d maths

[TW_Tones]

@TW_Tones

Doing 4 n 5 region union disagams are difficuly of not prohibited by 2d maths

interestingly, this may be related to the “four colour theorem”

[Scott_Sauyet]

@TW_Tones

Doing 4 n 5 region union disagams are difficuly of not prohibited by 2d maths

They are not impossible, and Venn himself did four- and five-combinations ones, but it’s provable that they cannot be done with circles alone. I believe there are constructions to allow for arbitrary numbers, but they are usually done with more and more unwieldly shapes. I know I’ve seen more pleasing versions of four, and maybe of five as well. But these are probably hand-drawn, not using such constructions.

[wattahay]

SVG Image Maps From PNG Using Inkscape

This thread has stuff about buttons in svg:

SVG <g> element as <$button> widget

I’ve been working on a complicated interactive SVG infographic, and I’ve learned I can use <$link> widgets to make ordinary <a> tags within it. I’ve been trying to create the SVG element as something within the TiddlyWiki widget tree. So, I’ve been trying to create the tag using <$button tag="g">. But then the particular <g> curve doesn’t render. Wrapping the <g> in a <$link> does work, and I understand that it creates a neutral <a> element wrapping the <g> element. But using <$link> I can on…

Brilliant. I forget to re-check the forum when new question arise after the old ones.

Thank you for your examples in the thread. I am able to use it around individual elements inside the <g> tags. I’m pretty sure it will work in multiple locations with a parameter to modify the macro/procedure.

And this is also built in to TiddlyWiki, because I originally did not want to use it thinking it was a custom widget.

• https://tiddlywiki.com/#Core%20Widgets
• https://tiddlywiki.com/#TriggeringWidgets
• https://tiddlywiki.com/#LinkCatcherWidget

[Springer]

@TW_Tones

I just wanted to let you know there is one very useful lesson here for me, even if one does not go to the effort of using inkscape etc…

@wattahay

Surround the <path /> tags with Tiddlywiki <$link> widgets

Thanks for highlighting this! I’ve just tried out the same. Since I have many svg projects, often serving some kind of diagramming function, this is a perfect tip! (Until now, I’ve settled for putting links into text objects embedded in the svg, but it’s ideal to have the whole shapes function as links!)

Edit to add: If you want a cursor to help viewers recognize the link, you’ll need a special style declaration, as in this model:

<svg viewBox="0 0 350 250">
  <$link to="svg fun"><circle cx="225" cy="85" r="80" fill="red" class="flex-circle"/></$link>
<style>
.flex-circle { cursor: pointer; } 
</style>
</svg>

[wattahay]

Hold the phone.

Where do the text objects show up? Can you control their location?

<$text>text object </$text>

[Springer]

Sure, here’s a working demo of a dynamic svg with bits of embedded text, drawing from fields and such, one of which is a link.

[wattahay]

<foreignObject x="64" y="50" width="150" height="120"><body>@@.hlw  {{!!left_label}} @@</body></foreignObject>

What is the point of @@.hlw ---- @@

[Springer]

@wattahay

What is the point of @@.hlw ---- @@

The syntax @@.class-name @@ syntax allows application of a css class to whatever comes between the @@ flags. See documentation here.

This is much more efficient than micro-managing the colors for each label etc. I can change the definition of the hlw class once, and the change propagates throughout the wiki wherever it’s being used. Also, a style like this can include dynamic elements, such as palette-responsive colors. I originally called it hlw because it was personal shorthand for “highlight-white” — a pale background color for whatever was inside. In this demo, it has morphed a bit from that model.)

[wattahay]

There is a pretty big pool of things to do with svgs.