SVG tooltips and links

[Tevian Dray]

SVG supports both tooltips and hyperlinks. But neither feature appears
to work if I include an SVG image in PreTeXt. Is there a workaround?

Perhaps there's something in the CSS that intercepts the mouse? I do
see a tension between trying to follow an image hyperlink and the normal
zoom behavior on mouse click, but I'm not sure what's blocking the
tooltips. Nonetheless, it would be nice to be able to take advantage of
these SVG features.

Thanks,
Tevian

[Andrew Scholer]

Tevian - 

Those features require that  the SVG's contents are directly embedded into the HTML document, as opposed to linked to as the source for an image element.

That embedding is done for SVG in some specialized situations, but there currently is no way to specify that approach for arbitrary images.

If you really want to embed an SVG with links/tooltips, you could author it inside an HTML <interactive> with <slate surface="html">:
https://github.com/PreTeXtBook/pretext/blob/ba169b0aec4633681f16f3fb55e9fbd344dc7925/examples/sample-article/sample-article.xml#L8510

Andrew Scholer

--
You received this message because you are subscribed to the Google Groups "PreTeXt support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-suppo...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/pretext-support/28dce873606d162983b2cda6f213a755.drayt%40oregonstate.edu.

[Tevian Dray]

Thanks, Andrew.  But I'm afraid I need some help interpreting your proposed workaround.  I think I can figure out the slate element, where I can presumably give my SVG file as the source.  But what goes in the interactive element?  If the platform is javascript, I'll need detailed instructions, as that's not a language I speak.  (I don't really see how the figure itself gets included in the example.)  Perhaps there should be a "platform=svg" attribute value to handle this situation?

FWIW, I also tried using an interactive iframe, which almost works.  There are sizing issues (getting the SVG to fit in the iframe), which are presumably fixable, but more importantly some formatting is lost on the tooltips, and links don't work.

For the moment, I've put a <url> element in the caption linking directly to the  SVG file.  That works, but of course opens in another window, outside PreTeXt.  Putting the entire <figure> inside the <url> element also seems to work.  That's OK, but I'm curious to see whether your suggestion might be better.

Thanks again,

  Tevian

[Rob Beezer]

> Putting the entire <figure> inside the <url> element also seems to work.
That's OK

No it is not! ;-)

The content of the #url element is only meant to hold text, which might have
some simple markup like #q or #em. That you get something usable is only a
happy accident and a testament to the robustness of our processing and output
format.

While I am being difficult, I am sure you realize that your links embedded in an
SVG will not be available in static formats like PDF and braille. It will be
totally HTML-centric, which is why Andrew has steered you to the #interactive
element.

Rob

> article.xml#L8510 <https://github.com/PreTeXtBook/pretext/blob/
> ba169b0aec4633681f16f3fb55e9fbd344dc7925/examples/sample-article/sample-
> article.xml#L8510>

>
> Andrew Scholer
>
> On Wed, Aug 27, 2025 at 4:44 PM 'Tevian Dray' via PreTeXt support
> <pretext...@googlegroups.com> wrote:
>
> SVG supports both tooltips and hyperlinks.  But neither feature appears
> to work if I include an SVG image in PreTeXt.  Is there a workaround?
>
> Perhaps there's something in the CSS that intercepts the mouse?  I do
> see a tension between trying to follow an image hyperlink and the normal
> zoom behavior on mouse click, but I'm not sure what's blocking the
> tooltips.  Nonetheless, it would be nice to be able to take advantage of
> these SVG features.
>
> Thanks,
>   Tevian
>
> --
> You received this message because you are subscribed to the Google
> Groups "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to pretext-suppo...@googlegroups.com.
> To view this discussion visit https://groups.google.com/d/msgid/pretext-
> support/28dce873606d162983b2cda6f213a755.drayt%40oregonstate.edu

> <https://groups.google.com/d/msgid/pretext-
> support/28dce873606d162983b2cda6f213a755.drayt%40oregonstate.edu>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send an email

> to pretext-suppo...@googlegroups.com <mailto:pretext-
> support+u...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-support/

> dbfc01db-1afb-4993-b37a-e6cb76ba1804n%40googlegroups.com <https://
> groups.google.com/d/msgid/pretext-support/dbfc01db-1afb-4993-b37a-
> e6cb76ba1804n%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Andrew Scholer]

See below for a recipe. 

But after thinking about it more, I realize that the links still aren't going to work due to Same-Origin unless they point to resources in the same domain your book is hosted on. So it really only gets tooltips working correctly. :(

Andrew Scholer

        <interactive xml:id="interactive-svg" platform="javascript" aspect="6:1">
            <slate surface="html">
                <svg width="90" height="90"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                    <a xlink:href="https://www.google.com">
                        <circle cx="50" cy="50" r="40" fill="red">
                            <title>This is a red circle</title>
                        </circle>
                    </a>
                </svg>
            </slate>
        </interactive>

To view this discussion visit https://groups.google.com/d/msgid/pretext-support/MTAwMDAzOS5iZWV6ZXI.1756480294%40pnsh.

[Tevian Dray]

> > Putting the entire <figure> inside the <url> element also seems to
> > work. That's OK
>
> No it is not! ;-)

For the record, I moved the <url> element to the caption for precisely
this reason, as I was well aware that this "feature" was not robust.

> I am sure you realize that your links embedded in an SVG will not be
> available in static formats like PDF and braille.

Of course; none of our interactive materials will work in static
formats. But our book is intended to be used interactively...

> ... which is why Andrew has steered you to the #interactive element.

I would be delighted to try to implement a fully-functional SVG image
using #interactive. However, I haven't yet been able to figure out how
to do so from Andrew's (to me) cryptic comments and example. The other
#interactive elements I have used all had predefined platforms, such as
"geogebra", so I didn't have to do any work other than point to the
right file.

[Andrew's recipe just arrived; will give it a try.]

Tevian

[Tevian Dray]

Thanks, Andrew; yes, that works as you say, for tooltips but not links.

Is it possible to move the svg code to a file? I tried adding a source
attribute to the slate element, as I would do for, say, GeoGebra, but
that didn't work. (This was my mistake last night -- not putting the
rather lengthy svg code in directly.)

As luck would have it, our book and the target URLs *are* both on the
same server, but *not* in the same domain -- and that can't be changed
easily. (The targets are on a site managed by other software.)
Will have to think about whether tooltips might be enough.

Tevian

[Andrew Scholer]

You can put the contents in a separate file and then use <xi:include> to include the contents at build time. Just make sure to specify parse="text":
https://github.com/PreTeXtBook/pretext/blob/9afe98bde96f418787cec978c9e031b9068cff69/examples/sample-book/sage/groups-sage.xml#L349

Andrew

[Tevian Dray]

> You can put the contents in a separate file and then use <xi:include>
> to include the contents at build time. Just make sure to specify
> parse="text"

Thanks for the suggestion, but it doesn't seem to work.
Now I'm getting a namespace error:
Namespace prefix xi on include is not defined
I use lots of includes, but this is the only one contained within a
#section -- and so far as I can tell I can't get an include to work at
that level at all, regardless of whether it's inside an #interactive.

This is presumably some other error, but I haven't had a chance to try
to figure it out...

Tevian

[Rob Beezer]

You need a namespace declaration on the file containing your attempt. See your
other uses.

I thought we just added a warning about this. Maybe check your logs (for our
sake!)?

And while I'm at it, I don't think I would use @text="parse" so try both ways.

[Tevian Dray]

> You need a namespace declaration on the file containing your attempt.
> See your other uses.

Yeah, of course...; thanks. Didn't see a (detailed) warning, but it
could have been swallowed by my local setup.

> And while I'm at it, I don't think I would use @text="parse" so try
> both ways

@text="parse" does not appear to work, but omitting it does.


It is also worth noting that the SVG file takes a long time to process
as an include unless its opening tags (<?xml> and <!DOCTYPE>) are
removed. (I'm actually surprised it compiles this way at all...)


Given the Same-Origin issue, I'll probably abandon this approach in
favor of a link in the caption. Before I do, is there a way to rescale
the included file? The static SVG scales to fit the page; the include
tries to load it at its (large) intrinsic size, as given in #svg.

Thanks all,
Tevian

[Rob Beezer]

On 8/29/25 15:15, 'Tevian Dray' via PreTeXt support wrote:
> @text="parse" does not appear to work, but omitting it does.

Well, Andrew said 'parse="text"' and I got it reversed. :-( But if you got a
result without any such thing, that was the main point.

> It is also worth noting that the SVG file takes a long time to process
> as an include unless its opening tags (<?xml> and <!DOCTYPE>) are
> removed. (I'm actually surprised it compiles this way at all...)

Well, we don't ever compile anything. And I'm not sure which process you mean.
The conversion to HTML or the rendering of the page in your browser? As I think
you found, neither <?xml> nor <!DOCTYPE> is necessary.

> Given the Same-Origin issue, I'll probably abandon this approach in
> favor of a link in the caption.

Your blind readers will thank you.

> Before I do, is there a way to rescale
> the included file? The static SVG scales to fit the page; the include
> tries to load it at its (large) intrinsic size, as given in #svg.

All I can think of is to edit teh SVG itself to change a viewBox or
@height/@width or apply some sort of faithful transformation.

Rob

[Tevian Dray]

> Well, Andrew said 'parse="text"' and I got it reversed.

... and I probably copied from you. :) Trying again, there does not
appear to be a difference with or without parse="text".

> > It is also worth noting that the SVG file takes a long time to process
> > as an include unless its opening tags (<?xml> and <!DOCTYPE>) are
> > removed. (I'm actually surprised it compiles this way at all...)
>
> Well, we don't ever compile anything. And I'm not sure which process you
> mean. The conversion to HTML or the rendering of the page in your browser?

I meant the conversion to HTML, which took several seconds with the
extra elements, versus a fraction of a second without.

> All I can think of is to edit the SVG itself to change a viewBox or

> @height/@width or apply some sort of faithful transformation.

<g transform="scale(N)">...</g> is a good start, although the viewBox
may still need to be adjusted manually.

As for the Same-Origin issue, I could probably work around it in the
apache config file, but that seems like more trouble than it's worth.

Tevian