(feature) <svg> element

[necolas]

Describe the feature request

Support the <svg> element. This element is not currently supported on native.

[nmn]

Related: https://www.npmjs.com/package/react-native-svg

[RyanGuild]

@necolas and @nmn I am using rsd for a project and I would like to get involved. Are we ok with a react-native-svg dependency because I think I could whip up the re-export of the rn svg library PR. I believe that stylex already supports svg on web but I would need to look into how rn svg handles styles.

[necolas]

Hi, I'm not looking for contributions in this specific area. There is some ongoing refactoring and performance tuning of the existing code before parts of it can be reused for SVG elements. And we have to seamlessly replace an internal stop-gap for cross-platform SVG, which is also being evaluated for replacement with alternative native vector graphics, due to the high cost of rendering react-native-svg elements today.

[axyz]

Any update on this topic? What's the best way to use SVG assets today?

Is wrapping react-native-svg In a compat.native the way to go? Or maybe using RN Image referencing to bundled assets in the host native app by Id ( would that alleviate the performance issues?)

Thanks

[nmn]

Is wrapping react-native-svg In a compat.native the way to go? Or maybe using RN Image referencing to bundled assets in the host native app by Id

Both approaches have different trade-offs that are generally app-specific, but both approaches are viable. Use the approach that works best for your app.

[efoken]

@axyz I just published a library react-strict-dom-svg which exports all common SVG elements as svg.* that are also supported by React Native SVG. I already used this approach in some projects, so I thought it's a good idea to publish it as a library, because I was writing the same code again and again 🙂

https://github.com/efoken/react-strict-dom-svg

[necolas]

That's not going to be reliable because it's using non-public APIs. For example, css.props should not be used on either web or native and shouldn't be expected in future releases. Why don't you continue this SVG stuff to RSD as a PR so it can use those APIs and get updated as they change.

We didn't have svg support because we found the perf of RN SVG was poor. For rendering SVG icons, we ended up using an XML library for Android. I'm not sure if we have support for that on iOS. The engineer who worked on it hasn't contributed it back to RSD. But we should probably figure something out with that too

[efoken]

@necolas I thought you are not looking for contributions on SVG 🙃 But of course I can contribute it if you like, would be way better then having another library installed.

I also worked on bigger projects at IBM where we used Vector Drawables for Android, because they were way more performant than RN SVG, but there is no iOS support, so we had to fall back to RN SVG for iOS. We tried many different approaches, but for smaller graphics like icons and stuff, I think there currently is no better/easier alternative, with also app bundle size in mind.

[axyz]

@efoken @necolas

Trying to summarize the current state and the desired future one.

Is it currently possible to consume a component that uses react-native-svg from a RSD one? e.g. based on svgr ouputs

// exported by an asset library
import Svg, { Path , type SvgProps } from "react-native-svg";
interface SVGRProps { title?: string; titleId?: string; }

export default const MySvgAsset = ({ title, titleId, ...props }: SvgProps & SVGRProps) => (
  <Svg {...} ><Path {...} /></Svg>
);

// icon.ts (some sort of RSD icon wrapper or other component consuming the asset library)
import { MySvgAsset } from "my-assets-library";

<h.div><MySvgAsset /></h.div>

Or, instead, an "RSD version" of the library is needed with platform specific files? How would the file differ? Or some other approach I am missing?

Regardint he desired state, would then the goal to be able to get an output from svgr like:

// exported by an asset library
import { h as html} from "react-native-svg";
interface SVGRProps { title?: string; titleId?: string; }

export default const MySvgAsset = ({ title, titleId, ...props }: typeof h.svg /* <- likely wrong? */ & SVGRProps) => (
  <h.svg {...} ><h.path {...} /></h.svg>
);

// icon.ts
import { MySvgAsset } from "my-assets-library";

<h.div><MySvgAsset /></h.div>

Or is there a scenario where the same svg/path web version would work as well?

[efoken]

@axyz yes, there should be a scenario, where you have only one SVG component that works on all platforms:

import { html } from 'react-strict-dom';

export default const MySvgAsset = (props: React.ComponentProps<typeof html.svg>) => (
  <html.svg {...props}><html.path {...} /></html.svg>
);

Besides that, when you use SVGR, there should also be a config option to generate RSD output 🙂

[necolas]

All the SVG elements would be under a svg namespace though, except the SVG element itself which is an HTML element

[axyz]

but for the time being would this work?

// exported by an asset library
import Svg, { Path , type SvgProps } from "react-native-svg";
interface SVGRProps { title?: string; titleId?: string; }

export default const MySvgAsset = ({ title, titleId, ...props }: SvgProps & SVGRProps) => (
  <Svg {...} ><Path {...} /></Svg>
);

// icon.ts (some sort of RSD icon wrapper or other component consuming the asset library)
import { MySvgAsset } from "my-assets-library";

<h.div><MySvgAsset /></h.div>

I assume it should be fine, unless I need to pass style to it, and then would have to wrap it in a compat.native like

import type Svg from "react-native-svg";
import { MySvgAsset } from "my-assets-library";

<compat.native {...props}>
  {(nativeProps: React.PropsOf<Svg>)) => (
    <MySvgAsset {...nativeProps} style={[nativeProps.style]} />
  )}
</compat.native>

Is that correct?

Then later on we could have svgr generating directly RSD code so that the compat would not be needed anymore?