SVG with tag does not work

Question

I want to put some links on an image. To be exact, this "Click here" would be a link. I supposed it would be possible with SVG image.

However, tag does not work in web page powered by Craft CMS. How can I make it available?
If not possible, is there any alternative? I already found image map does not work in Craft.

Probably the cause is Craft CMS’s specification, because if I open the image with a new tab, the links work without any trouble.

The part of the text with a link is this;

<text x="927" y="584" class="cls-2">
    <tspan x="927" dy="1.2em"><a xlink:href="https://stackoverflow.com/" class="cls-link" target="_blank">Click here</a> for more information.</tspan>
</text>

My Craft version is 3.5.12.1.

craft3 svg

Andrew Macpherson · Accepted Answer

Are you placing the SVG into your web page within an IMG tag, by any chance? If so, try changing to an inline SVG instead. There are quite a few SVG features that don’t work unless you use inline SVG, and from memory links are one of them.

Correct answer by Andrew Macpherson on August 14, 2021

sparkalow · Answer

Perhaps, the config setting sanitizeSvgUploads could be of help.

Whether Craft should sanitize uploaded SVG files and strip out
potential malicious-looking content.

https://craftcms.com/docs/3.x/config/config-settings.html#sanitizesvguploads

Kota.M · Answer

I would like to summarize the conclusion. In order to embed link on SVG image in Craft CMS website, inline SVG is the solution. It works with putting a source code into rich text field, like this;

In addition, there are some tips; The

SVG with tag does not work

3 Answers

Add your own answers!

Ask a Question