With geriatric Internet Explorer versions this site looks shite. This because Impossiblue is built with modern tools and would require hacks and workarounds to function in legacy browsers. I no longer have the patience nor the inclination to satisfy everybody. Impossiblue is an experiment and a playground – and my sustenance does not depend on it. As a concequence – to embarrass nobody – I have decided to lock you out. So, there.

Impossiblue

Linking from SVG

Fig. The SVG image above changes colour on hover and links to a different page when clicked/tapped.

Observation 1: Empty/transparent areas of the SVG may not be clickable (tapping will probably work as the area covered with a finger is larger than the pixel clicked on with a mouse or a pen). Pointer events and bounding-boxes might solve the shortcoming, but as of now (2017) it is a safer solution to wrap the entire SVG in a link tag.

Observation 2: Substituting href for xlink:href as a link to a resource (see below) kills the link (at least for me in Safari 10.0.3). Because of this, the link in the SVG example still uses xlink:href (see source code).

The Mozilla Developer Network may be overly opitimistic on implementations of SVG 2 specifications to sift through. This is what they say:

xlink:href is deprecated since SVG 2. This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it [as it] may cease to work at any time. (Ref. 1)

Specifications before SVG 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute. (Ref. 2)

The discussions have been going on for a long time and I do not hold my breath. Alexandre Prokoudine asked the question Is SVG 2 really on life support? back in November, 2016, and nailed it thus:

Between SVG 1.1 W3C Recommendation and SVG 2 in its current form, people have raised kids and sent them off to the college.

Chris Coyier puts it his way:

Blink does whatever it wants; Gecko is slow; Edge won’t touch it; WebKit is gonna wait it out.

Fun to play with, though…

Fig. With proper linking, the SVG above can, on hover, send you flying to any one of the four corners of the world. One image, four links! (My apologies to anyone who uses the symbol for different purposes.)

References

1. MDN on xlink:href
2. MDN on href
3. SVG optimiser