Support rendering SVG images

415

Andrew Rasmussen

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.

December 21, 2015

Activity

udi

We've had great luck using https://github.com/oblador/react-native-vector-icons and icomoon.io for generating a custom icon font.

Apro

@udi: cud u kindly guide me on this, I tried unsuccessfully to generate a custom ttf for my RN app.

Kennet Postigo

This would be great for dynamically rendered SVG.

Antoine Rousseau

Use this: https://github.com/magicismight/react-native-svg

Ilker Güller

how? It doesn't support show SVG file (or i couldn't find the way)

Antoine Rousseau

@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

David

this still isn't implemented? weird

Jim Bartek

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"?>

<title>squared-stopwatch</title>

<desc>Created with Sketch.</desc>

<g>

</g>

</svg>`

Taylor Hurt

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.

Jaime Liz

use a WebView

jjhesav

does it help with this? https://github.com/necinc/msvgc

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.

Beau Smith

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

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 :)