parity with web svg and usage with React Native Web

Hey everyone, I’m working on a React Native Web project and am porting various vectors I made in React Native using this package to React Native Web, and the thing is my simple vectors almost port perfectly.

What I first did was create a package that renames standard HTML components provided by React to uppercaseFirst versions, eg:

export const Svg = 'svg';
export const Circle = 'circle';
export const Path = 'path';

So, as I said, my vectors are pretty simple. The first challenge I ran into was that instead of scale={1.5} it needs to be transform="scale(1.5)", which is exceedingly small of a an interface change. So I’m wondering why react-native-svg didn’t try to preserve the web’s interface? And, if there are any attempts to do so or what hurdles people see in making it happen??

For my small svgs, I can pretty much wrap react-native-svg and give it the same interface as you have in the web. Given the large number of properties, I’m assuming at some point, achieving feature parity becomes burdensome. I’m wondering if anyone has gone this route or thought about this and where the breakdown is? From where I’m currently standing it seems like an achievable goal and one that should happen, whether in this package or another.

[3rd-Eden]

https://github.com/godaddy/svgs

It’s a project I wrote to work around this limitation. It uses the same syntax for syntax that react-native-svg uses for web. This allows you to use one module (in this case svgs) for both react and react-native based svgs.

[msand]

It now supports the transform attributes and is much more spec conformant. But there are lots of features in the spec, with varying support in the ever-green browsers, but missing from react-native-svg still. PRs very welcome 😄