If you’ve ever tried to add a clickable SVG logo to an InDesign project, you may have noticed the link doesn’t carry through in export. That’s because Adobe InDesign doesn’t support SVG hyperlinks natively, so the file renders as an image only. This can be a real frustration when you're designing interactive documents or digital publications. Fortunately, by preparing your SVG file correctly in Adobe Illustrator and exporting with in5, your SVG logo can become fully clickable, preserving brand interactivity right inside the browser.
The Problem
InDesign doesn’t allow SVG hyperlinks to pass through during export. So if you add an SVG file with an embedded link, like a logo linking to your company site, it won’t work in the final output. This becomes especially frustrating when using the Viewer Display panel in in5, where a brand logo is typically added. Even if your SVG looks perfect in the layout, the interaction is lost unless you structure the file correctly before import.
The Solution
Here’s how to properly embed a hyperlink inside an SVG logo using Adobe Illustrator, and ensure it functions when exported with in5:
Step 1: Prepare Your SVG Logo in Illustrator
Open your logo file in Illustrator, or create a new one. If the logo is part of a larger composition, isolate it in its own document for clarity.
Step 2: Create a Transparent Clickable Area
- Draw a rectangle that covers the full logo area.
- Fill the rectangle with any color (it won’t be visible later).
- In the Transparency panel, set the Opacity to 0%.
Important: Do not set the fill to “None” as the rectangle won’t register as clickable.
Step 3: Add the Hyperlink
- Open the Attributes panel (Window > Attributes).
- Select the transparent rectangle.
- Under Image Map, choose “Rectangle” and enter the full URL
Tip: Add a target attribute to control link behavior:
- Use target="_blank" to open in a new tab
- Use target="_top" to break out of an iframe (useful if the SVG is inside an iframe)
Step 4: Save the SVG Correctly
- Go to File > Save As or File > Save a Copy.
- Choose SVG as the format.
Avoid Export As—this method strips out hyperlink data from the file.
Adding a working SVG hyperlink inside an interactive digital publication reinforces brand identity and provides intuitive navigation. When you pair this Illustrator method with in5’s HTML5 export, you get a smooth, browser-ready experience where your clickable logo just works.
While InDesign doesn’t support SVG hyperlinks out of the box, you can still deliver a rich, branded experience by combining Illustrator’s hyperlink features with in5’s export capabilities. This method ensures your logo links behave consistently across platforms, without any manual coding.
Want a visual walkthrough? Watch "How to Add a Hyperlinked Logo & Custom Branding to your Digital Magazine" tutorial from our in5 Ajar Productions YouTube channel.