Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-07T14:33:28.450Z
Answers.Text: Yes, inline SVG works, thank you. However, the source code is automatically sanitized, so it is necessary to be wrapped by <figure>.
Answers.UserDisplayName: Kota.M
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-06T06:39:47.953Z
Answers.LastActivityDate: 2021-07-06T06:39:47.953Z
Answers.UserDisplayName: Andrew Macpherson
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-02T18:49:43.850Z
Answers.Text: Thank you, I tried, but unfortunately the link still does not work.
Answers.UserDisplayName: Kota.M
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-02T18:15:49.817Z
Answers.LastActivityDate: 2021-07-02T18:15:49.817Z
Answers.UserDisplayName: sparkalow
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-07T22:20:23.087Z
Answers.LastActivityDate: 2021-07-07T22:20:23.087Z
Answers.UserDisplayName: Kota.M
Body: <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>
  
Tags: <craft3><svg>
Title: SVG with <a> tag does not work
ThreadText: # 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.
  
  [![enter image description here](https://i.sstatic.net/THMqf.png)](https://i.sstatic.net/THMqf.png)
  
  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.
  
  **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;
  
  ```
  <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.
  
  
  ---
  
  