If I have an SVG like this:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="50" cy="50" r="50" fill="url(#gradient)" />
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
  </defs>
</svg>

And I use it like this:

import Thing from './thing.svg';

export default function App() {
  return <Thing />
}

When I look at it in my web inspector, I see this:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="url(#a)"></circle>
  <defs>
    <linearGradient id="a">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="100%" stop-color="orange"></stop>
    </linearGradient>
  </defs>
</svg>

The id has been replaced with a.

All SVGs get their IDs replaced with a, b, c, starting over at a in each SVG, so the IDs all collide. As a result, all the SVGs are affecting each other. If I had a different SVG with a different definition in it earlier in the page, it would override the gradient in this one.

I'm aware that I can serve the SVG from public instead, but I'm working on a project where many SVGs are already being imported in this way. How can I debug this? Should I avoid importing SVGs like this?