HREF links not working

[mr-j0nes]

Describe your question

Hi,

I have an SVG image file to which I added some hyperlinks to some of its elements, e.g.: . If I open the SVG in the browser directly I can click on these elements and the hyperlink works fine.

So, then I add the SVG file successfully into my Wordpress, using your plugin. Later on I add the image to my page using Elementor and I publish. The SVG image is displayed successfully on my page but the hyperlinks do not work. On hover my mouse pointer does not change and clicking does not work.

I would like to know if this is a restriction on your plugin or it is something else?

I tried adding the "href" attribute to the svg_allowed_attributes filters and the tag to the svg_allowed_tags ones but it still does not work.

Thanks a lot for the help.

Best regareds.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

@mr-j0nes Thanks for the question! I imagine we are probably stripping out those link tags when we sanitize the svg, though adding those to the allowed tags filter should work in theory. Can you by chance add the svg you're having issues with here so I can test?

[mr-j0nes]

Thank you for the quick reaction. Here I send you an example. When I add it to Elementor as an image the hyperlink gets lost. On the other hand If I paste the content code (svg tag) into a HTML element the hyperlinks are preserved..

[darylldoyle]

@mr-j0nes the sanitisation library can be pretty strict on href's as they're a very likely way for people to introduce XSS via SVGs. That said, it should allow the href if it can ensure that it's a safe value, as is checked here: https://github.com/darylldoyle/svg-sanitizer/blob/master/src/Sanitizer.php#L456-L506

Looking at your SVG, the href begins with a # and would therefore be classed as a safe value. You can confirm this by pasting the content of the SVG into https://svg.enshrined.co.uk/

I wonder, when you insert the SVG in via Elementor, is it adding it via an <img> element, or outputting the <SVG> element inline? If the former, then links within the SVG won't work. If Elementor has a custom HTML option, you should be able to paste the SVG into that to output it inline, which should resolve the issue.

I'm also happy to take a look if you can point me to the page URL where you're seeing the issue.

[mr-j0nes]

Thank you Daryll for the help.

When inserting it in Elementor it adds it as an <img> element, why is it that links within SVG don't work, like this?

Yes, Elementor provides a HTML widget. I have tried pasting the SVG content in one of those HTML widget, the links are preserved, but CSS format used for the <img> element gets lost. Also the # does not work, I have to include the whole path (e.g.: /folder/#test) in the SVG, and when I do that the link is opened inside the HTML widget container instead of scrolling down to it in the same page..

I was hoping to be able to make links work when using a <img> element. You tell me that is not possible?

[darylldoyle]

@mr-j0nes that's correct, when you use an SVG inside an <img> element it loses all interactivity within the page. In essence, it's treated as if it was a PNG or JPG for display purposes.

If you want to utilise links inside the SVG, on the page, then you'll need to embed them inline within the document.

Also the # does not work, I have to include the whole path (e.g.: /folder/#test) in the SVG, and when I do that the link is opened inside the HTML widget container instead of scrolling down to it in the same page..

I'm not entirely sure I follow here. Do you mean that you're using <a href="/folder/#test"> to link? If you're trying to jump to an anchor link on the page, then you'll likely just need to use the fragment identifier <a href="#test">, otherwise it will try and change the page when you click.

Again, I'm happy to try to advise if you can point me at an example, but I don't have a copy of, nor use Elementor to test it myself.

[mr-j0nes]

Hi Daryll,

I didn't know SVGs lose all interactivity when put inside a <img> tag. That was my concern and I thought it might be the Safe SVG plugin restricting that.

As you point out, if I do put the SVG inline, links, together with some animation I added, work as expected. Only links to current page jump instead of scrolling down to it. I solved this by adding the scroll-behavior: smooth; to my CSS.

I do not blame you for not understanding that paragraph, sorry for not explaining myself well. We can ignore that as it was the result of some experiments I was doing with the Elementor's HTML widget.

Also, sorry I could not point you to an example as the website I am working is private for now.

Darryl I would like to thank you for your time and help. Really appreciated.