svg-auto-to-png

SVG auto to PNG in vanilla js

https://www.npmjs.com/package/svg-auto-to-png

https://svg-auto-to-png.xgqfrms.xyz

install

$ yarn add svg-auto-to-png
# or
$ npm i svg-auto-to-png

usage

// ESM，build/index.min.mjs (default)
import {svgAutoToPng} from "svg-auto-to-png";

// OR
// CMJ, build/index.min.js
const svgAutoToPng = require("svg-auto-to-png");
// const svgAutoToPng = require("svg-auto-to-png/build/index.min.js");

test

/*

<svg class="icon" style="width: 100px; height: 100px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3949"><path d="M260.064 640.032H176A111.456 111.456 0 0 1 64 528a111.36 111.36 0 0 1 112-111.936H177.632a16 16 0 0 0 15.68-12.8 63.744 63.744 0 0 1 22.176-36.736c17.504-13.376-3.52-39.232-20.16-24.832-8.32 6.816-15.584 15.04-21.28 24.32-3.68 6.048-5.536 13.184-7.872 20.064C91.52 391.36 32 451.968 32 527.968a144.096 144.096 0 0 0 144 144.064h85.056m476.896 0H816c79.488 0 144-64.544 144-144.064 0-52.544-30.208-95.936-72.256-120.96 4.608-18.08 8.256-36.384 8.256-55.04 0-123.52-100.48-224-224-224a16.16 16.16 0 0 0-7.04 1.696c-64.896 2.176-124.32 32.96-165.088 83.264-21.12-11.552-43.68-20.864-67.872-20.896-21.632-0.32-21.632 32.32 0 32 22.4 0.032 44.224 6.752 62.72 19.328a16 16 0 0 0 21.952-3.872A191.776 191.776 0 0 1 864 351.968c0 19.008-2.816 37.92-8.384 56.064a16 16 0 0 0 8.448 19.136A111.04 111.04 0 0 1 928 528a111.456 111.456 0 0 1-112 112.064h-81.056M381.664 202.048a14.368 14.368 0 0 0-5.728 1.28c-8.64 3.68-16.768 8.16-24.448 13.344-19.168 11.584-0.064 39.936 17.888 26.496 5.952-4.032 12.384-7.488 19.072-10.304 16.64-6.784 11.2-31.648-6.752-30.816z m-56 46.24a15.68 15.68 0 0 0-13.024 7.264 143.168 143.168 0 0 0-21.696 51.488c-1.6 7.84-2.112 16-2.368 24.256-10.88-4.16-20.768-11.232-32.576-11.264-21.632-0.32-21.696 32.256-0.064 32 14.304 0 28.256 4.864 39.488 13.696a16 16 0 0 0 25.76-14.88 111.808 111.808 0 0 1-1.12-14.816 112.32 112.32 0 0 1 8.736-43.424c2.848-6.72 6.304-13.12 10.336-19.072a16 16 0 0 0-13.44-25.12z" fill="#F05542" p-id="3950"></path><path d="M452.384 400.032a16 16 0 0 0-16 16V454.4c-14.208 4.16-27.84 9.792-40.896 16.8l-26.976-27.008a16 16 0 0 0-22.624 0l-61.76 61.696a16 16 0 0 0 0 22.624l27.072 27.072c-7.04 12.992-12.736 26.592-16.96 40.8H256a16 16 0 0 0-16 16v87.328a16 16 0 0 0 16 16h38.4c4.16 14.176 9.696 27.84 16.736 40.864l-27.008 27.008a16 16 0 0 0 0 22.624l61.76 61.664a16 16 0 0 0 22.624 0l27.04-27.04c13.024 7.04 26.624 12.736 40.832 16.928v38.304a16 16 0 0 0 16 16h87.232a16 16 0 0 0 16-16v-38.368c14.208-4.16 27.84-9.792 40.896-16.8l26.976 26.976a16 16 0 0 0 22.624 0l61.76-61.664a16 16 0 0 0 0-22.624l-27.072-27.072c7.04-13.024 12.736-26.624 16.96-40.8H736a16 16 0 0 0 16-16v-87.328a16 16 0 0 0-16-16h-38.4a211.424 211.424 0 0 0-16.736-40.864l27.008-27.008a16 16 0 0 0 0-22.624l-61.76-61.696a16 16 0 0 0-22.624 0l-27.04 27.072a211.52 211.52 0 0 0-40.832-16.96v-38.24a16 16 0 0 0-16-16h-87.232z m16 32h55.232v32.768a16 16 0 0 0 12.448 15.552c19.776 4.48 38.624 12.352 55.808 23.136a16 16 0 0 0 19.84-2.24l23.104-23.136 39.136 39.04-23.072 23.072a16 16 0 0 0-2.24 19.776c10.72 17.184 18.464 36.064 22.912 55.872a16 16 0 0 0 15.648 12.48H720v55.328h-32.736a16 16 0 0 0-15.648 12.448 180.288 180.288 0 0 1-23.04 55.808 16 16 0 0 0 2.24 19.808l23.136 23.136-39.136 39.04-23.008-23.008a16 16 0 0 0-19.808-2.304 180.288 180.288 0 0 1-55.872 22.944 16 16 0 0 0-12.48 15.616V880h-55.264v-32.736a16 16 0 0 0-12.448-15.616 180.416 180.416 0 0 1-55.808-23.136 16 16 0 0 0-19.84 2.24l-23.104 23.136-39.136-39.072 23.072-23.04a16 16 0 0 0 2.24-19.776 180.32 180.32 0 0 1-22.912-55.872 16 16 0 0 0-15.648-12.48H272v-55.36h32.736a16 16 0 0 0 15.648-12.416c4.48-19.776 12.288-38.624 23.04-55.808a16 16 0 0 0-2.24-19.84l-23.136-23.104 39.136-39.04 23.008 22.976a16 16 0 0 0 19.808 2.304 180.192 180.192 0 0 1 55.872-22.944 16 16 0 0 0 12.48-15.616v-32.8z" fill="#F05542" p-id="3951"></path><path d="M487.488 569.984c-19.36 1.92-38.08 10.304-52.608 24.864a16 16 0 1 0 22.624 22.624 54.24 54.24 0 0 1 68.736-6.72c21.696 14.464 30.08 41.984 20.064 66.112a54.304 54.304 0 0 1-60.928 32.64 54.336 54.336 0 0 1-43.872-53.44 16 16 0 1 0-32 0 86.72 86.72 0 0 0 69.632 84.864 86.72 86.72 0 0 0 96.8-51.744 86.464 86.464 0 0 0-88.448-119.136z" fill="#F05542" p-id="3952"></path></svg>

 */

// filename = `svg-to-png`, svg = `svg`
svgAutoToPng();

svgAutoToPng(`svg-to-image`);

const svg = document.querySelector(`svg`);

svgAutoToPng(`svg-to-image`, svg);

svgAutoToPng(``, svg);