Symbols with Gradients inside SVG Sprites

Last month I learned: When using a svg symbol that contains a gradient inside an svg icon-sprite you can’t use display: none on the sprite’s <svg> tag without the gradient being lost.

Today I learned: Hiding the <svg> using methods that include visibility: hidden will just wipe some other icons 🔥 Not all, but a fair share, and I haven’t figured out the exact subset.

Solution: So far, the following has worked in all my use cases:

<svg class="sr-only" aria-hidden="true">

• .sr-only (screen reader only, snippet below) prevents prevents the svg from affecting the layout in any way
• Seemingly contradicting now aria-hidden saves screen reader users having to listen to the sound of XML gibberish

*My default screen-reader-only utility: .sr-only:

(@responsive assumes post processing with TailwindCSS is available, otherwiese just leave it and forgo the joys of auto-generated breakpoint utilities)

@responsive {
    .sr-only {
        position: absolute !important;
        overflow: hidden;
        height: 1px;
        width: 1px;
        clip: rect(1px, 1px, 1px, 1px);

        &:focus {
            position: static;
            height: auto;
            width: auto;
        }
    }
}

@responsive {
    .sr-only-reset {
        position: static !important;
        overflow: visible;
        height: auto;
        width: auto;
        clip: unset;
    }
}