The Issue

SVG uses ID props to apply gradients and clip paths.

Check the repo for this site to see the problem.

When these IDs are generated by some popular vector image applications like Sketch or Illustrator, they tend to follow the same naming formulas for every document and you're likely to end up with generic IDs repeatedly used across multiple elements. Browsers respond differently to this misuse of the ID attributes.

crescent moon

clip path
w/ unique id

<clipPath id="crescent">

<circle clip-path="url(#crescent)">

on Chrome: ok
on Firefox: ok
on iOS WebKit: ok

star

gradient
w/ unique id

<Linear Gradient 
id="warm_glow_gradient">

<Polygon fill="url(#warm_glow_gradient)">

on Chrome: ok
on Firefox: ok
on iOS WebKit: ok

crescent moon first

w/ generic id 1

<clipPath id="generic1">

<circle clip-path="url(#generic1)">

on Chrome: ok
on Firefox: ok
on iOS WebKit: fail, no clipping applied.

star second

w/ generic id 1

<Linear Gradient id="generic1">

<Polygon fill="url(#generic1)">

on Chrome: fail, no fill applied.
on Firefox : fail, no fill applied.
on iOS WebKit: ok

star first

w/ generic id 2

<Linear Gradient id="generic2">

<Polygon fill="url(#generic2)">

on Chrome: ok
on Firefox: ok
on iOS WebKit: fail, no fill applied.

crescent moon second

w/ generic id 2

<clipPath id="generic1">

<circle clip-path="url(#generic2)">

on Chrome: fail, no clipping applied.
on Firefox: fail, underlying image not visible at all (clipping applied wrong?)
on iOS WebKit: ok

The Proposed Solution

prefix your ids with a unique identifier during the build process, whether a hash or filename

That's what the React SVG Loader offers us, by adding parameters in the plugin configuration, like:

classIdPrefix: '[name]-[hash:8]__'

as illustrated among other available query parameters in the SVG to React Loader documentation,
or like:

classIdPrefix: true

as reported here for a non-Gatsby project.

The plugin should be usable in Gatsby with Gatsby Plugin React SVG, but while the plugin works fine for its primary purpose of allowing me to inline my svgs, and I've succesfully tested the use of some of the query parameters in the documentation (like adding a className or a title)... I can't get classIdPrefix to work.

Given there's a pull request pending at the svg-react-loader project for prefixing ID names, it's also possible that I've misunderstood the purpose of `classIdPrefix`. 🤷