Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to save created image to SVG file ?

See original GitHub issue

Is there a way to export a created image drawn using react-native-svg to a SVG file?

My goal is to:

Use react-native-fs to write the SVG data to a SVG file.
Reference the SVG image from HTML.

<html><body>
	<img src="http://phrogz.net/SVG/heart.svg" width="320" height="240">
</body></html>

Convert HTML to PDF report using react-native-html-to-pdf.

I ran across a brief reference to a new method toDataURL.

While I think writing to a SVG file would be more versatile for PDF report generation, what format does toDataURL output to? SVG? PNG?

svgRef.toDataURL(base64 => {
    console.log(base64);
});

Thank you for a great component!

Issue Analytics

State:
Created 7 years ago
Comments:11 (1 by maintainers)

Top GitHub Comments

7reactions

petermikitshcommented, Mar 20, 2017

Exposing the toDataURL API, without having to place the element in the on-screen component tree, would be fantastic.

3reactions

esuttoncommented, Feb 6, 2018

For capturing a VictoryChart chart react-native-view-shot worked for me:

https://github.com/gre/react-native-view-shot

  onCaptureViewShot = (uri) => {
    const base64Data = uri;
    const profileImage = {
      uri: `data:image/png;base64,${base64Data}`,
      filePath: '',
    };
    this.props.onCreateFilesAndSend(profileImage);
  }    

  render() {
    const chart = this.renderChart();
    const renderChartOffScreen = this.state.creatingPdf ? chart : null;
    return (
      <View style={{ position: 'absolute', left: 0 }}>
        <ViewShot
          onCapture={this.onCaptureViewShot}
          captureMode="mount"
          options={{
            format: 'png',
            quality: 1.0,
            result: 'base64',
            }}
        >
          {renderChartOffScreen}
        </ViewShot>
      </View>
    );
  }