Many inline SVGs

Inline SVGs imported as React components share the same HTML document. Their ids (gradients, masks, clip paths...) must not clash with each other. See #8297.

Each inline SVG below must look like the <img> reference rendering of the same file.

Gradients​

Two SVG files with the same name (gradient.svg) in different folders, each using its own <linearGradient> with a different id.

Inline SVG components:

Images (reference rendering):

Illustrations​

These SVGs use many gradients, masks and clip paths, with short ids that clash with each other when inlined on the same page.

Inline SVG components:

Images (reference rendering):