1

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.

enter image description here

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.

2

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.

1
  • Yes, inline SVG works, thank you. However, the source code is automatically sanitized, so it is necessary to be wrapped by <figure>.
    – Kota.M
    Jul 7 at 14:33
1

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

1
  • Thank you, I tried, but unfortunately the link still does not work.
    – Kota.M
    Jul 2 at 18:49
1

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;

<figure style="width: 100%;"><object data="{{ image_url }}" type="image/svg+xml" width="100%"></object></figure>

In addition, there are some tips;

  • The <object> should be wrapped by <figure>, otherwise Craft sanitizes the code automatically.
  • Width of <figure> is necessary to display the image with proper size in Chrome and Edge.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.