Topic on Project:Support desk

Clickable .svg image not clickable in wiki page

11 comments • 12:04, 10 July 2023 9 months ago

11

Fustbariclation (talkcontribs)

I've uploaded a clickable .svg file.

It works perfectly in a browser, just as a file. You can click on all the elements.

When I include it as an image in the wiki, though, it only allows a click on the whole image.

Here's the clickable image:

http://takingserviceforward.org/wiki/images/ASM_model.svg

When I include it on a page like this, it doesn't work:

</nowiki>[[Image:ASM_model.svg|1000px]]

This is what I have in the LocalSettings.php file:

"

require_once "$IP/extensions/NativeSvgHandler/NativeSvgHandler.php";

$wgAllowTitlesInSVG = true;

$wgSVGConverter = false;

"

Reply 04:40, 20 November 2015 8 years ago

Ciencia Al Poder (talkcontribs)

SVG images are not rendered as SVG on the page, but they are rasterized as a PNG image instead, so browsers that don't support SVG can display it. This is tracked as task T5593

For your particular use case, you may want to use Extension:ImageMap instead, which define regions of an image that link to different pages or external URLs.

Reply 10:41, 20 November 2015 8 years ago

Fustbariclation (talkcontribs)

Yes, that would be a real nuisance. Oddly, though, if I look at the web inspector in Safari, it actually shows it as an SVG. I've attached the screenshot

Reply Edited 12:35, 21 November 2015 8 years ago

Ciencia Al Poder (talkcontribs)

Ah, I didn't noticed you were using the NativeSvgHandler extension.

It seems the extension outputs the SVG image inside an <img> tag, but according to this, the resulting image won't be interactive. So basically, the SVG is displayed but doesn't take account user interaction.

Reply 12:34, 21 November 2015 8 years ago

Fustbariclation (talkcontribs)

Oh, dear! Thank you, though - I'll just have to display it as an external link... maybe I could fake the wiki border to make it look seamless..

What a pity they strip out the links. I understand that they want to strip out scripts, but links seem to be throwing out the baby with the bathwater.

Reply 12:37, 21 November 2015 8 years ago

Oerzzz (talkcontribs)

I wonder if there have been any changes since.

This is EXACTLY what I would like to do. A link in an SVG (from Draw.io).

I'll keep searching.

Reply 10:39, 15 March 2018 6 years ago

217.236.242.245 (talkcontribs)

Bumping Oerzzz. I also want to be able to do exactly that, from svg's generated in Draw.io.

Also found that it is currently not possible to upload a Draw.io svg; an error is generated: "This SVG file contains an illegal namespace "http://www.w3.org/1999/xhtml".". Anyone know what the solution to this might be?

Reply 13:58, 22 May 2018 5 years ago

Ciencia Al Poder (talkcontribs)

Look at the code of that svg file. The namespace xhtml is for HTML files, not SVG, hence the error is correct. Are you sure you downloaded a SVG from that page and not a HTML?

Reply 14:29, 22 May 2018 5 years ago

Xavi (talkcontribs)

It is possible to achieve it by rendering the svg as an html object in the wiki page:

LocalSettings.php:

$wgRawHtml = true;

WikiPage:

<html>
<object data="http://example/my_file.svg" type="image/svg+xml">
</object>
</html>

It is important to explicitly use the closing tag </object>, otherwise the page will not be rendered correctly.

Reply 21:23, 23 July 2019 4 years ago

Phcalle (talkcontribs)

Thanks to Xavi. I am at least able to do what I want on my local wiki !

Reply 18:47, 18 March 2021 3 years ago

Omerzu (talkcontribs)

@Xavi: While using the object tag works for me, I have the problem that the clicked URLs will only be rendered in the image area, not in the top window, what I would expect when the URLs point to other wiki pages.

Reply 12:04, 10 July 2023 9 months ago

Reply to "Clickable .svg image not clickable in wiki page"