Using SVG image with links to different pages
I admit, I am new to using SVG files for something like this and my Google-Fu hasn't helped much. I have a nice image created in old CS5 Suite that I am using as a menu link to four different pages. Currently I am doing this with image-maps but they don't scale when browser size changes, etc. So research suggests doing this with SVG files. So opened up my Illustrator file and made an SVG file. Finally managed to figure out how to get the links to work properly. Uploaded image to the Media Library. So if I "open" the image via link from Media Library to stand alone browser tab the links work.
When I place the image on the page, the images do NOT work. I have about exhausted Google so reaching out here for help.
This is the link directly from the Medi File:
And here is the page in question:
https://empiresofstars.obsidianportal.com/wikis/main-page
The image is there, but again, the links do not work.
One Google suggestion was to just paste the svg file directly into page. I tried that and ended up with a wall of text about 1000 lines long :(
So I am obviously doing something wrong. Or do SVG files not work in Portal? Help please :)
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I swear SVGs are witchcraft. I didn't know that they could be used like this at all.
I could be wrong on this, but it sounds like Textile isn't passing along the functionality of the SVG image when it references it from the media library. I can't download your SVG to test this myself, but maybe try swapping editors in the Settings>Advanced screen and then try it?
EDIT: Nope, in fact DO NOT try that unless you want to rebuild your page. I'm glad I tested it on my testbench site instead of SoK or something. Yeesh.GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
I tried two alternate methods of displaying a picture, !url! and straight up HTML, both stripped away the link functionality.
Since the basic HTML code doesn't make it work I think someone from support will need to weigh in, I don't know what else to even try.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
I confirmed that Textile on its own doesn't inherently support the SVG tag.
What I tried:
I can confirm that it isn't an issue with your SVG file itself, even a small basic SVG doesn't function correctly. I did read that it may be possible to whitelist the SVG tags so that Textile supports it, using javascript, but I have no idea how someone would actually do that. What I think is kind of strange about this issue is that it works on the media page, so it seems like there should be a way to make it work outside that.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
So I accomplished a similar effect using CSS and some layered images.
See here: https://elurah.obsidianportal.com/wikis/world-trees
I used a base image (the main circle) set to relative positioning, and then used absolute positioning on the overlay images using % values in order to position them over the background circle. Added some hover opacity effects and stuff for things to appear.
All you should really need is the background image and some hexs of the same size. Set them to a low opacity (like 1%) so they can be interacted with and use the positioning to place them where you want. I'll toss up my CSS here for the tree wheel so you can see how it's built.
Edit: HTML, too.
I didn't consider that the Textile editor was stripping out the effects of the svg code. Good to know. I ended up creating A and B images and had to get creative with positioning to honour the hex like affect I wanted. Seems to have worked.
I like the code example from Lucas, pretty clever. I had already implemented my fix before reading that. I do like that code and will probably repuporse for another menu affect I am considering for another page. Thanks for the responses and code everyone! Good community support all around.
I am glad you found a solution. I do everything I my power to avoid JS, so Ive come up with some really fascinating effects using pure CSS and some clever design. I will not succumb to the deep magics.
I am in awe. @LucasValenti, how did you go about working out the mapping. I know very little about how to make these things work.
I'm trying to do something similar here:
https://startrekexcalibur.obsidianportal.com/wikis/main-page
@LucasValenti. what an amazing site!!
Just trying to help out.