@bpmn-io/svg-to-image 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @bpmn-io/svg-to-image
+
+[![CI](https://github.com/bpmn-io/svg-to-image/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/svg-to-image/actions/workflows/CI.yml)
+
+Converts an SVG to an image with decent quality.
+
+## Usage
+
+```javascript
+import { svgToImage } from 'svg-to-image';
+
+const svg = '<svg>...</svg>';
+
+// Generate PNG
+const result = await svgToImage(svg, {
+    imageType: 'png',
+    outputFormat: 'blob'
+});
+```
+
+## Build and Run
+
+```
+# install dependencies
+npm install
+
+# run project, executing all tasks
+npm run all
+```
+
+## How it works
+
+This package uses [canvg](https://github.com/canvg/canvg) to render SVG elements onto a canvas and then exports them as image data URLs or [image blobs](https://developer.mozilla.org/en-US/docs/Web/API/Blob).
+
+## License
+
+MIT

package/lib/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Turn an SVG into an image, returning the image data URL.
+ *
+ * @param svg
+ * @param options
+ *
+ * @returns
+ */
+export function svgToImage(svg: string, options?: {
+    imageType?: "png" | "jpeg" = "png";
+    outputFormat: "dataUrl";
+}): Promise<string>;
+
+/**
+ * Turn an SVG into an image, returning the image {@link Blob}.
+ *
+ * @param svg
+ * @param options
+ *
+ * @returns
+ */
+export function svgToImage(svg: string, options?: {
+    imageType: "png" | "jpeg" = "png";
+    outputFormat: "blob";
+}): Promise<Blob>;

package/lib/index.js

@@ -0,0 +1,122 @@
+import { Canvg } from 'canvg';
+
+// list of defined encodings
+const ENCODINGS = [
+  'image/png',
+  'image/jpeg'
+];
+
+const OUTPUT_FORMATS = [
+  'dataUrl',
+  'blob'
+];
+
+const INITIAL_SCALE = 3;
+const FINAL_SCALE = 1;
+const SCALE_STEP = 1;
+
+const DATA_URL_REGEX = /^data:((?:\w+\/(?:(?!;).)+)?)((?:;[\w\W]*?[^;])*),(.+)$/;
+
+/**
+ * Turn an SVG into an image, returning the image data URL.
+ *
+ * @overload
+ * @param {string} svg
+ * @param {{ imageType?: 'png'|'jpeg', outputFormat: 'dataUrl' }} [options]
+ *
+ * @returns {Promise<string>}
+ */
+/**
+ * Turn an SVG into an image, returning the image {@link Blob}.
+ *
+ * @overload
+ * @param {string} svg
+ * @param {{ imageType?: 'png'|'jpeg', outputFormat: 'blob' }} [options]
+ *
+ * @returns {Promise<Blob>}
+ */
+/**
+ * Turn an SVG into an image.
+ *
+ * @param {string} svg
+ * @param {{ imageType?: 'png'|'jpeg', outputFormat?: 'dataUrl'|'blob' }} [options]
+ *
+ * @returns {Promise<string|Blob>}
+ */
+export async function svgToImage(svg, options = {}) {
+  const { imageType = 'png', outputFormat = 'dataUrl' } = options;
+  const encoding = 'image/' + imageType;
+
+  if (OUTPUT_FORMATS.indexOf(outputFormat) === -1) {
+    throw new Error('<' + outputFormat + '> is not supported output format for converting svg to image');
+  }
+
+  if (ENCODINGS.indexOf(encoding) === -1) {
+    throw new Error('<' + imageType + '> is not supported type for converting svg to image');
+  }
+
+  const initialSVG = svg;
+
+  for (let scale = INITIAL_SCALE; scale >= FINAL_SCALE; scale -= SCALE_STEP) {
+    try {
+      let canvas = document.createElement('canvas');
+
+      svg = scaleSvg(initialSVG, scale);
+
+      const context = canvas.getContext('2d');
+
+      const canvg = Canvg.fromString(context, svg);
+      await canvg.render();
+
+      // make the background white for every format
+      context.globalCompositeOperation = 'destination-over';
+      context.fillStyle = 'white';
+
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      if (outputFormat === 'dataUrl') {
+        const dataUrl = canvas.toDataURL(encoding);
+
+        if (DATA_URL_REGEX.test(dataUrl)) {
+          return dataUrl;
+        }
+      } else {
+        const blob = await new Promise(resolve => {
+          canvas.toBlob(result => resolve(result), encoding);
+        });
+
+        if (blob) {
+          return blob;
+        }
+      }
+    } catch (error) {
+
+      // If rendering or export fails for this scale, try again with a smaller scale.
+      continue;
+    }
+  }
+
+  throw new Error('Could not convert SVG to image. Diagram size is too big?');
+}
+
+function scaleSvg(svg, scale) {
+  return svg
+    .replace(/width="([^"]+)"/, function(match, widthStr) {
+      const width = parseFloat(widthStr);
+
+      if (Number.isNaN(width)) {
+        return match;
+      }
+
+      return `width="${width * scale}"`;
+    })
+    .replace(/height="([^"]+)"/, function(match, heightStr) {
+      const height = parseFloat(heightStr);
+
+      if (Number.isNaN(height)) {
+        return match;
+      }
+
+      return `height="${height * scale}"`;
+    });
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@bpmn-io/svg-to-image",
+  "version": "1.0.0",
+  "description": "Utility for generating images from SVG markup",
+  "type": "module",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "exports": {
+    ".": {
+      "default": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "all": "run-s lint test",
+    "lint": "eslint .",
+    "test": "karma start karma.config.cjs",
+    "dev": "npm test -- --auto-watch --no-single-run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bpmn-io/svg-to-image.git"
+  },
+  "keywords": [
+    "svg",
+    "image",
+    "png",
+    "jpeg"
+  ],
+  "author": "bpmn.io contributors",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bpmn-io/svg-to-image/issues"
+  },
+  "homepage": "https://github.com/bpmn-io/svg-to-image#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "contributors": [
+    {
+      "name": "bpmn.io contributors",
+      "url": "https://github.com/bpmn-io"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-istanbul": "^7.0.1",
+    "chai": "^6.2.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-bpmn-io": "^2.2.0",
+    "karma": "^6.4.4",
+    "karma-chrome-launcher-2": "^3.3.0",
+    "karma-coverage": "^2.2.1",
+    "karma-debug-launcher": "0.0.5",
+    "karma-env-preprocessor": "^0.1.1",
+    "karma-mocha": "^2.0.1",
+    "karma-webpack": "^5.0.1",
+    "mocha": "^11.7.5",
+    "npm-run-all2": "^8.0.4",
+    "puppeteer": "^24.37.2",
+    "raw-loader": "^4.0.2",
+    "webpack": "^5.105.0"
+  },
+  "dependencies": {
+    "canvg": "^4.0.3"
+  }
+}