Inline SVG being stripped from backend display

• jvwrx

• September 8, 2021 at 10:19 pm

Hey all,

I use little inline SVG rectangles to help website editors see and choose brand colors…

In Radio field labels (with an option such as primary : primary <svg class=”clone-color-bar”><rect fill=”#1F72B1″></rect></svg>):

In a Message field in the sidebar so they can quickly see their brand color names and hex value (entered like <svg class=”clone-color-bar”><rect fill=”#1f72b1″></rect></svg> primary #1f72b1):

But after upgrading to ACF 5.10.2 my SVGs are being stripped:

I read through the changelog and see updates have been made to escape HTML and I wonder if this is related? Is there any way to have my inline SVG appear again? I tried replicating what I need with <div>s instead of <svg> but it seems the style attribute is stripped from those as well which would make it harder to define a background color quickly (which may be there reason I’m using inline SVG at all, I’ve been using this method on sites for a few years and forget the exact reason)

Using Classic Editor plugin, btw, though I disabled it and saw the same issue with the block editor.

Thank you!

• John Huebner

• September 16, 2021 at 11:40 am

It is more than likely related to ACF removing HTML from content. Report this problem to the developers https://www.advancedcustomfields.com/contact/

• jvwrx

• September 16, 2021 at 4:05 pm

Thanks John. Submitted.

• jvwrx

• September 17, 2021 at 6:18 pm

Here’s what I heard back from support in case it helps anybody else. It’s not a bug, per se, but related to the newer HTML escaping and now requires a filter, customized to your needs:

ACF 5.10 introduced a new safer escaping system for anything rendered by ACF to prevent XSS attacks, by using WordPress’s kses system.

You can find more information on this here: https://www.advancedcustomfields.com/resources/html-escaping/

Specifically, at the bottom of that article you can see our code snippet you’ll need to add to your theme or plugin in order to allow SVGs inside your markup, as WordPress does not allow them by default.