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.
On Wednesday, July 3, 2019 at 8:22:05 PM UTC-6, Spooky Noodle wrote:
>
> 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.)
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/4d6d1894-5bf8-4f6d-acb2-e4ca0de1797d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
