Search code examples
svgamp-htmlxlinkamp-img

SVG file with xlink to another page in AMP project

I have an SVG file containing a number of xlinks that navigate to a different page. For example:

<a xlink:href="us/ak">...</a>

The SVG is a US map, and I'd be happy to provide it, but it's too big to include here.

When I try to use this SVG in an AMP page, the xlinks don't work. I see in the AMP spec that xlinks in an SVG are required to have a target URI starting with "#", so I think that's why my xlink isn't working. It behaves the same whether I use an amp-img or img tag.

It works fine if I put it in an img tag on a non-AMP page.

Is there a way to get my links to go to a new page, and not just to a #-link on the same page?

The color change on hover also stops working when I put the SVG on an AMP page, but I'm tackling one problem at a time.

Solution

  • If you just want to link to another page, <a href="..."> should work...