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:
Add a link field to the SVG Element
Add a general Link Element, that wraps everything inside a link
Change the image element / logo element from “img src” to inline svg if an svg is used
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:
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”.
