1.0k
Support rendering SVG images
Activity
Newest
Oldest
Roman Dubinin
React Native by very definition should not support displaying
.svg
images as long as it's not supported by underlying platform. Same logic applied to .webp
and other "exotic" formats; Coming from web most of us take it as granted that svg is a first-class citizen but on other platforms it's not the case;
svg parser/display is beast on it's own and including it in core would create so much overhead that supporting it and matching it to all platforms (iOS/macos, android, windows) will be unmanageable;
But displaying svg image is totally possible by means of separate packages,
react-native-svg
supports it for example:import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="100%"
height="100%"
uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
/>
);
still, i would suggest use it with care as far as I know (point to complexity of the issue)
react-native-svg
does not support _all_ sets of features (filters, blurs etc)Axel Havukangas
I actually think it is reasonable for the React Native core to only stick to the image formats supported by the underlying platforms. Thus I've personally preferred to convert source SVG images to PNGs for use in our apps. Until recently, I've just run a separate script to build scaled PNGs at compile time, but since 0.57 allowing .svg file import and metro allowing asset plugins, I've been able to create a nicer workflow for this.
https://github.com/aeirola/react-native-svg-asset-plugin is a tool I wrote for generating scaled PNG images from imported SVG images during compile time. This means that there are no extra runtime dependencies, and you can work with normal React Native Image components as you would with natively supported image formats. Of course the app size will grow with a lot of large images, but I think it is still useful for certain situations.
Stanislau Baranouski
@Axel Havukangas: Thanks for the plugin man! It does really works without any extra shenanigans. +1 to your karma :)
Alec Larson
I recently created this: https://github.com/alloc/react-native-svgkit
It works just like the
Image
component. Unfortunately, it's only for react-native-macos
at the moment. I'm open to contributions that add support for iOS and Android, though!Arkadiy
You can use my package https://github.com/khorark/svg2rn . Founded on svgo, but support svg class and svg from Adobe XD. By default uses svg styles. If need you can change attr width, height, fill and other by pass props.
Дмитрий Гордин
I can't see any image follow your url
Tyler Sl8r
I'd love to see native support for this. Webviews and other packages have been clunky, at best.
Shiva Nandan
I just published a new package that solves this and adds support for remote svg images (local and remote)! Try it and let me know if you find any issues.
Yair Behar
@Shiva Nandan: This will instanciate an entire WebView for each images. Each WebViews asks for a lot of memory and cpu ressources. So it's really not good for performance at scale, when interfaces may have an hundred of little images and icons to display.
Nicolas Sturm
@Shiva Nandan: Works! My respects
Yair Behar
@alex row: I wanted to say "not good". I ommited the "not". Of course this is terrible. I corrected my comment.
alex row
@Yair Behar: How this is good?? It`s terrible
Bishwajeet Das
@Shiva Nandan: In this package having bug in android production.
Juan
https://github.com/matc4/react-native-svg-uri seems like a great candidate
Mikael Sand
@Juan: A more efficient way is to convert the svg files to actual react components, much less overhead than react-native-svg-uri for bundled assets (it also has problems with release builds on android, requires a babel plugin to read the svg as plain text). There exists https://github.com/chrisbull/svg-to-react-native-cli
Or alternatively, if you need to clean up svgs made in illustrator for use with react-native-svg, then you can use my gist: https://gist.github.com/msand/4b37d3ce04246f83cb28fdbfe4716ecc
It converts Illustrator SVG export into cross-platform CSS independent mode. CSS rule and style inlining, group gradients into a definitions tag, remove elements with display set to none, make colors hex. Works with react-native-web react-native-svg and svgs to give cross-platform web and native mobile rendering of any SVG produced in Illustrator.
Juan
@Mikael Sand: I agree, I had some issues when deploying so I ended up exporting svg as text from independent js files
Beau Smith
I'm successfully using: https://github.com/react-native-community/react-native-svg
My process:
- Clean up SVG in graphics app (Illustrator/Sketch/etc) to set consistent width, height, and make sure the viewBox is "0, 0, W, H"
- Open SVG in text editor to remove width, height, and any undesired/unnecessary styles
- Open in https://jakearchibald.github.io/svgomg/ and optimize.
- Integrate info app by converting SVG tags to component-based SVG tags used in https://github.com/react-native-community/react-native-svg and updating with JS variables such that I can controls dimensions, colors, etc.
- Use in other components.
For a set of icons, I place them in a single component and pass a "name" property to return the desired SVG:
D
Dan Huey
@Beau Smith: Is this scaleable? As in, if I had a list with 100 png's rendering vs a list of 100 svg's rendering, which would by defualt have better performance? Thanks :)
fxwan
@Dan Huey: Use react-native-svg If you need to manipulate nodes, otherwise it's not efficient in speed and memory.
Борис Хороший
@Beau Smith: THANKS!!!
Eric Miller
I think we'll want to be able to specify the source as either a uri (as in the example) or as data (as used by react-native-svg). This gives us some choice over our performance trade offs based on the vector's complexity.
Load More
→