Does ImageManipulator work with SVG on iOS and Android?

Expo SDK
,
1

Hi all,

I’m trying to convert an SVG to JPEG.

I know that the ImageManipulator works with SVG in a web client, but in iOS and Android it errors when trying to read the SVG. Is it because there’s an issue with my SVG, or is it because SVGs aren’t supported on mobile platforms?

If I can’t use the ImageManipulator, can anyone suggest how I could do the conversion on iOS and Android?

Thanks

Please provide the following:

  1. SDK Version: 47 onwards
  2. Platforms(Android/iOS/web/all): iOS and Android
  3. Add the appropriate “Tag” based on what Expo library you have a question on.
2

Hi @denishow

Would you mind explaining why you need to convert SVGs to JPEGs?

3

Sure @wodin, I’m using SVG to capture a list of annotations to an image taken with the device’s camera. The SVG has an image component and then a list of paths drawn over the top. This works a treat as you can undo and redo changes etc. But the server is currently expect a JPG or PNG. If I could convert the SVG image into a JPG on save, then all my existing server-side code will “just work” with the annotated image. But if I have to cater for SVG images then I’m going to have to make a lot of changes server-side. The annotated image will eventually (among other things) be rendered into a PDF document.

Any ideas?

4

I see. Well, one thing: If you convert it to JPEG it will lose some quality, whereas if you convert to PNG it will not. So if you have to convert it to a raster image format I would rather use PNG.

Unfortunately I’m not sure how to do it. If you can find a React Native library that can do it you should be able to use it from Expo.

react-native-skia does seem to have a way to render an SVG to a canvas and then get a snapshot of the canvas, but I’m not sure what format the data is in and whether you can convert that to a PNG.

You could possibly write a simple native module to do it. This is a lot easier than it used to be with Expo Modules.

If you want to try creating an Expo Module, you might search for things like “kotlin convert svg to png” or “java convert svg to png”, and similar for Swift/Objective C.

5

Thanks, I’ll try out react-native-skia :slight_smile:

6

Unfortunately I couldn’t make react-native-skia to work on devices. Eventually I traced through the code and found

  MakeImageFromViewTag(viewTag: number): Promise<SkImage | null> {
    const view = viewTag as unknown as HTMLElement;
    // TODO: Implement screenshot from view in React JS
    console.log(view);
    return Promise.resolve(null);
  }

Looks like I’ll have to upload the SVG and get the server to deal with it.

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.