Svg does not respect container width/height

Svg renders at full size always and does not scale down to fit the container size. In this case below, svg cannot be seen because it has rendered outside 100x100 area.

 <Canvas style={{height: 100, width: 100}}>
      {source && (
        <ImageSVG
          height={100}
          width={100}
          x={0}
          y={0}
          source={source}
        />
      )}
    </Canvas>

[chrfalch]

Couldn’t agree more. React Native Skia should be a foundation for others to extend on - and the SVG rendering looks like a very good candidate for building a library.

[ammarahm-ed]

@chrfalch I completely agree with you on this. This will require parsing the dom on JS side or Native then resizing according to the container with so the svg can fit properly. This will require extra maintainence and also increase the bundle size when if add any html parser to do this.

But the problem is that the usefulness of svg support becomes very limited without this since mobile devices are small and will require scaling things down like images and svgs.

One way is to not do it yourself from ground up but instead use an external dependency to handle resizing the svg on JS side.

Or hope that someone makes a library that uses react-native-skia to render svgs with resizing support. That you can you focus on the core parts.

I think that this library is more like a canvas in browser that gives you what is needed to build what you want. But it really depends on you, the devs. It can be an all in one solution for graphics too.