interactive/clickable svg does not work in Joomla

Need help with the Administration of your Joomla! 3.x site? This is the spot for you.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
Thomsterdam
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 149
Joined: Mon Dec 12, 2011 5:55 pm

interactive/clickable svg does not work in Joomla

Post by Thomsterdam » Fri Jun 05, 2020 2:25 pm

Hi there,
I am using an interactive svg in Joomla. For some reason, when I click on the clickable area, it does not respond in Joomla, but when I load the image standalone in the browser it works. Can anyone help?

Here's the details:
- I have added svg as an accepted image file extension in Joomla and the svg image can be uploaded and used in an article, so the basic config works. I have used multiple svg images on the same website without problem. The difference is that this svg is has links in the image.

Here is the content of the svg:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 283.5 283.5" style="enable-background:new 0 0 283.5 283.5;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F39200;}
</style>
<a xlink:href="https://www.google.com">
<g>
	<g>
		<path class="st0" d="M217.2,66.1c41.9,41.9,41.9,109.9,0,151.8s-109.9,41.9-151.8,0S23.5,108,65.4,66.1
			C107.4,24.2,175.3,24.2,217.2,66.1"/>
	</g>
</g>
</a>
</svg>
It is just a simple example of a circle that is clickable and links to Google. If you click outside of the circle, nothing happens.

Here you can see this image in a page: https://www.thomsterdam.nl/?view=article&id=34&catid=11
As you can see the image is there, but when you click on the circle nothing happens.

This the URL of the image: https://www.thomsterdam.nl/images/leger.svg
When you click on the image, you are taken to google, as expected (see code above).

Of course this is just a simple example. I have more complicated svg images that I want to use on a production site.

If anyone knows the solution, I would be much obliged. I have used a clickable svg image in the past, so it should be possible to use, but..... no such luck here.
(BTW: if you move the <a xlink:href..... to be wrapped around the <path>, instead of the <g>, it makes no difference.)

Thanx in advance.

Thom
Give a man a fish and you feed him for a day;
teach a man to fish and you feed him for a lifetime.

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 560
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: interactive/clickable svg does not work in Joomla

Post by Jaydot » Fri Jun 05, 2020 2:55 pm

I believe xlink:href is deprecated...
See https://developer.mozilla.org/en-US/doc ... xlink:href
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

Thomsterdam
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 149
Joined: Mon Dec 12, 2011 5:55 pm

Re: interactive/clickable svg does not work in Joomla

Post by Thomsterdam » Fri Jun 05, 2020 3:47 pm

Hi Jaydot,

Thanx for your answer

I tried both ways (with and without xlink). Neither worked. So that is not the problem. It doesn't make any difference in Joomla. I think that it is a Joomla problem not an SVG problem.

Thanx,


Thom
Give a man a fish and you feed him for a day;
teach a man to fish and you feed him for a lifetime.

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 560
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: interactive/clickable svg does not work in Joomla

Post by Jaydot » Sat Jun 06, 2020 1:29 pm

Thomsterdam wrote:
Fri Jun 05, 2020 3:47 pm
I think that it is a Joomla problem...
I use SVG's a lot, so this issue continued to bug me (though I'd never used the svg href).
Also, nine out of ten times, when I start trying to blame Joomla, it turns out I'm doing something wrong myself :).
I did read somewhere that svg href doesn't work when you use the img tag. So I tried it out. I also inserted the SVG as object, and inline.
Here's the result: https://jaydot.nl/artikelen/css/svg-href
As usual, it's not Joomla's fault. It's just another of those SVG quirks that make life difficult :D
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

gws
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4749
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: interactive/clickable svg does not work in Joomla

Post by gws » Sat Jun 06, 2020 2:48 pm

@jaydot many thanks for a good chuckle with the end of the internet.


Locked

Return to “Administration Joomla! 3.x”