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!

DevTools inspector.

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.

Comments

Reposts

  • John James Jacoby
  • Ryan McCue (parody)
  • David Bisset

Leave a Reply

Markdown supported