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
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)
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.)