10

I'm working on a react-native project and I have over 30 icons of SVG format. I want to know if it is recommended to convert those images to PNG or it's better to use as SVG files. If it's better to use images as SVG what is the best way to show SVG file on react native?

3 Answers 3

7

SVG is not always the best solution. If your SVG is not optimized and has lots of Paths / Lines or if you need to use it many times over, it can generate a lot of views and slow down your app.

Best answer is it depends.

1
  • 1
    Generally if you don't need a variable resolution/zooming in, rasterised images will work better.
    – A. O.
    Dec 15, 2020 at 14:02
7

Prefer PNG over SVG for react-native apps because its rendering is less CPU intensive, and comparing to web apps user don't need to load all images on each app launch but only on installation, so the size doesn't matter that much.

Just make sure you provide three (or at least the last two) sizes:

image.png
image@2x.png
image@3x.png
6

You can always prefer svgs over pngs as the latter are heavy to render.

To render svg assets you can use react-native-svg.It's the best i found for react-native.But it is not fully complete.You can't show filters and shadows using this package.For that use the pngs instead.

3
  • 8
    Rendering an SVG is more CPU intensive than a PNG Mar 14, 2021 at 12:10
  • 1
    This answer provides no evidence or explanation. Personally, I think that in native mobile apps (this is about react-native) pngs are preferable. Please re-consider if this should be the accepted answer. Jun 21, 2022 at 14:20
  • 1
    @ThomasEbert I have to agree with you that I do not have any strong evidence that svg perform better thatn png. Only thing I remember working with react native is that svgs were slightly lower in size compared to png. How much that is beneficial I will leave up to the users. I am more than happy to upvote any answer that provides better stats regarding the comparison. Jul 1, 2022 at 5:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.