How to save created image to SVG file ? #212

esutton · 2017-01-03T17:07:58Z

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!

The text was updated successfully, but these errors were encountered:

magicismight · 2017-01-11T14:54:31Z

You can convert the base64 to PNG format by using other libraries.
It's not what this library do, I'm sorry I can't help you with that.
And for SVG, you can traverse through all children inside Svg component, and serialize them into a string, this is not a bad idea. I'll add this to my TODO list.

esutton · 2017-01-11T18:28:39Z

@magicismight Thank you for your tip

And for SVG, you can traverse through all children inside Svg component, and serialize them into a string, this is not a bad idea. I'll add this to my TODO list.

Not sure I understand. I could call toDataURL() on the SVG serialized result?

What would a traverse SVG children and serialize snippet look like?

esutton · 2017-02-14T16:11:56Z

Can any react native experts share suggestions on how to invisibly render a SVG for image generation purposes using toDataURL(base64) ?

The VictorChart I use supports a chart.containerRef.svgRef.toDataURL. The toDataURL(base64) works well to write image to a file using RNFS, then I add image reference to HTML content, and rendering HTML to PDF.. All good so far.

The hard part, is understanding how to create "dummy view" or a technique to invisibly render an SVG image offscreen ( with width set to match desired PDF page width ) ?

Example: Save SVG as file image using RNFS

  onWriteImageToFile(fileAttachment) {
    RNFS.writeFile(fileAttachment.path, fileAttachment.fileData, fileAttachment.encoding)
      .then(() => {
        console.log('RNFS.writeFile ', fileAttachment.path);
        // this.onWriteFileComplete(fileAttachment, sendCallback);
      })
      .catch((err) => {
        console.log(err);
        Alert.alert(`Failed to write file: ${fileAttachment.name}`, err.message);
      });
  },

In render method, call svgRef.toDataURL()

      <VictoryChart

        ref={(chart) => {
          if (chart && chart.containerRef && chart.containerRef.svgRef) {
            setTimeout(() => {
              chart.containerRef.svgRef.toDataURL((base64) => {
                const name = 'profile.png';
                const path = `${RNFS.DocumentDirectoryPath}/${name}`;
                const fileAttachment = {
                  path,
                  name,
                  fileData: base64,
                  mimeType: 'image/png',
                  encoding: 'base64',
                };
                this.onWriteImageToFile(fileAttachment);
              });
            }, 500);
          }
        }}
      >
      ... < removed code >

Thanks in advance,

petermikitsh · 2017-03-20T22:03:42Z

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

esutton · 2017-10-04T17:07:22Z

This appears broken after upgrading react-native and victory-native from 0.7.0 to 0.15.0
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-svg": "^6.0.0-rc1",
"victory-native": "^0.15.0",

It renders however chart.containerRef is undefined?

Is there another way to get chart.containerRef.svgRef ?

    const victoryChart = (
      <VictoryChart
        width={1056}

        ref={(chart) => {
          if (chart && chart.containerRef && chart.containerRef.svgRef) {
            setTimeout(() => {
              console.log('dbg: onSvgCreated timeout');
              chart.containerRef.svgRef.toDataURL((base64) => {
                const name = 'profile.png';

                // Cache Problem: New profile.png images is created but PDF still contains old, even if delete png and pdf first?
                // ToDo: Create a "tmp-<uuid>" folder each time?
                // const path = `${Utility.getFilePath()}/tmp-pdf/${name}`;
                const path = `${Utility.getFilePath()}/${name}`;

                const fileAttachment = {
                  path,
                  name,
                  fileData: base64,
                  mimeType: 'image/png',
                  encoding: 'base64',
                };
                // console.log(base64);
                console.log('fileAttachment:', fileAttachment);
                console.log('this:', this);
                this.onSvgCreated(fileAttachment);
              });
            }, 5 * 1000);
          }
        }}

I hope I do not have to roll back to victory-native 0.7.0 :-(

esutton · 2017-10-04T18:27:03Z

@boygirl explained on Gitter

victory no longer uses refs for anything other than its portal.
There isn't a built in ref, but you could create a light custom container to save a ref if you need
you have access to the containerComponent that VictoryChart will render. You can alter that or provide your own.

I do not understand this. I will do some research on containerComponent

esutton · 2017-10-04T20:30:48Z

I cannot figure this out how to get a svgRef from containerComponent

Rolling-back to victory-native 0.7.0

I expected this to be easy.

I expect creating a PDF containing a VictoryChart image is a common use case of any charting library.

boygirl · 2017-10-04T22:38:58Z

@esutton adding an optional containerRef prop for VictoryContainer based on this feedback. Tracking here: FormidableLabs/victory#781

esutton · 2018-02-06T13:26:52Z

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>
    );
  }

msand · 2018-12-09T01:51:31Z

Closing as the original issues seems fixed.

msand · 2019-10-19T09:17:20Z

An alternative solution if you want vector/svg rather than raster/png:

import * as React from "react";
import { Platform, StyleSheet, TouchableOpacity } from "react-native";
import { Svg, Rect } from "react-native-svg";
import ReactDOMServer from "react-dom/server";

const isWeb = Platform.OS === "web";

const childToWeb = child => {
  const { type, props } = child;
  const name = type && (type.displayName || type.name);
  const Tag = name && name[0].toLowerCase() + name.slice(1);
  return <Tag {...props}>{toWeb(props.children)}</Tag>;
};

const toWeb = children => React.Children.map(children, childToWeb);

export default class App extends React.Component {
  renderSvg() {
    return (
      <Svg height="100%" width="100%" style={{ backgroundColor: "#33AAFF" }}>
        <Rect
          x="50"
          y="50"
          width="50"
          height="50"
          fill="#3399ff"
          strokeWidth="3"
          stroke="rgb(0,0,0)"
        />
      </Svg>
    );
  }
  serialize = () => {
    const element = this.renderSvg();
    const webJsx = isWeb ? element : toWeb(element);
    const svgString = ReactDOMServer.renderToStaticMarkup(webJsx);
    console.log(svgString);
  };
  render() {
    return (
      <TouchableOpacity style={styles.container} onPress={this.serialize}>
        {this.renderSvg()}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8
  }
});

awesomejerry mentioned this issue May 15, 2017

Is there any way to save the generated SVG to gallery Expensify/react-native-qrcode-svg#13

Closed

msand closed this as completed Dec 9, 2018

garrettg123 mentioned this issue Apr 4, 2020

Using Chart to Generate an Image File JesperLekland/react-native-svg-charts#455

Open

CWilsonTSP mentioned this issue Apr 10, 2020

Access underlying SVG code for .svg File JesperLekland/react-native-svg-charts#457

Open

petrusek mentioned this issue Aug 29, 2023

Serialization into SVG XML (svg file) on native platforms #2124

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to save created image to SVG file ? #212

How to save created image to SVG file ? #212

esutton commented Jan 3, 2017

magicismight commented Jan 11, 2017

esutton commented Jan 11, 2017

esutton commented Feb 14, 2017 •

edited

Loading

petermikitsh commented Mar 20, 2017

esutton commented Oct 4, 2017

esutton commented Oct 4, 2017 •

edited

Loading

esutton commented Oct 4, 2017

boygirl commented Oct 4, 2017

esutton commented Feb 6, 2018 •

edited

Loading

msand commented Dec 9, 2018

msand commented Oct 19, 2019

How to save created image to SVG file ? #212

How to save created image to SVG file ? #212

Comments

esutton commented Jan 3, 2017

magicismight commented Jan 11, 2017

esutton commented Jan 11, 2017

esutton commented Feb 14, 2017 • edited Loading

petermikitsh commented Mar 20, 2017

esutton commented Oct 4, 2017

esutton commented Oct 4, 2017 • edited Loading

esutton commented Oct 4, 2017

boygirl commented Oct 4, 2017

esutton commented Feb 6, 2018 • edited Loading

msand commented Dec 9, 2018

msand commented Oct 19, 2019

esutton commented Feb 14, 2017 •

edited

Loading

esutton commented Oct 4, 2017 •

edited

Loading

esutton commented Feb 6, 2018 •

edited

Loading