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>. That’s […]


This content originally appeared on Geoff Graham and was authored by Geoff Graham

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.


This content originally appeared on Geoff Graham and was authored by Geoff Graham


Print Share Comment Cite Upload Translate Updates
APA

Geoff Graham | Sciencx (2022-10-07T18:42:29+00:00) How to remove the SVGs WordPress injects for duotone support. Retrieved from https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/

MLA
" » How to remove the SVGs WordPress injects for duotone support." Geoff Graham | Sciencx - Friday October 7, 2022, https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/
HARVARD
Geoff Graham | Sciencx Friday October 7, 2022 » How to remove the SVGs WordPress injects for duotone support., viewed ,<https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/>
VANCOUVER
Geoff Graham | Sciencx - » How to remove the SVGs WordPress injects for duotone support. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/
CHICAGO
" » How to remove the SVGs WordPress injects for duotone support." Geoff Graham | Sciencx - Accessed . https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/
IEEE
" » How to remove the SVGs WordPress injects for duotone support." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/. [Accessed: ]
rf:citation
» How to remove the SVGs WordPress injects for duotone support | Geoff Graham | Sciencx | https://www.scien.cx/2022/10/07/how-to-remove-the-svgs-wordpress-injects-for-duotone-support/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.