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

Update 210227: If we keep handheld devices out of the picture a moment longer, there is another more subtle way to tell the user that an SVG image is linkable…

The fill-rule attribute

Fig. Hover over the rocket with a mouse or a pen and prepare for a voyage to Pluto. Click or tap and experience the g-force at lift-off. Note that in this case the SVG is tucked inside an <a> tag proper.

The grave diggers at Mozilla have studied the scribbles of the W3-consortium and conclude:

The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.

Furthermore, it is nothing but pure manna when they note that as a presentation attribute, fill-rule can be used as a CSS property and that as a presentation attribute it has effect on the following eight elements: <altGlyph>, <path>, <polygon>, <polyline>, <text>, <textPath>, <tref>, and <tspan>.

We rush in to note that it depends on the image in question and the inside part thing plays an important role. Put simply: There has to be an inside part. This brings back memories of font creations in Fontographer; Is and Ms were no sweat, Os and Ps demanded attention to detail and vector directions.

For the resting state, the CSS looks like so:

#liftOff svg { fill-rule: evenodd; }

For the hovered state, the CSS is:

#liftOff svg:hover { fill-rule: nonzero; }

The two can be shifted around, of course; nonzero is the default value.

Aria

What then if the SVG is not used for linking? MDN tells us that adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative content (such as icons or images), duplicated content (such as repeated text offscreen), or collapsed content (such as menus). This is not to say that the image disappears from the web page, though. It is only ignored where appropriate.

To add this feature, code the SVG thus:

<a id="liftOff" href="#">
	<svg viewBox="0 0 16 16" aria-hidden="true"><path d="…"></path></svg>
</a>

Acknowledgement

I have nicked the rocket from GitHub … crossing fingers that they find it excusable since I use the image elsewhere to link to my repository on their site.