Twelve gradients, one id - DHS... Note

Twelve gradients, one id - DHSeaDev

A subtle markup defect involved twelve identical SVG gradients, each defined with the same ID. This resulted in eleven of the twelve gradient definitions being unused, while all visual elements incorrectly referenced the first definition. The page appeared visually correct because all duplicate gradients had identical color stops. This invisibility meant standard site audits, including the author's own five passes, failed to detect the issue. The problem remained hidden until a gradient definition was changed, potentially affecting the wrong element or no element at all. A crucial audit check for duplicate IDs was missing because it had never caused a visible problem before. An initial fix attempt that sequentially renamed IDs created a more severe, visible bug by pairing the wrong definitions with references. This oversight was prevented by a count assertion, which flagged an imbalance between definitions and references. The correct solution scopes ID renames to individual SVG blocks, ensuring definitions only match references within their own scope. This experience highlights the importance of auditing for duplicate IDs, especially with inline SVGs, and verifying find-and-replace operations meticulously.