SVGの一部が欠落（色落ち等）してしまった話

事象

SVGをpngなどの圧縮された画像のように捉えていると原因が全く見えなくなって、解決に少し時間がかかってしまった話です。
デザイナーさんが仕上げたXDからSVGをダウンロードし、そのまま各コンポーネント内にそのSVGを配置していってブラウザ上で表示をしたところ、タイトルの通りSVGの一部に欠落が生じました（青色であったところが脱色していました）。

これがページによって発生したりしなかったりして発覚が遅れました。

原因

SVGはXMLで定義されていて、CSSのようにidを指定して定義ができます。このidが他のSVGのidと重複した場合に、画像の一部がその定義で上書きされ、部分的な色落ち等が発生するという事です。
対応は単純で、idが重複しないように変更を行いました。