-1

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

  • 1
    You can make the other objects not participate in selections see pointer-events, also object can be invisible and participate – joojaa Jul 14 '18 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 Jul 15 '18 at 0:00
  • That's not specifically about graphic design so I guess I'd start another question in the appropriate discusion site – dstonek Jul 15 '18 at 0:03
  • And why AI let us include hyperlinks if after all they are not included in the svg file? – dstonek Jul 15 '18 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 Jul 15 '18 at 6:50
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

  • 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 Jul 14 '18 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.– – Danielillo Jul 14 '18 at 21:13
  • Of course, that's what I've state in my question. – dstonek Jul 14 '18 at 21:23

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.