If I render an SVG image with <Image source={{uri: 'https://productpains.com/img/user-placeholder.svg'}} />, nothing renders and I don't get any error message.
This would be great for dynamically rendered SVG.
how? It doesn't support show SVG file (or i couldn't find the way)
@Ilker Güller: SVG is a markup just like HTML, open it in your editor and convert it manually into a JSX file as shown in the examples
this still isn't implemented? weird
TL;DR: I am happy to help provide Sketch generated SVG graphics of single and multi-color icons and help test when this feature gets worked on.
--------------------
Some scenarios I see:
- multiple paths inside a single <PATH>
- separate paths in their own <PATH>
- <PATH> elements inside Groups
- Using Id= to set the name of each <PATH> . (would be ideal to design in black and white and allow color overrides in RN
- Clockwise vs. counter-clockwise SVG paths
it does not look like react-native-svg supports some of these common elements (id, group) that would get set from a designer in Sketch, it's more geared toward generating SVGs programatically.
Vector Icons are not enough i'm afraid. Try using symbols like Cross, Stopwatch, Block, etc. inside a background, where the background must be one color and the icon on top must be another vs. transparent. Icons do not allow this.
Also from a workflow standpoint of designers creating SVG graphics in a popular tool like Sketch, it is VERY CONVOLUTED currently to get those SVGs turned into Icons even with Fontello or Icomoon, etc. I just spent all day yesterday working on this, and we are falling back to the built in PNG support and 1x-3x image sizes.
Attached is a sample 2-color icon as a PNG and below is the code that Sketch generates when outputting to SVG (the white is not transparent)
`<?xml version="1.0" encoding="UTF-8"?>
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>squared-stopwatch</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="squared-stopwatch" fill-rule="nonzero">
<g>
<path d="M56,0 L8,0 C3.6,0 0,3.6 0,8 L0,56 C0,60.4 3.6,64 8,64 L56,64 C60.4,64 64,60.4 64,56 L64,8 C64,3.6 60.4,0 56,0 Z" id="background" fill="#FFB75D"></path>
<path d="M25.1698672,24.4907977 C23.9317933,25.244685 28.4852462,36.1198509 29.595912,37.8908006 C30.5653211,39.4506618 32.6232381,39.9249254 34.1881413,38.9709154 C35.7613538,38.0059397 36.2515978,35.9718149 35.2821887,34.4201779 C34.1826018,32.6437454 26.4051713,23.7341691 25.1698672,24.4907977 Z M24.2420042,12.5848623 C26.8123231,11.6993875 29.5654449,11.2086754 32.4376655,11.2086754 C35.3098861,11.2086754 38.0630079,11.6993875 40.6333268,12.5848623 C41.5445713,12.8973828 42.7521781,12.2696004 42.2176182,10.9098619 C41.8270848,9.92295501 41.4504002,8.95797935 41.2980645,8.56595799 C40.9352285,7.63662064 39.6362203,6.86902637 39.0711933,6.7429216 C36.9329539,6.26591659 34.7171617,6 32.4376655,6 C30.1581693,6 27.9423771,6.26591659 25.8013679,6.7429216 C25.2363409,6.86902637 23.9401025,7.63662064 23.5772665,8.56595799 C23.4249308,8.95797935 23.0454764,9.92295501 22.6577128,10.9098619 C22.1231529,12.2696004 23.3307597,12.9001242 24.2420042,12.5848623 Z M57.636762,14.7341262 C57.1049719,14.1036024 56.5399449,13.4867856 55.9389113,12.8919 C55.3406474,12.2970144 54.7174558,11.7405086 54.0831853,11.2114168 C53.6594151,10.8577752 52.413032,10.5699273 51.623656,11.3512286 C50.8370498,12.1325299 47.0591241,15.8663278 47.0591241,15.8663278 C48.1725597,16.6558533 49.2555281,17.5248797 50.2581741,18.514528 C51.26082,19.5041764 52.1332882,20.5760669 52.9337431,21.6808544 C52.9337431,21.6808544 56.708899,17.9470566 57.4955053,17.1657552 C58.287651,16.3817125 57.9968282,15.1508203 57.636762,14.7341262 Z M32.4013822,13.9500835 C20.0268377,13.9500835 10,23.9769212 10,36.3487005 C10,48.7232451 20.0268377,58.7500828 32.4013822,58.7500828 C44.7703963,58.7500828 54.7999992,48.7232451 54.7999992,36.3487005 C54.7999992,23.9796865 44.7703963,13.9500835 32.4013822,13.9500835 Z M32.3964034,51.6760505 C23.8942808,51.6760505 16.997666,44.7813949 16.997666,36.2760508 C16.997666,27.7707068 23.8917565,20.8760512 32.3964034,20.8760512 C40.9010504,20.8760512 47.7976652,27.7707068 47.7976652,36.2760508 C47.7976652,44.7788703 40.9010504,51.6760505 32.3964034,51.6760505 Z" id="icon" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>`
thank you for the excellent summary on the current state of affairs.
"we are falling back to the built in PNG support and 1x-3x image sizes"
this seems to be the best approach instead of exporting complex svg from sketch and trying to render it with react-native-svg-uri.
I am wondering if exporting from other graphic editors beyond sketch would produce any better svg code?
Overall, i am at a loss on what the current state of SVG support is across react native, native android, and native ios. So I don't even know which rules are not supported in the autogenerated svg files.
use a WebView
does it help with this? https://github.com/necinc/msvgc
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.
I'm successfully using: https://github.com/react-native-community/react-native-svg
My process:
1. Clean up SVG in graphics app (Illustrator/Sketch/etc) to set consistent width, height, and make sure the viewBox is "0, 0, W, H"
2. Open SVG in text editor to remove width, height, and any undesired/unnecessary styles
3. Open in https://jakearchibald.github.io/svgomg/ and optimize.
4. 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.
5. 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:
https://gist.github.com/beausmith/d2b56e6659e08ad0ceb4ae8684fb05d1
@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 :)
@Dan Huey: Use react-native-svg If you need to manipulate nodes, otherwise it's not efficient in speed and memory.
https://github.com/matc4/react-native-svg-uri seems like a great candidate
@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.
@Mikael Sand: I agree, I had some issues when deploying so I ended up exporting svg as text from independent js files
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.
@Shiva Nandan: Works! My respects
@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 good for performance at scale, when interfaces may have an hundred of little images and icons to display.
I'd love to see native support for this. Webviews and other packages have been clunky, at best.
I can't see any image follow your url
We've had great luck using https://github.com/oblador/react-native-vector-icons and icomoon.io for generating a custom icon font.
@udi: cud u kindly guide me on this, I tried unsuccessfully to generate a custom ttf for my RN app.