<p>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.</p>

CC BY-SA 4.0
2021-07-07T14:33:28.450Z
Yes, inline SVG works, thank you. However, the source code is automatically sanitized, so it is necessary to be wrapped by <figure>.
Kota.M
CC BY-SA 4.0
2021-07-06T06:39:47.953Z
2021-07-06T06:39:47.953Z
Andrew Macpherson
<p>Perhaps, the config setting <code>sanitizeSvgUploads</code> could be of help.</p>
<blockquote>
<p>Whether Craft should sanitize uploaded SVG files and strip out
potential malicious-looking content.</p>
</blockquote>
<p><a href="https://craftcms.com/docs/3.x/config/config-settings.html#sanitizesvguploads" rel="nofollow noreferrer">https://craftcms.com/docs/3.x/config/config-settings.html#sanitizesvguploads</a></p>

CC BY-SA 4.0
2021-07-02T18:49:43.850Z
Thank you, I tried, but unfortunately the link still does not work.
Kota.M
CC BY-SA 4.0
2021-07-02T18:15:49.817Z
2021-07-02T18:15:49.817Z
sparkalow
<p>I would like to summarize the conclusion.</p>
<p>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;</p>
<pre><code>&lt;figure style=&quot;width: 100%;&quot;&gt;&lt;object data=&quot;{{ image_url }}&quot; type=&quot;image/svg+xml&quot; width=&quot;100%&quot;&gt;&lt;/object&gt;&lt;/figure&gt;
</code></pre>
<p>In addition, there are some tips;</p>
<ul>
<li>The <code>&lt;object&gt;</code> should be wrapped by <code>&lt;figure&gt;</code>, otherwise Craft
sanitizes the code automatically.</li>
<li>Width of <code>&lt;figure&gt;</code> is necessary to display the image with proper size in Chrome and Edge.</li>
</ul>

CC BY-SA 4.0
2021-07-07T22:20:23.087Z
2021-07-07T22:20:23.087Z
Kota.M
<p>I want to put some links on an image. To be exact, this &quot;Click here&quot; would be a link. I supposed it would be possible with SVG image.</p>
<p><a href="https://i.sstatic.net/THMqf.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/THMqf.png" alt="enter image description here" /></a></p>
<p>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.</p>
<p>Probably the cause is Craft CMS's specification, because if I open the image with a new tab, the links work without any trouble.</p>
<p>The part of the text with a link is this;</p>
<pre><code>&lt;text x=&quot;927&quot; y=&quot;584&quot; class=&quot;cls-2&quot;&gt;
    &lt;tspan x=&quot;927&quot; dy=&quot;1.2em&quot;&gt;&lt;a xlink:href=&quot;https://stackoverflow.com/&quot; class=&quot;cls-link&quot; target=&quot;_blank&quot;&gt;Click here&lt;/a&gt; for more information.&lt;/tspan&gt;
&lt;/text&gt;
</code></pre>
<p>My Craft version is 3.5.12.1.</p>

<craft3><svg>
SVG with <a> tag does not work
# SVG with <a> tag does not work

(Asked by: username_0 on 2021-07-02)

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;

    Click here for more information.


My Craft version is 3.5.12.1.

**Tags:** craft3, svg

---

## 3 answers

### Answer by username_1 on 2021-07-06. Score: 2 | 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.

> **Comments:**
> **username_0**: Yes, inline SVG works, thank you. However, the source code is automatically sanitized, so it is necessary to be wrapped by <figure>.  

---

### Answer by username_2 on 2021-07-02. Score: 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>

> **Comments:**
> **username_0**: Thank you, I tried, but unfortunately the link still does not work.  

---

### Answer by username_0 on 2021-07-07. Score: 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;


In addition, there are some tips;

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


---

