How can hyperlinks be added inside SVG wrapper?

[GrannyGrump]

I am a failed googler, have pity on me. Toss a tip in my tin cup, and get a blessing in return.

I see that I can't simply add an <a> tag to text inside an SVG wrapper. FlightCrew gives error messages (not warnings) that "attribute 'href' is not declared for element 'a', and "missing required attribute 'href' ". However, these links do work just fine in ADE and in Sony Reader for PC.

IDPF epub check tells me --- element "a" missing required attribute "ns:href" (with xmlns:ns="http://www.w3.org/1999/xlink").

I googled for "ns:href" but couldn't find anything that seemed to apply to this. But since I am not a coder, I could be looking right at the answer without recognizing it. And I also don't grasp how the xmlns bit is supposed to be used.

What would be the syntax I need to do this? Does anyone have a clue for me? Thanks for any advice.

[Toxaris]

Have you checked if it is in the SVG and ePUB specs? I would think not. That means that it might work on some readers/applications, but no garantuee.

What is the purpose of the link in the SVG?

[GrannyGrump]

Hi Toxaris. To be very honest, I am not even sure how to search for this in the specs.

The purpose of the link is this:
I am presenting the images in an appendix. The main book, for example, chapter 5 paragraph 6 has a link to "fig-A" in the appendix. Then I wanted to add a backlink to the svg wrapper which could take the reader back to the source paragraph. (This would be in case the device does not have a "back" button.)

If I put the link outside the wrapper, but still inside the div that contains the svg wrapper, the link splits off onto the next page/screen.

I do have a short list of the return links at the beginning of the appendix, and maybe users without a back button would have to scroll back to the beginning of the appendix to find the return link. There are only 3 full-page images in this section, so scrolling would not be too painful. But I don't know how to let the user know about that option.

Edited to Add: Well, I guess I could add a note to the image caption: "Please scroll down to return link (for split link), or if I use the list at the start of appendix, "Please scroll to appendix start for return link". It would look kind of awful, but it would work, I guess.

Second Edit to Add More: It's also an option that I could use just a simple <img> tag inside a normal div. Then a hyperlink in the caption would definitely work. But then there is the problem of the entire caption slipping over onto the next screen. That is why I wanted to use SVG wrapper, to keep the caption nailed to the image.

[Jellby]

I think you have to add xmlns:ns="http://www.w3.org/1999/xlink" to the <svg> tag, and then use ns:href in the <a> tag. See here.

The first piece defines the "ns" namespace, where "ns" is just an arbitrary name, you can choose whatever name you like. When you use "ns:href", it means the "href" attribute from the "http://www.w3.org/1999/xlink" (that we have defined as "ns") specification.

[GrannyGrump]

whoah! Jellby, thank you so much for that link.


This should get me going down the right street.

(Why oh why are my search skills so poor? I wonder if there is a support group somewhere for us google-challenged folk. )

A blessing on your head for helping a poor old beggar with a tin epub cup!

[Toxaris]

Thanks for explaining the need for this, it makes it very clear!

[DaleDe]

You can do a link. To learn about SVG start in our wiki. There are links to the standards and with that it is easy to find what you seek. There are two kinds of links, one for external documents and the other for internal links between elements.

Here is an example of a link done for a ellipse. It is taken from the standard.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example link01 - a link on an ellipse
</desc>
<rect x=".01" y=".01" width="4.98" height="2.98"
fill="none" stroke="blue" stroke-width=".03"/>
<a xlink:href="http://www.w3.org">
<ellipse cx="2.5" cy="1.5" rx="2" ry="1"
fill="red" />
</a>
</svg>

Dale

[DaleDe]

Originally Posted by GrannyGrump

Hi Toxaris. To be very honest, I am not even sure how to search for this in the specs.

To search anything on a page in you browser use: CTRL-F (stands for find) and then type in what you want. link was found instantly in the specs.

Dale

[GrannyGrump]

@DaleDe --thanks for the example.

Jellby's link had a nice easy little step-through tutorial. I was surprised to learn that my first effort was almost successful --- all I was missing was the "xlink" prefix to the "href" for the "a" tag. (Which was already defined in the svg tag for linking the image to be displayed.) And funnily enough, I already had the image link staring me right in the face!

<div class="svgdiv" id="z083">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid meet" 
width="98%" height="98%"  
 viewBox="0 0 533 900">

<image width="533" height="800" xlink:href="../Images/z083.jpg"/>

<text style="font-style:italic;font-size:20pt" text-anchor="middle" x="265" y="840">It Was a Magician’s Wand</text>

<a xlink:href="../Text/ch08.xhtml#srcz083">
<text style="font-style:normal;font-size:14pt" text-anchor="middle" x="265" y="870">[ A &gt; RETURN ]</text>
</a>

</svg>
</div>

I am a little intimidated by SVG, and I probably let myself get discouraged.
I've been using svg wrappers for quite a while, but in a copy-paste cookbook way, I didn't really understand what much of the svg tag code meant. Now I am beginning to understand it a bit.

Anyway, maybe this post will help some other poor soul trying to get a handle on this.

[mrmikel]

I too have been intimidated by SVG and having an older reader does not increase my confidence, since if I transcribe or fix up a book, I want to be able to read it myself!

Thanks for bringing it up.