Convert svg to react-native svg

Question

I have the following svg code and I want to convert it to react-native-svg. How is it done correctly?

<svg width=200 height=200>
  <defs>
    <marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />
</svg>

theres a package `react-native-svg` and I want to convert the code above with it. Not sure if your comment is a good solution. — johntanquinco, Nov 19 '18 at 04:44
You should convert svg to caps Svg, same with path. Not sure about defs etc — Chandini, Nov 19 '18 at 04:52
I would hope that it would work with the package, since the link was copied from the github for the package: https://github.com/react-native-community/react-native-svg — Claies, Nov 19 '18 at 05:16

score 1 · Answer 1 · answered Nov 19 '18 at 14:51

react-native-svg is an amazing package that has only a few differences. First you need to validate everything you're using is supported.

Going through the documentation you'll find that most things just have a difference in capitalization.

At present, Marker is not supported (check the ToDo's in the documentation). If you can be good to go.

score 0 · Answer 2 · answered Nov 23 '18 at 19:44

You could use react-native-remote-svg, that would allow you to load any SVG code.

import React from 'react';
import Image from 'react-native-remote-svg';

class MyView extends React.Component {
  render() {
    const render =
      "<svg width=200 height=200>" +
     "<defs>" +
     '<marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">' +
     '<path d="M2,2 L2,11 L10,6 L2,2" />' +
     "</marker>" +
     "</defs>" +
     '<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />' +
     "</svg>";

    return (
      <Image
        style={{ flex:1 }}
        source={{
           uri: "data:image/svg+xml;utf8," + render
        }}
      />
   );
}

Which gives me this image:

Convert svg to react-native svg

2 Answers2