Skip to main content
Parts4Arts
Parts4Arts
Inspiring
September 8, 2021
Answered

SVG with hyperlinks

  • September 8, 2021
  • 1 reply
  • 2633 views

How to hyperlink a rectangle or other object and then export it as SVG so that the hyperlink works on the web?

I couldn't find anything in SVG Interactivity and a URL attribute is deleted when exporting as SVG.

 

Wie kann man ein Rechteck oder anderes Objekt mit einem Hyperlink versehen und es dann als SVG exportieren, so dass der Hyperlink im Web auch funktioniert?

In SVG Interaktivität habe ich nichts entsprechendes finden können und ein URL-Attribut wird beim Export als SVG gelöscht.

 

– Jens.

This topic has been closed for replies.
Correct answer Anshul_Saini

sorry. I tried it again. By saving I get the hyperlink, by export not. Here are the svg codes from Illustrator 25.4.1, macos 10.15.7 – why is the export as svg without the hyperlink? A Bug?

 

// exported as SVG, no hyperlink in it
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <defs>
    <style>
      .cls-1 {
        fill: #009fe3;
        stroke: #1d1d1b;
        stroke-miterlimit: 10;
      }
    </style>
  </defs>
  <circle class="cls-1" cx="64" cy="64" r="50"/>
</svg>

// saved as SVG, hyperlink is inclided
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<a xlink:href="http://www.computergrafik-know-how.de" >
	<circle style="fill:#009FE3;stroke:#000000;stroke-miterlimit:10;" cx="64" cy="64" r="50"/>
</a>
</svg>

  


Thank you for confirming that. This is an expected result if you "Export" as exporting doesn't keep any interactivity data—only Save As will keep the interactive data (Hyperlink) in SVG.


I hope it clears the confusion.

 

Thanks & Regards,

Anshul Saini

1 reply

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
September 8, 2021

Maybe the hyperlink stays when you Save as?

 

But then you get not the most modern code. All in all creating interactivity directly inside Illustrator has been neglected. I suppose that not a lot of people are using it. I have tried a few times, but just could only get it to work by accident.

Parts4Arts
Parts4ArtsAuthor
Inspiring
September 8, 2021

thanks for your answer. but no, saving as svg delete the url-link as well.

I like to create fantasy maps and mind maps with hyperlinks in it.

If there is no way in Illustrator, I have to write a Javascript to get a better SVG export.

– jens.

Anshul_Saini
Community Manager
Anshul_SainiCommunity Manager
Community Manager
September 8, 2021

Hi there,

 

Sorry about the trouble. Save As should work, as @Monika Gause suggested in most of the cases. Could it be possible for you to share the document and URL you want to add as a hyperlink? If yes, you can upload it to the Creative Cloud (https://helpx.adobe.com/in/creative-cloud/help/share.html) and share the download link here. I will check it at my end and get back to you.

 

Thanks & Regards,

Anshul Saini

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices