0

CC2018 22.1
According to Add a hyperlink within Illustrator I followed those steps but I cannot get hyperlinks work in browsers.
I have a complex Illustrator design (several paths) I've added 4 rectangles for a link map.
enter image description here
Here it is the Attributes of one of those rectangles and the SVG Options during export.
I unchecked "Minify" to get a more readable output.
Reading the preview by clicking "Show Code" or reading the final .svg file there's no sign of anchor hrefs.
At bottom 4 like this <rect class="cls-5" x="76.5" width="886.82" height="327.54"/>
cls-5 -> fill:none

I tried to manually add the anchors like
<a xlink:href="index.php"><rect class="cls-5" x="76.5" width="886.82" height="327.54"/></a>
and also the xlink reference
<svg xmlns:xlink="http://www.w3.org/1999/xlink" .....

It didn't work as advertised here: https://alligator.io/svg/hyperlinks-svg/ It only does when the code is inline the html file, not using it inside myfile.svg like
<picture> <source media="(min-width: 500px)" srcset="images/myfile.svg" type="image/svg+xml"> ............
</picture>

1) I want to solve this from Illustrator.
2) If not possible I want to know how to add those hyperlinks manually in the .svg file, if possible.

enter image description here

Improve this question
5
  • 1
    You can make the other objects not participate in selections see pointer-events, also object can be invisible and participate
    – joojaa
    Commented Jul 14, 2018 at 21:23
  • That's okay, I added pointer-events: visible; to fix link visibility but only inline, the svg expanded in the body of the html script. I don't know how to make the link areas visible if svg tag is included in .svg file <img src="images/test3.svg" type="image/svg+xml">despite fill or pointer-eventsvalues
    – dstonek
    Commented Jul 15, 2018 at 0:00
  • That's not specifically about graphic design so I guess I'd start another question in the appropriate discusion site
    – dstonek
    Commented Jul 15, 2018 at 0:03
  • And why AI let us include hyperlinks if after all they are not included in the svg file?
    – dstonek
    Commented Jul 15, 2018 at 0:22
  • 1
    Its included theres just no trigger, AI is not responsible for the behavior of each browser in the universe. Each browser is allowed to do what it wants.
    – joojaa
    Commented Jul 15, 2018 at 6:50

3 Answers 3

Reset to default
1

It would be useful to see your code.

Here a link to my SVG with hyperlinks: https://danielillo.neocities.org/

I just added manually the cursor style = pointer

<a xlink:href="https://www.google.com" cursor="pointer">
<polygon id="XMLID_1_" fill="#E0DE16" points="58.9,136 0,102 0,34 0,34 58.9,68  "/>
</a>

I guess the problem is the link type: index.php

Improve this answer
3
  • I saw your example. You didn't understand my question. Yours is an inline script. I am asking for the content of myfile.svg I use in a <picture> tag
    – dstonek
    Commented Jul 14, 2018 at 20:17
  • Did you read this at your link page: –This only works with inline SVGs, not with SVGs that are included in an <img> tag.–
    – user120647
    Commented Jul 14, 2018 at 21:13
  • Of course, that's what I've state in my question.
    – dstonek
    Commented Jul 14, 2018 at 21:23
0

For any future readers, if you use Save as SVG instead of Export As, the links set up in the Attributes panel should work in browsers.

Improve this answer
-1

Yeah, defined hyperlinks do not work in exported SVGs from AI. Can't find any workaround. Adobe, do something about it.

Improve this answer
1
  • Please only use the "answer" space for actual answers, do not post rants or support requests. Check How to Answer to learn more.
    – Luciano
    Commented Oct 9, 2019 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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