Interactive SVG Image Map Not Responsive

[Spooky Noodle]

ANSWER: When you're editing a Tiddler, edit the 'Type' from image/svg+xml to application/x-tiddler. Copy and paste your svg code into the box. You can clean up your code here. Don't embed your background image, reference it using CSS-- style="background-image: url('fil:///./images/worldmap etc--.

TiddleWiki seems like the ideal format for organizing my D&D notes, as recommended by a couple of friends. Additionally, I tend to use .svg's for world maps, with interactive behavior added in that allows me to 'click' on a region, and go to that page. 

Currently, I have an svg map set up, but I'm having enormous difficulty inserting it into TiddlyWiki, because the file is enormous (for an svg), so when I open up notepad, and copy-paste the text into the box for the new Tiddle, my whole computer lags, trying to manager that enormous amount of text in my clip tray. I haven't found a way to upload the image file directly into the tiddle, when I click and drag it into explorer, the following happens:

https://gfycat.com/eachevergreenguernseycow

Whenever I open the svg in a browser, or insert it accidentally using the process I showed above, the image behaves as desired, with areas highlighting when my mouse hovers over them and allowing me to click them to travel to links (I cut out those parts while I create the rest of my wiki). 

https://gfycat.com/entirevainindianpangolin

However, the image obviously does not scale, and I'm not sure that it would link to other Tiddles if I were try and use it in this fashion. 

When I use the method described in the second paragraph, where I copy and paste the text contents of the svg into a tiddle (which is enormously tedious), the image inserts correctly, and it scales to fit the window, but the image's interactivity is totally absent:

https://gfycat.com/elaboratewatchfulbichonfrise

So I guess my questions are as follows:

1. How do I insert svg images into a locally hosted Wiki, without having to deal with the hassle of copying and pasting everything over?
2. How do I restore the interactive functionality of the svg, so that these areas highlight and fade when the mouse hovers over them? 

Also, this is kind of a sub question, but how do I insert those links into images when I'm hosting locally? I obviously can't link to a website, since the files are hosted on my computer, but how do I link them? (This is probably explained somewhere else, just figured I should ask while I'm here.)

[PMario]

Hi,

I did have a closer look into your "svg" file. ... The svg elements are only used to create the hover effect. ... The image itself is an embedded JPEG with 5025 x 3225 pixel.

JPEG is a binary image format. ... To embed it into a text based image format, like SVG, the binary data has to be transformed into a so-called base64 text format, which makes the data even bigger. ...

In short. With a construction like this, you'll never get happy. ...

You'll either need to get real SVGs (best option). .... Or you should try to get your hands on the original JPEGs and split them into smaller pieces. ... Those JPG images could be used as a tiddler background image. ... But that doesn't solve the interactivity problem.

I don't have a good idea here, but it should be solvable.

There is only 1 question left. ... Do you own the image rights? ... Otherwise we would get a copyright problem.

have fun!

mario

[PMario]

Hi,

I did a quick search for "open source dungeons and dragons map creator svg" and found: https://azgaar.github.io/Fantasy-Map-Generator/

and https://github.com/Azgaar/Fantasy-Map-Generator/wiki

It can export real SVGs. It should be possible to integrate them into TW in a very interesting way.

The City-Editor links to a different project.

have fun!

mario

[Mat]

https://gfycat.com/eachevergreenguernseycow

It looks to me like you're not dropping it on the green drop zone are. I'm sure you've tried it but see if you can let go of it a little higher up towards the top edge of the wiki. Also test it on e.g tiddlywiki.com to see if you get different behaviour.

<:-)

[Spooky Noodle]

You are correct, the file is a JPEG with an SVG overlay. However, while I understand the file is quite large, I also know that such functionality is possible, because I based my method on this tutorial:

https://www.youtube.com/watch?v=8WJU4Foku98

As you can see, he creates a jpeg + svg hybrid, with the same interactive functionality as is desired. The tutorial uses wordpress, however when I attempt to embed the file into wordpress using the tutorial (and perhaps I need to watch it again, it has been a few days), I get the same response, where the image is static rather than dynamic as desired, and as illustrated in the video. 

After dipping into the code, it looks like the problem is that TW keeps tossing the image into an img tag, rather than as an svg tag, but I'm not sure how to rectify this issue and format it properly on my own. 

[Spooky Noodle]

I came across this website, and many others, in my search for a solution, however the website focuses on procedurally generating maps, specifically coastlines for continents ,which is not the functionality I need. I need to take an image, that I already have, and create highlightable areas, so whle the tool is intriguing, it does no serve the purpose I'm looking for here. 

[Spooky Noodle]

I had some success! I forgot the parts of the tutorial, where the user had to insert some specialized css code. 

They had to install a special plugin, called 'SVG-Support', but that was mostly to allow me to upload svg files to wordpress, since they're typically a security risk. 

But, I had to enable an option 'Automatically Insert Class', then I had to look at the HTML and change everything that said `class` to be `class="style-svg"` in the image, AND I had to set something in the default CSS class for the whole site, at the top:

.style-svg {

       max-width: 100%;

       height: 100%;

}




Then, everything was highlightable, linkable, everything. Problem is, not a fan of WordPress' format, and I'm not sure how to fix that in the HTML for TiddlyWiki, which would be my preferred method. 

I was also able to successfully import the image using the method @Mat described, and insert it using {{file title.svg}}, and it was super easy, no hanging, easy to edit, and it scaled just fine, but didn't have the interactive funcionality like the wordpress site did after editing it as described above. So, I guess my question is, is there an easy way to change CSS classes globally across the site? Like, a way to automatically inject `style-svg` as the default tag? At least, that's what I assume it's doing, I don't really know. 

[A Gloom]

Something that may apply to your case.  I am currently working on a svg tiddler using a jpg background as I type this...

If your svg is huge file size wise, it probably cause the jpg it uses is embedded into the svg.

Since the jpg embedded in the svg doesn't need the interactivity (the svg code is the interactive part)...

the jpg doesn't need to embedded in the svg but can be linked to like so...

<svg  xmlns:svg="http://www.w3.org/2000/svg"  xmlns="http://www.w3.org/2000/svg"  
 xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 1024 1024">
<style>
</style>
<image xlink:href="file:///D:/00/1fkitcity/stormsmuth/mapcityL301.png" x="0" y="0" height="100%" width="100%"/>
<text class="maptextlrg2" x="920"  y="80" style="text-anchor: middle;">COASTAL</text>
<text class="maptextlrg2" x="920"  y="110" style="text-anchor: middle;">REGION</text>
</svg>

this way the jpg is called to load as a background layer.

you may have to re-edit and re-save your svg to get rid of the base64 encoding in the svg.

and insert the svg alone into the tiddler, if the jpg is in the path you enterrd in the code above it will display.

[Spooky Noodle]

I went onto the unofficial Discord and harassed @Pmario there 😅, and I think we've identified the cause of the problem. The SVG uses interactivity defined in a way that is considered "unsecure" by many websites, including WordPress and TW. I'm not certain how this is achieved, because I know exactly -1 things about CSS, but Pmario said he was going to tinker with it somewhat and get back to me.

I am really intrigued by the idea of overlaying the SVG on top of the JPEG, but I am confused: would they scale properly? Both with the window, and with each other. 

[PMario]

Hi @A Gloom

Yes. That's 1 way to optimize the image size. ... The interactive part can probably done with some TW stylesheets and some manual svg tweaks.

I did remove the JPEG and the svg is still 600k. I have ideas to reduce this size drastically.

I need to make more tests.

-m

[A Gloom]

Spooky Noodle, (interesting & amusing handle : ) )

I went onto the unofficial Discord and harassed @Pmario there 😅, and I think we've identified the cause of the problem.

excellant, he's very knowledgeable

 

The SVG uses interactivity defined in a way that is considered "unsecure" by many websites,

Yes, svg's are basically xml (html) files not the standard raster image format, so they can contain code (including javascript) that can run foul of sandboxing.

 Another thing I just thought of about your file size-- vector graphics editors (Inkscape, Illustrator) often leave a lot of unnecessary code in the svg's they create which can cause increased file size (bloat).  With Inkscape svg's I often strip out half the coding they put in.

I am really intrigued by the idea of overlaying the SVG on top of the JPEG, but I am confused: would they scale properly? Both with the window, and with each other. 

the jpg scales with the svg because the svg is its container so it takes on the svg's dimensions-- svg's can be tricky in general with its scaling-- here's an article about such: https://css-tricks.com/scale-svg/ -- you see it can be confusing.  I run Windows at 150% dpi which complocates things even further.

I'm still composing the post but I was going to introduce svg tiddlers as overlays where you can annotate with text of shapes, any external graphic images (including screenshot) without having to edit or effect the original image.

This where I guess I get tp brag.  My TW is for indexing all previous work and developing a interactive novel and video game with it.  It has over 60 svgs of varying types:

-- internal svg tiddlers

--- with CSS mouse hover effects, tooltips and links to tiddlers

--- one is a graphic map ToC in the sidebar with the labels being the links instead of ToC entries

--- (I hand code these in TW (preview panel shows the graphic real time as I edit it)-- if they don't require complex paths (curved lines) which I make just the path in Gimp or Inkscape and cppy & paste the path code into the svg tiddler)

--- I can export those svgs as independent svgs using a custom plain text export format so they can be used outside of the wiki

-- internal svg tiddlers acting as overlays for external grephic images

-- external svgs by theirselves (displayed with a wiki external image link) or in container html pages (displayed with a iframe tiddler)-- this I do for svg's containing or using javascript

--- also thats how I do section slices of a much larger svg for area closeups, without having to create new svgs-- all the section maps use the same master svg without altering it

--- nifty thing with external svgs is dungeon maps that display one room initially and progressively display the next by clicking say a doorway-- all on the same svg image-- the whole map is there but invisible till a click tell it to display an invisible part.

-- the svg with tiddler links-- if you give the full wiki address (ie: wikiname.heml#tiddlername) in the internal svg links, you can have an external svg (not part of the wiki but displaying in its own browser tab) that will open up the wiki to that tiddler.  I created a svg index of the wiki for my partner in lunacy because all the sidebar tabs I have overwhelms them, the map makes it easier for them to look things by places.

--- one disadvantage-- the linking to tiddlers if the link is outside the wiki, can be same tab as svg, where you would have to use "back" to return to the svg, or each link will open a new browser tab-- I had a mad coder experimnent planned for linking with an external svg planned today >> <<

I may have gone overboard with svgs,,, and then there's .x3d 3d models...

[A Gloom]

Hello PMario

 

I did remove the JPEG and the svg is still 600k. I have ideas to reduce this size drastically.

I need to make more tests.

 I just remembered about vector editor bloat-- so I think I know how you're going to trim it down : D

TW stylesheets-- I been experimenting with internal CSS tied to hover effects after a similar suggestion from Jeremy concerning alternatives to js for svgs-- been successful so far.

[PMario]

On Saturday, July 6, 2019 at 12:44:24 PM UTC+2, A Gloom wrote:

Hello PMario

 

I did remove the JPEG and the svg is still 600k. I have ideas to reduce this size drastically.

I need to make more tests.

 I just remembered about vector editor bloat-- so I think I know how you're going to trim it down : D

Yea, I know InkScape quite well. ... But here it seems to be from converting Text -> Paths ... That's good, so you don't need to have the font installed. It's bad because it creates bigger SVGs. ...

But this will be an easy fix. once the hovering the linking is worked out.

IMO the scaling issues are no real problems. ... JPEGs can be XLinked as you wrote in your first post. ... So I think we can even keep the 5000x3000 huge ones, if everything is needed local.

but I need to fix this first :/ And I'm getting distracted way to easily ;)

-m

[Spooky Noodle]

So, I've done a fair amount of discussion with PMario on the Discord, but I just went on vacation, so I won't be on Discord much (which also means if you need to get in touch, here is the better place to do it). 

 But here it seems to be from converting Text -> Paths

Yes, that was deliberate on my part. When I originally had it as text, when I went to click on an object, I kept highlighting the text instead of activating the hyperlink, which is what I was intending to do. So, I converted the text to paths, so that I could still read the labels, but go straight into the area, rather than accidentally highlighting the text when I click on it. 

TW stylesheets

I'm not sure how this is different/similar to regular CSS, since I don't even know anything about CSS anyway >_<

I've uploaded a file, which is just the paths grouped into each location that, and labelled properly. So, the "text layers" that have been converted into paths are gone, the background jpeg is gone, it's just the path outlines and Labels/ID's, since I wasn't sure which one would be helpful/necessary. 

It seems evident that I can define opacity in the following way:

.zone:hover {
opacity:1
transition: 1s
}

<g class="zone"

       id="Old_Svalich_Road"

       inkscape:label="Old Svalich Road"

       style="fill:none">

      <path

         sodipodi:nodetypes="aaaaaaaaaa"

         inkscape:connector-curvature="0"

         id="path5219"

         d="m 733.2591,459.98363 c 1.88541,-1.22344 4.48191,[etc, etc, etc]"

         style="fill:none" />

      <path

         sodipodi:nodetypes="aaaaaaaaaaaaaaa"

         inkscape:connector-curvature="0"

         id="path5221"

         d="m 686.85224,478.31327 c 1.40937,[etc, etc, etc]"

         style="fill:none" />

    </g>

Obviously the path doesn't actually say 'etc, etc, etc', I just put that there to save space. 

At least, that's what I'm assuming I'd need to do, I'm shooting in the dark. 

Now, after that point, I'd need to define how to upload it into TW, so that it isn't input in an image tag, but rather as an svg tag, AND put the jpeg in the background, so they line up properly, AND put the text back in. 

Are the text -> path thingies only a problem because of space? Or could they be causing problems with the interactive hover behavior? 

Can you guys also point me in the direction of resources I could read to try and get this done for myself? Pmario is super busy with his own projects, and I don't wanna bother him too much, but I do wanna be working on this as I can. 

Thanks guys!

[A Gloom]

Spooky Noodle

As long as I'm not interferring with what PMario is doing to help you, I'll look at it.

 

Yes, that was deliberate on my part. When I originally had it as text, when I went to click on an object, I kept highlighting the text instead of activating the hyperlink, which is what I was intending to do. So, I converted the text to paths, so that I could still read the labels, but go straight into the area, rather than accidentally highlighting the text when I click on it.

I'll have to look at your svg, but I'm thinking the text might be overlaying the object and blocking the object click area-- might be fixed with "cursor-event:none:" which will may the text invividle to the mouse pointer.  I'll let you know after I check out your svg.

 

I'm not sure how this is different/similar to regular CSS, since I don't even know anything about CSS anyway >_<

no problem, svg's are basically html (xml) files so they can get as complex as a web page,but you shouldn't have to mess with TW unless you want to create a custom  sylesheet for all your svg's to share.  Svg's can heve their own CSS embeded directly into its code or a <style> declaration in the tiddler containing it-- hers's an simple example of doing it in TW:

http://tobibeer.github.io/tb5/#Interactive%20SVG%20Image%20Map

 

Can you guys also point me in the direction of resources I could read to try and get this done for myself? Pmario is super busy with his own projects, and I don't wanna bother him too much, but I do wanna be working on this as I can.

here's somethings to get your started

https://medium.com/@mattcroak718/creating-an-interactive-map-using-svg-and-css-94a688c11bd6

you'll get a "do not track" warning (a prvacy matter warning) with FF on that pages embedded example-- it will up to you how to proceed

http://www.petercollingridge.co.uk/tutorials/svg/

this site as discusses using javascript so ignore them for now-- you can't use those js example's in TW

also do a Google searh for "svg interactive css" and you'll get some good ref's

[A Gloom]

at Initial glance:

those fill:none; for the elements-- in-line styling of an element overrides all other styling and can interfere with trying to manpulate their styling

now don't go channging anything just yet-- I have to invert the colors on evertyhing so i can look at your map-- the white... it burns!  appropriate for a Raven Loft map : D

Here's something for you tp look over, put it into a tiddler and experiment with-- uses buttons & hover to show different invisible text, I'll also post some partial svg's with outside hover css like Tobias (in the tb5 link) and a map with roads that have their own hover/tooltip/links.  My examples will look different from Inkscape coding because I often hand code my svg's.

[Spooky Noodle]

It seems that, right now, the main problem is that I can't get TW to reference the image in a format that works. Even if I change the content type to `svg` and copy-paste the contents in, it still nests it within an img tag, which kills all interactivity, regardless of whether it's defined in a stylesheet or using Inkscape's funky method. 

Do you know a way of inserting images that uses the svg or object tags, rather than the img tag? 

[A Gloom]

On Monday, July 8, 2019 at 4:10:11 PM UTC-4, Spooky Noodle wrote:

It seems that, right now, the main problem is that I can't get TW to reference the image in a format that works. Even if I change the content type to `svg` and copy-paste the contents in, it still nests it within an img tag, which kills all interactivity, regardless of whether it's defined in a stylesheet or using Inkscape's funky method. 

Do you know a way of inserting images that uses the svg or object tags, rather than the img tag?

 

 yep-- iframe, object, embed all work iirc. but they probably have the same issue--

<iframe src="filename.svg" frameborder="0"></iframe>

<embed src="flename.svg" type="" />

<object data="flename.svg" type="image/svg+xml"></object>

Inkscape's interactivity got me scratching my head, I ain't getting any either-- got your second attachement in my wiki and can see your hover zones-- I'm goin to have try the full file in case something got removed in the second attachment

[A Gloom]

what I have found so far...

One way to get around the <img> tag

Import your svg-- you will get a tiddler of it that uses the <img> tag.  Open it to edit it, click anywhere in the text field so the tile bar isn't high lighted, press Control  A to select all, then Control V to copy.  Close the tiddler.  Create a new tiddler, paste what you copied into, give it a title and close out of edit mode by clicking the tiddler's checkmark (upper right corner).  Don't worry about setting a type-- it will display the svg.  You can deleted the impoerted tiddler.

With your map, I believe its the onmouseover that Inkscape uses-- from what I've seen, onmouseover is used to invoke javascript which isn't allowed inside tiddlers.  Funny, I didn't see any script references in the svg, But thats why I can have your map in its own tab and working as advertised and in the next tab have it in a TW and not functionality- TW blocks scripts if your file is using js.

I actually loaded your original 5 meg monster in a test wiki 0.o  Stripping out the background and changing the background-- I got this-- this looks like all your hover zones (nothing was done to make then standout)

[Spooky Noodle]

I've made some progress, but GG keeps deleting my message, so I can't detail or show evidence of what I've done. Not sure what's going on, this is the third time I've typed this out. 

Interactivity is working. I can't show you what I did to make it work, because GG will just delete it again, but it's working, using a stylesheet.

1. Whenever I hover over the area, the text path--and only the text path-- shifts in position a little, despite that behavior not being defined anywhere in the SVG or the stylesheet. 
2. The text file is still super bloated, so it's a huge pain to edit, but I have no idea what is or is not safe to delete. 
3. There's no background picture, just the zones, which makes things a little difficult, since that was the entire purpose of getting these images together. I'd love to define the jpg (which I've uploaded to the wiki) as the background image for the svg, but I don't know how to do that, and because the text is so bloated, I can't tinker around to find what works. 
4. The image was scaled improperly, and I had to manually edit the height down to get rid of a strange layer of upper padding. No idea why Inkscape would mess it up so much, but it did, and that suggest to me that perhaps the jpeg background wouldn't scale properly either.

If GG deletes my message a third time, I guess I'll just give up on this thread and keep bothering my cousin, but for now, fingers crossed. 

On Monday, July 8, 2019 at 5:56:55 PM UTC-6, A Gloom wrote:

what I have found so far...

One way to get around the <img> tag

Import your svg-- you will get a tiddler of it that uses the <img> tag.  Open it to edit it, click anywhere in the text field so the tile bar isn't high lighted, press Control  A to select all, then Control V to copy.  Close the tiddler.  Create a new tiddler, paste what you copied into, give it a title anI'd close out of edit mode by clicking the tiddler's checkmark (upper right corner).  Don't worry about setting a type-- it will display the svg.  You can deleted the impoerted tiddler.

[A Gloom]

I've made some progress, but GG keeps deleting my message, so I can't detail or show evidence of what I've done. Not sure what's going on, this is the third time I've typed this out. 

Understood, GG has done it to me before

 

Interactivity is working. I can't show you what I did to make it work, because GG will just delete it again, but it's working, using a stylesheet.

cool

1. Whenever I hover over the area, the text path--and only the text path-- shifts in position a little, despite that behavior not being defined anywhere in the SVG or the stylesheet. 

 

1. The text file is still super bloated, so it's a huge pain to edit, but I have no idea what is or is not safe to delete. 

I know -- all the scrolling up and down with even the small file

 

1. There's no background picture, just the zones, which makes things a little difficult, since that was the entire purpose of getting these images together. I'd love to define the jpg (which I've uploaded to the wiki) as the background image for the svg, but I don't know how to do that, and because the text is so bloated, I can't tinker around to find what works. 

you can tell Inkscape to link to the background jpg, what you have to do is import it again into your svg in Inkscape and there's options on the right of the import popup window to embed or link-- use the link option and Inkscape will do the linking for you. 

 

1. The image was scaled improperly, and I had to manually edit the height down to get rid of a strange layer of upper padding. No idea why Inkscape would mess it up so much, but it did, and that suggest to me that perhaps the jpeg background wouldn't scale properly either

Inkscape was made for print vector graphics so it always wants to center the image in its page-- the to the right and down offset drove me nuts but i figured through arcane settings and saying the words right (Evil Dead reference)

your jpg won't be aligned right with your new alignment but that can be corrected

I have some edits to show-- hover highlighting, links-- next post

[A Gloom]

Attached is a tiddler with edits I did to the ladt four hover zones for high lighting and links. Its in plain text since its not a complete svg but the code can be copy and pasted into a svg.

Its done with light colors on dark background cause I can't work with light backgrounds due to my eyes

Here's one for example

<g><a href="#Van_Richten_Tower">
    <path class="hoverz1"
       style="stroke:none;stroke-width:0.06992456px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 476.58257,404.90664 c 0.97519,1.93218 2.57802,3.7967 4.59124,4.59124 2.60767,1.02916 5.69433,0.4307 
8.4055,-0.28254 3.54424,-0.93239 8.40814,-1.67438 9.74756,-5.08568 1.23293,-3.14011 -1.31075,-6.87948 
-3.39046,-9.53565 -1.94848,-2.48857 -4.78182,-4.78269 -7.91106,-5.22696 -2.58795,-0.36741 -5.35419,0.82014 
-7.48726,2.33094 -2.25185,1.59494 -4.27418,3.9628 -4.94441,6.63964 -0.53782,2.14804 -0.009,4.59218 
0.98889,6.56901 z"
       id="Van_Richten_Tower"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="aaaaaaaaa"
       inkscape:label="Van Richten's Tower" /><title>Van Richten Tower</title></a></g>

the <g></g> is for the tooltip -- the <title> if you want tooltips with your mouse over. 
If thats something you wouldn't want, remove <g><title>Van Richten Tower</title></g> 

the <a href="#Van_Richten_Tower"> </a> is for links to tiddlers-- all you need is #tiddlername 
if used in a svg tiddler

the class name "hoverz1" is for mouse over-- in CSS you use hover for styling

normally you also define the normal (non hover) state along with the hover in the style section 
but for some reason I didn't have to with your example file.

<style>.hoverz1:hover {fill:white;}</style>
<-- put before <defs> at top of file -->

Important thing is you have to remove any matching styling on the elements that you define 
in the style section-- I had to take the opacity and fill-opacity off of each element I geve the hover 
effect class to.

Also if you want the hover effect to work indeprndently for each hover zone, they get the class not a group-- 
if the group gets it then each hover zone of that group will cause the rest of the group also to high light. 
So grouping a hover zone with its text as a pair and giveing their group the class would eork-- experimenting
will show you what works.  Though with a file this large you're probably getting typing lag if you have the 
editor preview window open.  If your file length is causing your preview window to disappear off screen, set 
the editor window size to 600 in the editoe toolbar.

[Spooky Noodle]

So, I've done an enormous amount of tweaking, and I have something that mostly works, for my purposes, which has been attached. The global stylesheet is as follows:

.image {
       max-width: 100%;
}

.hover {
        opacity: .4 !important;
        transition: .1s ease
}

.hover:hover {
        opacity: 1 !important;
}

.circle {
       opacity: .70 !important;
       fill-opacity: .70 !important;
}

.text{
        fill: #fff;
        stroke-width: 0.1;
        stroke: #000;
}
.red{
        fill: #800000;
}
.blue{
        fill: #008080;
}
.green{
        fill: #008000;
}
.dark-blue{
        fill: #0e0e72;
}
.purple{
        fill: #800080;
}
.yellow{
        fill: #808000;
}

As of right now, the background image does not scale with window-width, though the SVG elements do. 

Additionally, items in the 'text' class will shift slightly up and to the left when their zone is hovered over, but not for all images. For example, download the svg and hover over the 'Lake Zarovich' area, and compared that to the 'Castle Ravenloft' area. On my computer at least, the Ravenloft text shifts when hovered, but the Lake text does not. 

I've edited my original response, so that if someone comes across this post in the future, they'll be able to get to the core of the issue, which is the content type. 

However, I'd still like your help in better syncing up the background image, and in figuring out this weird jiggly business. Oh, also! Is there any way to use a relative filepath, or better yet a Tiddler, as the background image, rather than an absolute filepath? 

This isn't an issue for this image, but it does play a part in my project: is there a way to "crop" an svg, so that the image and background are still lined up with each other, but the actual window displayed is just a small portion? And is there a way to do this without stretching the image in any way? 

[Spooky Noodle]

Okay! I've got things mostly working, but there's still this weird thing, where the text layers shift strangely when I hover over the shape. 

So, the only thing that I'm still trying to figure out, is how to "crop" the SVG, so that I'm looking at one specific area. 

Is there a way to tie the background and svg together, so that if I change the viewbox (which I'm assuming is the best way to accomplish what I'm looking for), the areas would still be lined up?

[A Gloom]

sorry for the delay-- good to hear you ironed out most of the issues-- its hard work but worth it in the end

Is there a way to tie the background and svg together, so that if I change the viewbox (which I'm assuming is the best way to accomplish what I'm looking for), the areas would still be lined up?

with a lot of tweaking of the external postioning of background & svg (not the viewport I believe) -- right now they're 2 separate objects currently.  Best bet is to get that background image to display inside the svg "container"

Or watch for my next posting-- layered image tiddlers, composing it currently.  Allows for easy scaling and lining up of separate image layers in a tiddler.

So, the only thing that I'm still trying to figure out, is how to "crop" the SVG, so that I'm looking at one specific area.

yes, svg's allow you to set viewport that will display just a section section of a larger svg without deleting the cropped out portions.  I use it for making closeup snapshot "section" svgs of a much larger separate image.  Let me post the code when I get a chance.

BTW- shifting of text on hover I believe is cause you used stroke & stroke-width which invreases the size of the text, its line hright and letter spacing.  Foe svg, font colors are handled by fill and using stroke adds an outline to the font, but still a cool effect for highlighting colored text.

[A Gloom]

kk

testing with a svg with external background jpg display with svg's internal image tag mouse hover and links-- this previously worked inside the TW that I hand coded it in but after exporting it (have a custom export template for exporting svg's from TW) and re-importing back into the same TW...

when you import a svg, or copy & paste to create a type "image/svg+xml" tiddler,which embeds the svg in an image tag-- not only does it negate interacticity it also breaks any image insertion using the svg internal image tag (probably will break any external source use tags).

What I have done to correct this is after importing, change type from "image/svg+xml" to "text/vnd.tiddlywiki", the internal svg image tag works and interactivity is restored.

so theorically you should be able to use <image xlink:href="northbordrnsml.jpg" x="0" y="0" height="100%" width="100%"/> and add transform="translate(x,y)" to match the annoying shift Inkscapr applies to everything by default.

[Spooky Noodle]

So, this is one of the final maps I have. Interactivity is great, background image is great (the other maps use image, rather than background-image in the style), the links are all working perfectly, I've got a unified style set up for text. 

But the problem is: I keep getting this weird, jiggly effect on certain items of text. Large text items don't have it, but smaller text items do. One thing I did notice, when I took an image that had jiggly text, then changed the width, height, and viewbox to "zoom in" on an area, the jiggling actually stopped, even though the code for that area specifically was identical. So, does that mean it would be a rendering error?

[A Gloom]

So, this is one of the final maps I have. Interactivity is great, background image is great (the other maps use image, rather than background-image in the style), the links are all working perfectly, I've got a unified style set up for text.

Excellent to hear of your success.

 

But the problem is: I keep getting this weird, jiggly effect on certain items of text. Large text items don't have it, but smaller text items do. One thing I did notice, when I took an image that had jiggly text, then changed the width, height, and viewbox to "zoom in" on an area, the jiggling actually stopped, even though the code for that area specifically was identical. So, does that mean it would be a rendering error?

jiggly as in an actual contast "motion" jiggle (like an animation motion)-- probably is a randering issue then if it does it independently of any interaction-- kinda like a surface clash jitter in video games.  I have to change the backgroung of the svg or the text colors on you svg before i can look at its visual output.

Did you get the viewports figured out as well?

[Spooky Noodle]

jiggly as in an actual contast "motion" jiggle (like an animation motion)-- probably is a randering issue then if it does it independently of any interaction

Well, it only happens when I hover over the object. And it's less of a jiggle, and more "when highlighted, text moves 6 pixels to the left and 3 pixels up" and "on mouseoff, text moves back to original position." I have no idea what causes it, or why it happens for certain text objects, but not for others. The code for the two areas is identical, with the exception of the path. 

I did get the viewports figured out! What I did, is I would go into Inkscape, create a 'clip' over the objects I needed, set document size to crop in close around that area, then copy and paste the width, height, and viewport from that svg, to the old one, so I didn't have to tell with all of Inkscape's bloat. Oh, I also needed to include the transform property from the "cropped" svg, and paste it into the group that contains all the interactivity zones, but after that, it's cake!

[A Gloom]

Well, it only happens when I hover over the object. And it's less of a jiggle, and more "when highlighted, text moves 6 pixels to the left and 3 pixels up" and "on mouseoff, text moves back to original position." I have no idea what causes it, or why it happens for certain text objects, but not for others. The code for the two areas is identical, with the exception of the path.

 I can only think it would be the CSS then-- with mouseover, the hover styling takes over and potentionally can change styling of the text which could cause a shift..

[Spooky Noodle]

This is something of a different issue, but I thought I might as well ask it here:

toc-tabbed-internal-nav and toc-tabbed-external-nav seem to do this really interesting behavior, where it has the table of contents in a fixed position, but open the page in another window. 

I was wondering if there was some way to accomplish a similar effect, but with the 'toc' being an image. 

My ideal situation is that I have a 'map of the floor' on the left hand side, and then the page that I click on opens in the right tab, while still being able to view the map on the left. But, when I click a specific hyperlink, either in the text or in the svg image, then I "go to the next floor", and the svg image changes, allowing me to access a different set of "rooms" (ie tiddlers). 

Does what I'm describing make any sense? Is it something that can be effectively done in TW? 

On the left hand side (or right, it doesn't particularly matter), there'd be a 'map tab' or 'map window', showing a map of the current area. I'd be able to click on hyperlinks within the map to open up specific Tiddlers for each 'sub area,' with those tiddlers appearing on the other side, so that I can view the map and the notes at the same time. 

Certain hyperlinks, as specified by me, will have new maps available to them, and when I click on them, the image in the 'map tab' will change (and it'd be nice if all the tiddlers in the notes half disappeared as well, but that's  not super critical). 

Then it will behave as before, where I can click on sub regions, which open up notes in another tab so that I can view them side by side. Then, clicking another 'region' hyperlink will change the maps+notes again. 

[A Gloom]

On Wednesday, July 3, 2019 at 10:22:05 PM UTC-4, Spooky Noodle wrote:

ANSWER: When you're editing a Tiddler, edit the 'Type' from image/svg+xml to application/x-tiddler. Copy and paste your svg code into the box. You can clean up your code here. Don't embed your background image, reference it using CSS-- style="background-image: url('fil:///./images/worldmap etc--.

TiddleWiki seems like the ideal format for organizing my D&D notes, as recommended by a couple of friends. Additionally, I tend to use .svg's for world maps, with interactive behavior added in that allows me to 'click' on a region, and go to that page. 

Currently, I have an svg map set up, but I'm having enormous difficulty inserting it into TiddlyWiki, because the file is enormous (for an svg), so when I open up notepad, and copy-paste the text into the box for the new Tiddle, my whole computer lags, trying to manager that enormous amount of text in my clip tray. I haven't found a way to upload the image file directly into the tiddle, when I click and drag it into explorer, the following happens:

https://gfycat.com/eachevergreenguernseycow

Whenever I open the svg in a browser, or insert it accidentally using the process I showed above, the image behaves as desired, with areas highlighting when my mouse hovers over them and allowing me to click them to travel to links (I cut out those parts while I create the rest of my wiki). 

https://gfycat.com/entirevainindianpangolin

However, the image obviously does not scale, and I'm not sure that it would link to other Tiddles if I were try and use it in this fashion. 

When I use the method described in the second paragraph, where I copy and paste the text contents of the svg into a tiddle (which is enormously tedious), the image inserts correctly, and it scales to fit the window, but the image's interactivity is totally absent:

https://gfycat.com/elaboratewatchfulbichonfrise

So I guess my questions are as follows:

1. How do I insert svg images into a locally hosted Wiki, without having to deal with the hassle of copying and pasting everything over?
2. How do I restore the interactive functionality of the svg, so that these areas highlight and fade when the mouse hovers over them? 

Also, this is kind of a sub question, but how do I insert those links into images when I'm hosting locally? I obviously can't link to a website, since the files are hosted on my computer, but how do I link them? (This is probably explained somewhere else, just figured I should ask while I'm here.)

[A Gloom]

toc-tabbed-internal-nav and toc-tabbed-external-nav seem to do this really interesting behavior, where it has the table of contents in a fixed position, but open the page in another window. 

I was wondering if there was some way to accomplish a similar effect, but with the 'toc' being an image.

This is where it gets tricky, the toc's use macros to define the link behavior, while svg's use basic html a tag's, making difficult to tailor their behavior

the best I have done is target an iframe in the same tiddler as the svg (above/below, or overlaid over the svg), but instead of displaying just the desired tiddler, it displays the tiddler with/in a new copy of the whole wiki in the iframe

now if you want the map in the right side with your tabs and have it open tiddlers on the left in the story river, just tag the map $:/tags/SideBar, and it will appear with your tabs and its links will open in the story river.

 

My ideal situation is that I have a 'map of the floor' on the left hand side, and then the page that I click on opens in the right tab, while still being able to view the map on the left. But, when I click a specific hyperlink, either in the text or in the svg image, then I "go to the next floor", and the svg image changes, allowing me to access a different set of "rooms" (ie tiddlers).

been tryin to do the same but targeting anything other than the story river is tricky and internal svg links are limited

 

On the left hand side (or right, it doesn't particularly matter), there'd be a 'map tab' or 'map window', showing a map of the current area. I'd be able to click on hyperlinks within the map to open up specific Tiddlers for each 'sub area,' with those tiddlers appearing on the other side, so that I can view the map and the notes at the same time.

see above about tagging for sidebar display

 

Certain hyperlinks, as specified by me, will have new maps available to them, and when I click on them, the image in the 'map tab' will change (and it'd be nice if all the tiddlers in the notes half disappeared as well, but that's  not super critical).

you can have wikitext with your svg maps, ourside the svg code (above or below) which means you can use buttons an actions for closing and opening tiddlers like so :

<$button message="tm-close-tiddler" param="WoIpg 001" class='tc-btn-invisible tc-tiddlylink' style='width:100%;height:100%;'><$action-navigate $to="WoIpg 002"/>Come, get tangled in the Web <b>_</b></$button>

 

Then it will behave as before, where I can click on sub regions, which open up notes in another tab so that I can view them side by side. Then, clicking another 'region' hyperlink will change the maps+notes again.

The above works in the story river

I'm sure there's ways to do exactly what you want but I haven't figured it all out yet-- I suggest a new post/thread labeled something along the lines of svg linking in TW and see if others more knowledgeable may have ideas