Links in SVG don't work

Bootstrap Studio Help
1

My site contains an SVG image that has links in it.When I view the image in a browser on its own, the links work. When the image is embedded in a page, the links don’t work. Is there something in BSS or BS that could be swallowing the relevant events? Is there some cunning class/style/script I could include that would allow the SVG links to work in a page?

2

Can you share some the code or the site this is on?

3

Draft site. ‘Tiny impacts’ is a link. If you view the image in a separate tab, the link works.

4

SVG used as <img src="file.svg">: This method just renders the SVG as a static image. All interactivity (like links or JavaScript) is stripped away, because the browser treats it like any other image format (PNG, JPG, etc).

Having the <svg> directly in your HTML (inline SVG) is the best way to ensure that features like:

  • clickable links (<a> tags),
  • CSS styling,
  • JavaScript interactivity,

all work as expected.

If you’re generating or including SVGs dynamically, you can also fetch the SVG with JavaScript (e.g., fetch() or XMLHttpRequest) and insert it into the DOM as inline SVG.

2 Likes
5

Thanks; that makes sense! I might also experiment with <object> and <iframe> so I don’t have to edit the HTML whenever the image changes. I guess I’ll have to take more responsibility for responsive layout, since <img> does that out of the box.

6

For the record, I’ve basically got this working. It’s not exactly a BSS topic, although it can be applied to BSS. I used a BSS Custom Code component with an <object> element, so I wouldn’t need to edit the code whenever the image changes. Styling is still a work in progress. The code is:

<div style="max-width: 800px">
    <object type="image/svg+xml" data="influence.svg" width="100%" height="100%">
        Your browser does not support SVG.
    </object>
</div>

It would be nice if BSS allowed custom Options for Custom Code elements. That way, the SVG filename could be selected from the BSS UI rather than being hard-coded in the HTML. This would make it more feasible to publish Custom Code elements online for other users.

Links (<a> elements) in the SVG file need to specify target="_top"; otherwise the new content will only replace the SVG image rather than the whole page.

Getting LibreOffice Draw to produce correct SVG links is also a problem, but that’s definitely off-topic.

7

Are there any browsers still in use today that do not support SVG? I don’t think so.

8

The issue was getting links in SVG to work. If you just use an Image component (<img> element), they won’t.

9

@Gondwana

There are important differences between inline SVG (<svg>...</svg>) and using an external SVG with <object data="file.svg">. Look it up to find out which method is best for your use case.

1 Like
10

@kuligaposten I already did, thanks to your original post here. I posted the solution that works for me above.

11

You cannot directly style the SVG inside the <object> tag using an external CSS file. The reason is that the SVG is embedded as an external resource (via the data attribute) and the content is isolated from the rest of the HTML document, which means the external CSS cannot target elements inside the SVG.

  • Inline SVG gives you full control over styling with CSS.
  • object tag requires internal styles in the SVG file or JavaScript manipulation.

Your fallback inside the <object> won’t show unless the browser doesn’t support the <object> element itself — which is extremely rare today.
If you’re targeting very old browsers (e.g., legacy intranet apps still supporting IE8) then you could have the fallback text “Your browser does not support <object>”.

Be careful not to confuse HTML attributes with CSS styles — HTML width and height attributes must be numeric values (pixels), but in the style attribute or CSS, values like 100% or auto are valid and commonly used for responsive design, as in your example.

If you want your svg to be responsive you can do something like this

<div class="container">
	<div class="row">
		<div class="col">
			<object 
				type="image/svg+xml" 
				data="influence.svg" 
				style="width:100%; height:auto">
			</object>
		</div>
	</div>
</div>
12

It was always my intention to style the <object> by applying styles to it or its parents. Thank you for your code to make it responsive; that’s probably all I need.

The reason for the fallback in <object> is so that something is visible with BSS. BSS’s renderer doesn’t display SVG. It’s fine in the preview.