[Resolved] Add inline SVG to Copyright section of footer

[feisar]

I’m trying to add an inline SVG image as a href link (so it can be styled via CSS) to the Copyright section of my sites footer.

However, the SVG code is stripped out or, if entered as a data URI, displayed raw on the page.

Is there a recommended (and safe) way to do this?

(Using a link to an external SVG displays ok, but then can’t be styled via CSS).

Thanks for any tips.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[feisar]

Thanks, I’ve added the link to the private URL field.

It’s the “Site by” logo at the very bottom right of the page.

I was hoping to use the fill: currentColor; CSS as mentioned here, to allow the logo to adopt the color of the surrounding text, and then use CSS to change the fill colour on hover.

[Leo]

Not sure if fully understand.

Does that method work in regular page content?

The copyright box should take HTML just like the regular page content.

[feisar]

Here’s a reduced case example. If you add the following code into the regular page content, the SVG displays and inherits the colour of the parent, including hover colour changes.

<a href="#"><svg viewBox="0 0 23 23" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><circle cx="11.25" cy="11.25" r="11.25" fill="currentColor"/></svg> Inherits link color with hover</a>

If you enter exactly the same code into Customiser > Layout > Footer > Copyright the SVG doesn’t display in the preview and the SVG code is stripped out when saving.

I’ve tried with the Safe SVG and SVG Support plugins but they make no difference.

EDIT: If I generate the copyright section using the ‘generate_copyright‘ function rather than the customiser, it works.

[Leo]

Must be something going on in the copyright field.

In this case generate_copyright would be the solution.

Glad you were able to find an alternative solution!

[feisar]

Thanks. It would be useful/easier if I could just use the Copyright field of the Customizer.

Do you think this is a bug, and if so, is it within GeneratePress (and potentially could be fixed) or within core WordPress functionality?

[Leo]

I believe that would be a WordPress functionality issue but we will definitely take a closer look.

Thanks 🙂

[feisar]

Thank you.

[Leo]

No problem 🙂

[Author]

Posts