SVG with from external symbol sheet not loading in Firefox or Safari

Question

We are loading our SVGs from a symbol sheet hosted in our assets/ folder and have been rendering them into the application with <use>. This works great for SVGs that only define <path>s but we have noticed that any SVGs that have additional <defs> (e.g. clip-path, filters, etc) fail to load in Firefox and Safari. If we instead use the SVG element inline it renders as expected in all browsers. Not knowing much about SVG I am trying to understand what is happening so I can implement the best solution for the team.

SVG symbol sheet:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="close" fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z" />
        </symbol>

        <symbol id="selectingFile" viewBox="0 0 163 157" fill="none"><defs><filter id="filter0_d_3067_12751" x="46.3838" y="21.7812" width="107.724" height="129.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter1_d_3067_12751" x="110.765" y="28.9346" width="59.2979" height="61.8789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter2_d_3067_12751" x="37.3975" y="24.4741" width="93.4717" height="117.553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter3_d_3067_12751" x="86.252" y="19.3281" width="60.5449" height="58.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter4_d_3067_12751" x="27.4434" y="6" width="86.5293" height="111.329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter5_d_3067_12751" x="69.0947" y="-4.25391" width="60.7969" height="56.8706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter6_d_3067_12751" x="2.2666" y="25.5039" width="100.029" height="118.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter7_d_3067_12751" x="43.7129" y="14.8882" width="62.7393" height="56.7388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><clipPath id="clip0_3067_12751"><rect width="163" height="157" fill="white"/></clipPath></defs><g clip-path="url(#clip0_3067_12751)"><g filter="url(#filter0_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M136.062 41.7522L83.2021 24.8763C82.1499 24.5404 81.0245 25.1211 80.6886 26.1733L50.4794 120.797C50.1435 121.849 50.7241 122.974 51.7764 123.31L122.776 145.977C123.828 146.313 124.953 145.732 125.289 144.68L150.107 66.9437L136.062 41.7522Z" fill="white"/></g><g filter="url(#filter1_d_3067_12751)"><path d="M150.062 66.8135L138.424 45.96C137.571 44.4314 135.305 44.6588 134.773 46.3264L130.859 58.5833C130.524 59.6356 131.104 60.7609 132.156 61.0969L150.062 66.8135Z" fill="white"/></g><g filter="url(#filter2_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M107.662 32.408L52.3925 27.4822C51.2923 27.3842 50.3209 28.1966 50.2228 29.2968L41.4053 128.233C41.3073 129.333 42.1197 130.305 43.2199 130.403L117.455 137.019C118.556 137.117 119.527 136.305 119.625 135.204L126.869 53.9244L107.662 32.408Z" fill="white"/></g><g filter="url(#filter3_d_3067_12751)"><path d="M126.797 53.8071L110.885 35.9982C109.719 34.6929 107.557 35.4096 107.402 37.1532L106.26 49.9688C106.162 51.069 106.974 52.0404 108.074 52.1385L126.797 53.8071Z" fill="white"/></g><g filter="url(#filter4_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.9315 9H33.4434C32.3388 9 31.4434 9.89543 31.4434 11V110.329C31.4434 111.433 32.3388 112.329 33.4434 112.329H107.973C109.078 112.329 109.973 111.433 109.973 110.329V28.7265L88.9315 9Z" fill="white"/></g><g filter="url(#filter5_d_3067_12751)"><path d="M109.891 28.6165L92.462 12.2904C91.1845 11.0937 89.0947 11.9996 89.0947 13.75V26.6165C89.0947 27.721 89.9902 28.6165 91.0947 28.6165H109.891Z" fill="white"/></g><g filter="url(#filter6_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.8912 28.5039L7.97924 36.4773C6.88614 36.636 6.12867 37.6508 6.28739 38.7439L20.5604 137.042C20.7191 138.135 21.7339 138.892 22.8271 138.734L96.5833 128.024C97.6764 127.865 98.4339 126.85 98.2752 125.757L86.5494 45.0024L62.8912 28.5039Z" fill="white"/></g><g filter="url(#filter7_d_3067_12751)"><path d="M86.4521 44.9049L66.8578 31.2528C65.4216 30.2521 63.4837 31.4488 63.7352 33.1812L65.5841 45.9141C65.7428 47.0072 66.7576 47.7646 67.8507 47.6059L86.4521 44.9049Z" fill="white"/></g></g></symbol>
    </defs>
</svg>

index.html:

<html>
  <body>
    <p>External SVG w/ defs</p>
    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/icons.svg#selectingFile"></use>
    </svg>

    <p>External SVG no defs</p>
    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/icons.svg#close"></use>
    </svg>

    <p>Inline SVG w/ defs</p>
    <svg id="selectingFile" viewBox="0 0 163 157" fill="none"><defs><filter id="filter0_d_3067_12751" x="46.3838" y="21.7812" width="107.724" height="129.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter1_d_3067_12751" x="110.765" y="28.9346" width="59.2979" height="61.8789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter2_d_3067_12751" x="37.3975" y="24.4741" width="93.4717" height="117.553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter3_d_3067_12751" x="86.252" y="19.3281" width="60.5449" height="58.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter4_d_3067_12751" x="27.4434" y="6" width="86.5293" height="111.329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter5_d_3067_12751" x="69.0947" y="-4.25391" width="60.7969" height="56.8706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter6_d_3067_12751" x="2.2666" y="25.5039" width="100.029" height="118.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter7_d_3067_12751" x="43.7129" y="14.8882" width="62.7393" height="56.7388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><clipPath id="clip0_3067_12751"><rect width="163" height="157" fill="white"/></clipPath></defs><g clip-path="url(#clip0_3067_12751)"><g filter="url(#filter0_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M136.062 41.7522L83.2021 24.8763C82.1499 24.5404 81.0245 25.1211 80.6886 26.1733L50.4794 120.797C50.1435 121.849 50.7241 122.974 51.7764 123.31L122.776 145.977C123.828 146.313 124.953 145.732 125.289 144.68L150.107 66.9437L136.062 41.7522Z" fill="white"/></g><g filter="url(#filter1_d_3067_12751)"><path d="M150.062 66.8135L138.424 45.96C137.571 44.4314 135.305 44.6588 134.773 46.3264L130.859 58.5833C130.524 59.6356 131.104 60.7609 132.156 61.0969L150.062 66.8135Z" fill="white"/></g><g filter="url(#filter2_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M107.662 32.408L52.3925 27.4822C51.2923 27.3842 50.3209 28.1966 50.2228 29.2968L41.4053 128.233C41.3073 129.333 42.1197 130.305 43.2199 130.403L117.455 137.019C118.556 137.117 119.527 136.305 119.625 135.204L126.869 53.9244L107.662 32.408Z" fill="white"/></g><g filter="url(#filter3_d_3067_12751)"><path d="M126.797 53.8071L110.885 35.9982C109.719 34.6929 107.557 35.4096 107.402 37.1532L106.26 49.9688C106.162 51.069 106.974 52.0404 108.074 52.1385L126.797 53.8071Z" fill="white"/></g><g filter="url(#filter4_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.9315 9H33.4434C32.3388 9 31.4434 9.89543 31.4434 11V110.329C31.4434 111.433 32.3388 112.329 33.4434 112.329H107.973C109.078 112.329 109.973 111.433 109.973 110.329V28.7265L88.9315 9Z" fill="white"/></g><g filter="url(#filter5_d_3067_12751)"><path d="M109.891 28.6165L92.462 12.2904C91.1845 11.0937 89.0947 11.9996 89.0947 13.75V26.6165C89.0947 27.721 89.9902 28.6165 91.0947 28.6165H109.891Z" fill="white"/></g><g filter="url(#filter6_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.8912 28.5039L7.97924 36.4773C6.88614 36.636 6.12867 37.6508 6.28739 38.7439L20.5604 137.042C20.7191 138.135 21.7339 138.892 22.8271 138.734L96.5833 128.024C97.6764 127.865 98.4339 126.85 98.2752 125.757L86.5494 45.0024L62.8912 28.5039Z" fill="white"/></g><g filter="url(#filter7_d_3067_12751)"><path d="M86.4521 44.9049L66.8578 31.2528C65.4216 30.2521 63.4837 31.4488 63.7352 33.1812L65.5841 45.9141C65.7428 47.0072 66.7576 47.7646 67.8507 47.6059L86.4521 44.9049Z" fill="white"/></g></g></svg>
  </body>
</html>

Unfortunately, I can't post a snippet due to the external file requirement, but downloading these two files locally and serving from a web server reproduces the issue. Any advice/recommendations would be helpful.

`xlink:href` is deprecated: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href — morganney, Oct 22 '22 at 16:37
@morganney I saw that but that doesn't explain why SVGs without `` work fine. — Hunter McMillen, Oct 24 '22 at 13:56
@HunterMcMillen That’s why it was a comment and not an answer. — user3840170, Oct 24 '22 at 14:02

score 4 · Accepted Answer · edited Nov 30 '22 at 22:33

Currently, browsers handle <defs> content quite differently in external svgs:
Many definitions like clip paths, gradients, masks or styles will just be omitted.

Quick fix:

You don't need to wrap <symbol> elements in <defs>, since they are invisible by default.
Move <defs> to the root of your external svg like so.
Nested <defs> will also be ignored.

<svg  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="filter1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>
    <symbol id="symbol1">
        <rect filter="url(#filter1)" x="25%" y="25%" width="50%" height="50%" fill="orange"  />
    </symbol>
</svg>

As your rectangular clip-path="url(#clip0_3067_12751)" doesn't clip anything - this fix might be enough.

Other pifalls: gradients, masks, clip-paths

With this structure, Firefox will also apply clip paths and masks defined in external <defs> yay!!! ...
Chromium will omit these - arrghh!!!

Left: Chromium: clip-path, mask, gradient omitted. Filters applied
Right: Firefox (expected result)

Workaround: move clip-paths etc. to inlined svg

Move these <defs> to an inlined hidden <svg>.
It's important to hide this svg via zero width and height properties like width:0; height:0;position:absolute;.
display:none or visibility:hidden will remove/disable gradients, clip paths etc.

Simplified test.svg (for local testing)

<!-- HTML: change the href attribute to "assets/test2.svg#sym4" on you local server --> 
<svg width="20em" viewBox="0 0 100 100">
    <use href="#sym4" fill="url(#grad4)"  mask="url(#mask4)" clip-path="url(#clip4)" 
    style="--stroke: red; --transform:translate(50px, 50px) rotate(45deg) translate(-50px, -50px)"/>
</svg>

<!-- HTML: inlined defs assets, Don't hide them via display:none or visibility:hidden!  -->
<svg viewBox="0 0 100 100" style="width:0; height:0;position:absolute" aria-hidden="true">
    <linearGradient id="grad4"  gradientTransform="rotate(90)">
        <stop offset="5%" stop-color="gold" />
        <stop offset="95%" stop-color="red" />
    </linearGradient>
    <clipPath id="clip4" clipPathUnits="objectBoundingBox">
        <path d="M0.905 0.288c0.081 0.14 0.117 0.295 0.08 0.413c-0.037 0.118-0.146 0.199-0.256 0.248c-0.111 0.049-0.223 0.067-0.357 0.034c-0.136-0.034-0.295-0.117-0.349-0.264c-0.056-0.146-0.008-0.357 0.101-0.504c0.109-0.147 0.279-0.232 0.427-0.212c0.148 0.02 0.273 0.145 0.354 0.285z"/>
    </clipPath>
    <mask id="mask4" x="0" y="0" width="100%" height="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        <rect x="0" y="50" width="100%" height="50%" fill="#999" />
    </mask>
</svg>


<!-- SVG: content of the external svg asset library file -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <filter id="blur4">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>
    <symbol id="sym4" viewBox="0 0 100 100" filter="url(#blur4)">
        <rect x="0%" y="0%" width="100%" height="100%" d-fill="orange"  />
        <line id="l4" x1="50%" y1="25%"
              x2="50%" y2="75%"
              stroke="var(--stroke)"
              stroke-width="2" style="transform:var(--transform)" />
    </symbol>
</svg>

Sub element styles in symbols

As demonstrated in the above snippet, you can (to some extent) use css variables in your <symbol> definitions that can be redefined via <use> style attributes.

<line x1="0" y1="0" x2="100" y2="0" stroke="var(--stroke)"/>

Css variables are well supported by all major browsers.
Css calc() method in conjunction with variables can still be a bit unpredictable, when used in svg. So you definitely need some extra cross-browser tests.

<use href="#symbol" style="--stroke: red;" />

Deprecated `xlink:href` attribute

It's true you should rather switch to the modern attribute/syntax href.
Worth noting: the deprecated legacy syntax ist still perfectly supported by pretty much any browser. See caniuse record.
But, it is still required by a lot of desktop applications that only support ~svg.1.1 features.
For best backwards compatibility you can add both attributes like so:

<use href="#symbol" xlink:href="#symbol" />

But make sure you add the xmlns:xlink="http://www.w3.org/1999/xlink" name attribute to the parent svg.

morganney · Answer 2 · 2022-10-22T17:10:40.133

According to the spec for symbol:

When a symbol is instantiated as the referenced element of a ‘use’ element, it is therefore rendered very similarly to a nested ‘svg’ element.

I noticed that Firefox was not including an svg element with id="selectingFile" similar to Chrome and Safari 16 (which was working for me). I decided to change the symbol to svg and it rendered in Firefox (macOS Montery 12.5.1).

SVG symbol sheet

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="close" fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z" />
        </symbol>

        <svg id="selectingFile" viewBox="0 0 163 157" fill="none"><defs><filter id="filter0_d_3067_12751" x="46.3838" y="21.7812" width="107.724" height="129.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter1_d_3067_12751" x="110.765" y="28.9346" width="59.2979" height="61.8789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter2_d_3067_12751" x="37.3975" y="24.4741" width="93.4717" height="117.553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter3_d_3067_12751" x="86.252" y="19.3281" width="60.5449" height="58.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter4_d_3067_12751" x="27.4434" y="6" width="86.5293" height="111.329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter5_d_3067_12751" x="69.0947" y="-4.25391" width="60.7969" height="56.8706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter6_d_3067_12751" x="2.2666" y="25.5039" width="100.029" height="118.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter7_d_3067_12751" x="43.7129" y="14.8882" width="62.7393" height="56.7388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><clipPath id="clip0_3067_12751"><rect width="163" height="157" fill="white"/></clipPath></defs><g clip-path="url(#clip0_3067_12751)"><g filter="url(#filter0_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M136.062 41.7522L83.2021 24.8763C82.1499 24.5404 81.0245 25.1211 80.6886 26.1733L50.4794 120.797C50.1435 121.849 50.7241 122.974 51.7764 123.31L122.776 145.977C123.828 146.313 124.953 145.732 125.289 144.68L150.107 66.9437L136.062 41.7522Z" fill="white"/></g><g filter="url(#filter1_d_3067_12751)"><path d="M150.062 66.8135L138.424 45.96C137.571 44.4314 135.305 44.6588 134.773 46.3264L130.859 58.5833C130.524 59.6356 131.104 60.7609 132.156 61.0969L150.062 66.8135Z" fill="white"/></g><g filter="url(#filter2_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M107.662 32.408L52.3925 27.4822C51.2923 27.3842 50.3209 28.1966 50.2228 29.2968L41.4053 128.233C41.3073 129.333 42.1197 130.305 43.2199 130.403L117.455 137.019C118.556 137.117 119.527 136.305 119.625 135.204L126.869 53.9244L107.662 32.408Z" fill="white"/></g><g filter="url(#filter3_d_3067_12751)"><path d="M126.797 53.8071L110.885 35.9982C109.719 34.6929 107.557 35.4096 107.402 37.1532L106.26 49.9688C106.162 51.069 106.974 52.0404 108.074 52.1385L126.797 53.8071Z" fill="white"/></g><g filter="url(#filter4_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.9315 9H33.4434C32.3388 9 31.4434 9.89543 31.4434 11V110.329C31.4434 111.433 32.3388 112.329 33.4434 112.329H107.973C109.078 112.329 109.973 111.433 109.973 110.329V28.7265L88.9315 9Z" fill="white"/></g><g filter="url(#filter5_d_3067_12751)"><path d="M109.891 28.6165L92.462 12.2904C91.1845 11.0937 89.0947 11.9996 89.0947 13.75V26.6165C89.0947 27.721 89.9902 28.6165 91.0947 28.6165H109.891Z" fill="white"/></g><g filter="url(#filter6_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.8912 28.5039L7.97924 36.4773C6.88614 36.636 6.12867 37.6508 6.28739 38.7439L20.5604 137.042C20.7191 138.135 21.7339 138.892 22.8271 138.734L96.5833 128.024C97.6764 127.865 98.4339 126.85 98.2752 125.757L86.5494 45.0024L62.8912 28.5039Z" fill="white"/></g><g filter="url(#filter7_d_3067_12751)"><path d="M86.4521 44.9049L66.8578 31.2528C65.4216 30.2521 63.4837 31.4488 63.7352 33.1812L65.5841 45.9141C65.7428 47.0072 66.7576 47.7646 67.8507 47.6059L86.4521 44.9049Z" fill="white"/></g></g></svg>
    </defs>
</svg>

index.html (exactly as before)

I would consider changing xlink:href to href as the former is deprecated.

<html>
  <body>
    <p>External SVG w/ defs</p>
    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/icons.svg#selectingFile"></use>
    </svg>

    <p>External SVG no defs</p>
    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/icons.svg#close"></use>
    </svg>

    <p>Inline SVG w/ defs</p>
    <svg id="selectingFile" viewBox="0 0 163 157" fill="none"><defs><filter id="filter0_d_3067_12751" x="46.3838" y="21.7812" width="107.724" height="129.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter1_d_3067_12751" x="110.765" y="28.9346" width="59.2979" height="61.8789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter2_d_3067_12751" x="37.3975" y="24.4741" width="93.4717" height="117.553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter3_d_3067_12751" x="86.252" y="19.3281" width="60.5449" height="58.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter4_d_3067_12751" x="27.4434" y="6" width="86.5293" height="111.329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter5_d_3067_12751" x="69.0947" y="-4.25391" width="60.7969" height="56.8706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter6_d_3067_12751" x="2.2666" y="25.5039" width="100.029" height="118.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter7_d_3067_12751" x="43.7129" y="14.8882" width="62.7393" height="56.7388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><clipPath id="clip0_3067_12751"><rect width="163" height="157" fill="white"/></clipPath></defs><g clip-path="url(#clip0_3067_12751)"><g filter="url(#filter0_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M136.062 41.7522L83.2021 24.8763C82.1499 24.5404 81.0245 25.1211 80.6886 26.1733L50.4794 120.797C50.1435 121.849 50.7241 122.974 51.7764 123.31L122.776 145.977C123.828 146.313 124.953 145.732 125.289 144.68L150.107 66.9437L136.062 41.7522Z" fill="white"/></g><g filter="url(#filter1_d_3067_12751)"><path d="M150.062 66.8135L138.424 45.96C137.571 44.4314 135.305 44.6588 134.773 46.3264L130.859 58.5833C130.524 59.6356 131.104 60.7609 132.156 61.0969L150.062 66.8135Z" fill="white"/></g><g filter="url(#filter2_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M107.662 32.408L52.3925 27.4822C51.2923 27.3842 50.3209 28.1966 50.2228 29.2968L41.4053 128.233C41.3073 129.333 42.1197 130.305 43.2199 130.403L117.455 137.019C118.556 137.117 119.527 136.305 119.625 135.204L126.869 53.9244L107.662 32.408Z" fill="white"/></g><g filter="url(#filter3_d_3067_12751)"><path d="M126.797 53.8071L110.885 35.9982C109.719 34.6929 107.557 35.4096 107.402 37.1532L106.26 49.9688C106.162 51.069 106.974 52.0404 108.074 52.1385L126.797 53.8071Z" fill="white"/></g><g filter="url(#filter4_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.9315 9H33.4434C32.3388 9 31.4434 9.89543 31.4434 11V110.329C31.4434 111.433 32.3388 112.329 33.4434 112.329H107.973C109.078 112.329 109.973 111.433 109.973 110.329V28.7265L88.9315 9Z" fill="white"/></g><g filter="url(#filter5_d_3067_12751)"><path d="M109.891 28.6165L92.462 12.2904C91.1845 11.0937 89.0947 11.9996 89.0947 13.75V26.6165C89.0947 27.721 89.9902 28.6165 91.0947 28.6165H109.891Z" fill="white"/></g><g filter="url(#filter6_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.8912 28.5039L7.97924 36.4773C6.88614 36.636 6.12867 37.6508 6.28739 38.7439L20.5604 137.042C20.7191 138.135 21.7339 138.892 22.8271 138.734L96.5833 128.024C97.6764 127.865 98.4339 126.85 98.2752 125.757L86.5494 45.0024L62.8912 28.5039Z" fill="white"/></g><g filter="url(#filter7_d_3067_12751)"><path d="M86.4521 44.9049L66.8578 31.2528C65.4216 30.2521 63.4837 31.4488 63.7352 33.1812L65.5841 45.9141C65.7428 47.0072 66.7576 47.7646 67.8507 47.6059L86.4521 44.9049Z" fill="white"/></g></g></svg>
  </body>
</html>

SVG with from external symbol sheet not loading in Firefox or Safari

2 Answers2

Quick fix:

Other pifalls: gradients, masks, clip-paths

Workaround: move clip-paths etc. to inlined svg

Sub element styles in symbols

Deprecated `xlink:href` attribute

Linked

SVG with from external symbol sheet not loading in Firefox or Safari

2 Answers2

Quick fix:

Other pifalls: gradients, masks, clip-paths

Workaround: move clip-paths etc. to inlined svg

Sub element styles in symbols

Deprecated xlink:href attribute

Linked

Deprecated `xlink:href` attribute