A few questions

[astanb]

I've been testing the library out for a little bit, I have a few questions :)

1. I presume I cannot const svg = useSVG(require("../../assets/tiger.svg")); whilst also having react-native-svg installed? I tried it and get an error, I suspect this is because of the way SVG are bundled when using RNSVG. Perhaps this should be mentioned in the docs.

2. Is there any way to specify other SVG properties on ImageSVG other than svg, x, y, width, height? I would like to be able to specify the fill/stroke colours etc.

3. Following on from 1) & 2), I have worked around my issues by the following code:

//helper function
const getLocationIcon = (colour: string) => {
  return Skia.SVG.MakeFromString(
    `<svg viewBox="0 0 20 24" fill="${colour}" stroke="white">
    <path d="M19 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z"/>
    <path d="M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
  </svg>`,
  );
};

// and in the component: 

const SIZE = 200;
const SVGIcon = getLocationIcon('orange');

<Canvas
          style={{
            width: SIZE,
            height: SIZE,
            top: -SIZE / 2,
          }}>
          <ImageSVG
            svg={SVGIcon}
            x={0}
            y={0}
            width={SIZE}
            height={SIZE}/>
   
        </Canvas>

Is this a good solution to 1) and 2) or is there a better way?

4. I started using this library to be able to use filters on SVG (I want to be able to add a shadow) but I can't see from the docs how to do it. Could you give me an example that works with the code above? I read https://shopify.github.io/react-native-skia/docs/image-filters/shadows but couldn't work out how it would apply to an ImageSVG element.

[wcandillon]

Regarding 1., could it be that you are using react-native-svg-transformer? If yes the issue makes sense but I would like to have confirmation on this.

About 2., no there isn't, 3. is definitely a nice way to approach it.

4. Shadows work in Skia with no SVG involved. It looks like you might not want to use SVG but the Skia API directly. If you want to see how to make shadows in SVG, you may want to look at things like how Figma exports shadows as SVG.

[astanb]

Hi William, thanks so much for the quick reply.

Yes I am using the svg-transformer, so you're right, it makes sense that I can't use both at the same time.

I'll dig into using the Skia API directly and see what I can come up with. Thanks for making such a cool library!

[wcandillon]

you might find this tutorial on neumorphism with Skia might be useful: https://www.youtube.com/watch?v=GFssmWUhwww