Why can't I get the context value?

React Context currently cannot be shared across React renderers(see react#17275 (opens in a new tab)).

If you want to use context in RoughSVG(and React >= 18.0.0), you can use WCRoughSVG instead of RoughSVG. WCRoughSVG use its-fine (opens in a new tab) to forwarded context between providers.

Is react-rough-fiber work with any SVG?

No. react-rough-fiber is a React renderer, so it only works with SVG elements created by React.

If you create an SVG elemet manually(like document.createElement) or use dangerouslySetInnerHTML, react-rough-fiber cannot work with it.

So I can't use react-rough-fiber with local/remote SVG files?

You can use SVGR (opens in a new tab) to transform local SVGs into React components.

You also can use like react-inlinesvg (opens in a new tab) to load SVGs as React elements. See the SVG string example and remote SVG example.