Inherit Defs from Parent SVG

[jacobp100]

Feature Request

On the web, if you have an svg within another svg, you can reference the defs in the parent svg from the child - ids are global after all

Take this example,

<svg>
  <defs>
    <path id="a" d="…"/>
    <path id="b" d="…"/>
    <path id="c" d="…"/>
  </defs>
  <use href="#a"/>
  <svg x=…>
    <use href="#b"/>
  </svg>
  <use href="#c"/>
</svg>

This crashes - and it does make sense why it does

But it might be possible to fix this use-case by allowing the child to look up through the svg parents to find the relevant area

Why it is needed

This shows up a lot with the new mathjax 3 svg output using fontCache: 'local' - large brackets are represented in the same format as the example I gave above

Possible implementation

If RNSVGSvgView held an optional reference to a parent svg, this might be possible. Unsure of Android implementation

Code sample

Refer to the above code sample

[msand]

I guess this should be made to work the same way as on the web. Not sure how it's handled when there's several elements with the same id, does it always resolve to the same element? Or does it depend on the context where it is referenced?

[jacobp100]

It's technically an error on the web, but it fails gracefully (silently). I think all browsers use the first element with that ID. But the IDs are also document global - not global to an SVG root. Two SVGs can conflict. So it'd probably never work exactly the same as the web

[msand]

Yeah, I'm just thinking, if we make them available in more than a single svg root / subtree, we should probably make them properly global, the same way as on the web. Would be even more confusing if it's only partially supported rather than not at all. This also forces to set up observers / event listeners, to invalidate all svg trees that reference any id external to it, every time that any content / properties relating to any referenced id changes.

[msand]

Not only that, I'd expect somewhere up to around 50% of everything built using react-native-svg to break completely when introducing this.

[msand]

Maybe would be better with partial support anyway, nested svgs have many use cases. Perhaps when it looks up references by id, if it can't find it in the current svg tree, it would check if there's any ancestor svg and try there. Then the side-effects wouldn't spread across any components with reused id values.

[jacobp100]

That would definitely work for my use-case at least (and MathJax's too)!

On the web, there's a lot of cases where people embed an SVG in the page which just contains defs, then use other SVGs throughout the page that reference the IDs in the defs SVG

The web's page-global IDs are a pain on web, and probably not something we want to copy

But what would be really cool is if we could define defs contexts, like this,

const IconsContext = RNSvg.createSvgContext() // Acts as `_templates` from RNSVGSvgView

const IconsContext = ({ children }) => (
  <Svg svgContext={IconsContext}>
    <Defs>
      <Path id="…" d="…" />
    </Defs>
  </Svg>
)

const Icon = ({ name }) => (
  <Svg svgContext={IconsContext}>
    <Use href={`#${name}`} />
  </Svg>
)

const MyApp = () => (
  <>
    <IconDefs />
    <Icon name="something" />
  </>
)

Then by default, any SVG that didn't have svgContext set would create one and pass it down via React's context - or use the parent's if it's a child SVG

This should also be portable to the web by scoping all IDs with a hash or something

Just a thought too - maybe there could be a warning on duplicated IDs, because it's always easier to remove that warning than add it later

[msand]

Yeah, that could work, would need to refactor the code to have some context object on the native side, where the elements are registered and looked up.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.