미묘한 마크업 결함으로 인해 동일한 ID로 정의된 12개의 동일한 SVG 그라디언트가 있었습니다. 이로 인해 12개의 그라디언트 정의 중 11개가 사용되지 않았고, 모든 시각적 요소는 첫 번째 정의를 잘못 참조했습니다. 모든 중복 그라디언트가 동일한 색상 중지점을 가지고 있었기 때문에 페이지는 시각적으로 올바르게 보였습니다. 이러한 보이지 않음은 작성자 자신의 5번의 검사를 포함한 표준 사이트 감사에서 문제를 감지하지 못하게 했습니다. 그라디언트 정의가 변경되어 잘못된 요소에 영향을 미치거나 전혀 영향을 미치지 않을 때까지 문제는 숨겨져 있었습니다. 이전에 눈에 보이는 문제를 일으킨 적이 없었기 때문에 중복 ID에 대한 중요한 감사 확인이 누락되었습니다. 순차적으로 ID 이름을 변경하는 초기 수정 시도는 잘못된 정의와 참조를 쌍으로 만들어 더 심각하고 눈에 보이는 버그를 만들었습니다. 이러한 간과는 정의와 참조 간의 불균형을 표시한 카운트 어설션으로 인해 방지되었습니다. 올바른 솔루션은 ID 이름 변경을 개별 SVG 블록으로 범위 지정하여 정의가 자체 범위 내에서만 참조와 일치하도록 합니다. 이 경험은 중복 ID에 대한 감사, 특히 인라인 SVG의 경우 중요하며 찾기 및 바꾸기 작업의 세심한 검증의 중요성을 강조합니다.