On October 7, 2022, I learned...

How to remove the SVGs WordPress injects for duotone support

WordPress has a duotone feature for styling elements — like images — with an SVG filter that overlays and colorizes the thing.

It’s a nice feature! But I can honestly do without it on my own little website. Plus, it does this thing where it injects individual <svg> elements right above after the <body>.

DevTools inspector with 8 highlighted SVG elements.

That’s a lot more markup than I need for something I ain’t using, and I think it’s more than a little heavy-handed for WordPress to enable this by default.

So how do we nix those SVGs? There’s nothing of the sort in the Block Themes Handbook. There was a debate over this in a related WordPress 5.9 ticket that offers a few possible hooks we could use in functions.php. Buuuuut none of those seem to work, at least when I try them in WordPress 6.0.2.

In between then and now, though, the theme.json file seems to have gained the ability to stop those SVGs from being injected:

"settings": {
  "color": {
    "duotone": null,
    "customDuotone": false,
    // etc.

Tada!

It’s great we can do this at the theme configuration level. But I also wish it was an opt-in feature rather than something that’s enabled by default.

Source

13 Comments

Iggy

# January 23, 2023

yes, it works, finally :)
e s

# February 20, 2023

That’s awesome, thanks for the write up. It was super annoying scrolling past all that on inspect. I found this post after the goodbye css tricks post on HN. have a great day!
Joe

# February 21, 2023

Just to let you know, this can break the editor. I’m hoping they update to support this solution, because turning it off in the theme.json would be ideal.

I’m using a php function at the moment. remove_action( ‘wp_body_open’, ‘wp_global_styles_render_svg_filters’ );

More discussion here: https://github.com/nas/content/live/geoffgraham/gutenberg/issues/38299