SVG Image in react-native

Question

I want to use SVG image react-native. Earlier it was not supported. But by looking into source code of react-native, it seems that it is now supported.

Here is my sample code:

class SVGImageSample extends Component {
    render() {
        return (
            <Image source={require("./Mysvg.svg")} style={{height:40,width:40}}/>
        );
    }
}

Here is my svg image

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" height="100" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{display:none;fill:#E0E0E0;}
    .st1{display:none;}
    .st2{display:inline;fill:#848484;}
    .st3{display:none;fill:#FFFFFF;}
    .st4{fill:#C22227;}
</style>
<rect id="XMLID_8_" x="-221.1" y="-49" class="st0" width="860" height="596.7"/>
<g id="XMLID_4_" class="st1">
    <rect id="XMLID_2_" x="-38.8" class="st2" width="577.5" height="10"/>
    <rect id="XMLID_5_" x="-38.8" y="490" class="st2" width="577.5" height="10"/>
    <rect id="XMLID_18_" x="0" y="-38.8" class="st2" width="10" height="577.5"/>
    <rect id="XMLID_19_" x="490" y="-38.8" class="st2" width="10" height="577.5"/>
</g>
<image style="display:none;overflow:visible;" width="1242" height="2208" id="XMLID_1_" xlink:href="login_profile.png"  transform="matrix(0.3068 0 0 0.3068 -214.041 -274.2382)">
</image>
<circle id="XMLID_3_" class="st3" cx="250" cy="250" r="240"/>
<path id="XMLID_13_" class="st4" d="M348.3,249.4l-84.5-84.8l-18,18l49.7,50.1c1.9,1.9,0.5,5.1-2.1,5.1H151.7v25.4l141.5-0.1
    c2.7,0,4,3.2,2.1,5.1l-49,49.1l18,18l84-85.8V249.4L348.3,249.4z"/>
</svg>

It does not show anything.

Any help would be appreciated.

maximalism · Accepted Answer · 2016-11-11 13:05:16Z

5

Or also you can try this solution: https://github.com/necinc/msvgc

It makes reusable react components from plain svg files via command line.
Works for react-native

answered Nov 11, 2016 at 13:05

maximalism

911 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Schmidt · Accepted Answer · 2016-03-17 07:52:26Z

4

As far as I know React Native currently (3/2016) doesn't support SVGs. On the other hand, there is a library called react-native-svg which should help you with that.

answered Mar 17, 2016 at 7:52

Daniel Schmidt

12k5 gold badges43 silver badges73 bronze badges

Comments

chandlervdw · Accepted Answer · 2016-12-02 14:17:44Z

0

This library doesn't work for all SVG types (yet) but it seems to be getting there: https://github.com/react-native-community/react-native-svg

answered Dec 2, 2016 at 14:17

chandlervdw

3,2464 gold badges21 silver badges21 bronze badges

Collectives™ on Stack Overflow

SVG Image in react-native

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related