How to convert SVG to PNG in React? - reactjs

Question

I tried with this library: https://www.npmjs.com/package/convert-svg-to-png
But it reaise an error:
import { convert } from 'convert-svg-to-png'
useEffect(() => {
let png = convert('/iStock-1188768310.svg')
console.log(png)
})
Error: Module not found: Can't resolve 'fs'
Import trace for requested module:
./node_modules/tar-fs/index.js
./node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js
./node_modules/puppeteer/lib/cjs/puppeteer/node/Puppeteer.js
./node_modules/puppeteer/lib/cjs/puppeteer/initialize-node.js
What do I wrong, or is it any more 'standard' way to do it? My goal is to use the image az an og:image. I heard SVG can not be used, this is why I try convert to PNG.
I tried this package also: https://github.com/canvg/canvg Like this:
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
v = await Canvg.from(ctx, './svgs/1.svg')
// Start SVG rendering with animations and mouse handling.
v.start()
But it also raise error:
TypeError: Cannot read properties of null (reading 'getContext')
24 | let cv = async () => {
25 | const canvas = document.querySelector('canvas')
> 26 | const ctx = canvas.getContext('2d')
| ^
27 |
28 | v = await Canvg.from(ctx, './sv

Answer 1

according to the library's npm page, the function you need to import is convertFile and not convert:
const { convertFile} = require('convert-svg-to-png');
The following code should work:
(async() => {
const inputFilePath = '/path/to/my-image.svg';
const outputFilePath = await convertFile(inputFilePath);
console.log(outputFilePath);
//=> "/path/to/my-image.png"
})();

Answer 2

The title says "A Node.js package for converting SVG to PNG using headless Chromium". You can only use it in nodejs not in client-side JavaScript. You may want to check this answer if you want to do it in the browser: Convert SVG to image (JPEG, PNG, etc.) in the browser.

Answer 3

Here you have an (client-side) example of how an SVG document can be loaded using fetch() (if the SVG is not already in the DOM), turned into a File object, drawn on a canvas and expoted as a PNG.
var svgcontainer, svg, canvas, ctx, output;
document.addEventListener('DOMContentLoaded', e => {
svgcontainer = document.getElementById('svgcontainer');
canvas = document.getElementById('canvas');
output = document.getElementById('output');
ctx = canvas.getContext('2d');
fetch('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0ib3JhbmdlIiAvPgo8L3N2Zz4KCgo=').then(res => res.text()).then(text => {
let parser = new DOMParser();
let svgdoc = parser.parseFromString(text, "application/xml");
canvas.width = svgdoc.rootElement.getAttribute('width');
canvas.height = svgdoc.rootElement.getAttribute('height');
// append SVG to DOM
svgcontainer.innerHTML = svgdoc.rootElement.outerHTML;
svg = svgcontainer.querySelector('svg');
// create a File object
let file = new File([svgdoc.rootElement.outerHTML], 'svg.svg', {
type: "image/svg+xml"
});
// and a reader
let reader = new FileReader();
reader.addEventListener('load', e => {
/* create a new image assign the result of the filereader
to the image src */
let img = new Image();
// wait for it to got load
img.addEventListener('load', e => {
// update canvas with new image
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(e.target, 0, 0);
// create PNG image based on canvas
let img = new Image();
img.src = canvas.toDataURL("image/png");
output.append(img);
});
img.src = e.target.result;
});
// read the file as a data URL
reader.readAsDataURL(file);
});
});
<div style="display:flex">
SVG:
<div id="svgcontainer"></div>
Canvas: <canvas id="canvas" width="200" height="200"></canvas>
</div>
<p>Exported PNG:</p>
<div id="output"></div>