SVG Links / Link Element

Feature Requests / Improvements
1

Hi,

I just stumbled upon a problem: i want to use a SVG multiple times on a site, sometimes in a light version, sometimes in a dark version (change fill color) and the SVG should be linked to a website.

So far there is no way to do this (except for a custom code block):

  • not with the SVG element (no link field)
  • not with the image element (can´t change the fill color because the svg is linked)
  • not with the logo element (which is basically the same as the image element)
  • and not with a link element (because that doesn´t exist yet)

Possible Solutions:

  1. Add a link field to the SVG Element
  2. Add a general Link Element, that wraps everything inside a link
  3. Change the image element / logo element from “img src” to inline svg if an svg is used

Regards,
timmse

1 Like
2

Just found out that the icon element has a link field and if a custom SVG is used instead of a predefined icon, it´s exactly what i need.

But still … the SVG element should also have a link field :wink:

7 Likes
3

Was coming to ask/request the same. A link field in the custom SVG element would be a small but nice enhancement

3 Likes
4

Actually, It’s not working as I wish:
I would like to use a SVG logo in my header (to have the ability to change the color on hover) but if I add an icon, it has this weird padding on the bottom and I can’t vertically center it:

image
image852Ă—138 7.65 KB

@timmse Do you have a workaround to recommend? Thanks in advance!

5

Hey Jo,
yep, the a-tag inherits the body line-height. The problem is that no style settings end up on the a, they all end up on the SVG, and we can’t address the a-tag either because it doesn’t have an ID or a class. So I just added this as a bug to our system.

An intermediate solution is to wrap the icon with a container (or in the upcoming 1.5beta with a DIV) and set the link there. This does not change anything in the markup. It is only important that you set the container width to “auto”.

Best regards,
timmse

1 Like
6

Thank you @timmse ! Didn’t even though about wrapping in a div. So simple. Thanks a lot

1 Like
7

Thank you for this advice. But when we wrapped the svg in a div, the div take the full space and the link is apply on all this space. Any idea to have the div the exact same size than the svg ?