While drafting this question, I played around on codepen and found this solution to fix the rendering for Chromium browsers by using two separate filters:

img {
  filter: drop-shadow(1px 1px 0 black)
    drop-shadow(0px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px 0px 0 black);
}

@-moz-document url-prefix() {
  img {
    filter: drop-shadow(1px 1px 0 black)
      drop-shadow(-1px 1px 0 black)
      drop-shadow(1px -1px 0 black)
      drop-shadow(-1px -1px 0 black);
  }
}

Firefox:

Chrome:

However, I still don't understand why this rendering difference occurs, outside of the obvious—that they implement svg rendering differently.