Replace badge icons with rubber ducks

The following userscript will replace the default badge icons with little rubber ducks

// ==UserScript==
// @name        StackExchange, replace badge icons
// @match       *://*.askubuntu.com/*
// @match       *://*.mathoverflow.net/*
// @match       *://*.serverfault.com/*
// @match       *://*.stackapps.com/*
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.superuser.com/*
// @exclude     *://api.stackexchange.com/*
// @exclude     *://blog.stackexchange.com/*
// @exclude     *://blog.stackoverflow.com/*
// @exclude     *://chat.stackexchange.com/*
// @exclude     *://chat.stackoverflow.com/*
// @exclude     *://data.stackexchange.com/*
// @exclude     *://elections.stackexchange.com/*
// @exclude     *://openid.stackexchange.com/*
// @exclude     *://stackexchange.com/*
// @exclude     *://*/review
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

      /* change icons of badges */
      .badge1, .badge2, .badge3 {
         background-image: url("https://svgshare.com/i/9LE.svg") !important;
      }

` );

Caveat:

For a reason unknown to me, the ducks are cut off on some sites. For example they work fine on sites like

• tex.stackexchange.com
• codereview.stackexchange.com

but are cut off on

• stackapps.com
• meta.stackexchange.com

(these problems have been fixed in the answer https://stackapps.com/a/8117/54601 by Brock Adams)