If you are creating a digital publication in Adobe InDesign and want to include a clickable brand logo- such as an external link to your website, you may run into a common limitation: InDesign doesn't natively support SVG hyperlinks. That means even if you add a logo as an SVG file, the link won't work by default in the exported output.
This is especially relevant when using the Viewer Display panel in in5, which allows you to showcase custom branding. Including a hyperlink svg logo in that space is a great way to provide subtle navigation or reinforce your brand, but only if the link carries through in the export.
Fortunately, by preparing your Adobe logos SVG file correctly in Illustrator, with the proper hyperlink formatting, you can export it to HTML5 using in5 and the link will remain functional in your final project.
You can embed a live hyperlink into an SVG file by creating a transparent clickable are above your logo in Illustrator. Here is how:
- Open or Create your Logo in Illustrator
- Use an existing SVG file or build your logo directly in a new Illustrator document.
- Create a Clickable Area
- Draw a rectangle that covers the area of your logo.
- Apply a solid fill color (any color, this will be hidden later).
- Set the Opacity to 0% in the Transparency panel.
Do not use "None" as the fill, this may cause the rectangle not to register.
- Add the Hyperlink
- Open the Attributes panel (Window > Attributes).
- Under the Image Map select Rectangle and enter your desired URL.
- (Optional) If you want the link to open in a new browser tab or break out of an inframe , add this target attribute:
- "target="_top" opens the link in the topmost browser window (useful if the SVG is inside an iframe).
- You can also use the target="_blank" to open the link in a new browser tab.
- Save the File as SVG (Correctly)
- Go to File > Save As or File > Save a Copy.
- Choose SVG as the format.
Do not use "Export As" this method does not retain hyperlink data in the SVG.
For a visual walkthrough, see this video "How to Add a Hyperlinked Logo & Custom Branding to your Digital Magazine" from the Ajar Productions YouTube channel.