SVG with <defs> from external symbol sheet not loading in Firefox or Safari-CodePudding

The

CodePudding user response：

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)

 <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>  <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 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>