pixsvg is an image processing library for Node.js. It reads, transforms, and writes raster images, and it processes SVG: rasterize, recolor, resize markup, and export.

Version 0.2.0 — local package, not published yet.

Installation

After publish:

npm install pixsvg

From this folder:

npm install /path/to/MyModule_SVG

Raster images

const { Pixsvg } = require("pixsvg");

const image = await Pixsvg.read("test.png");
image.resize(256, 256);
await image.write("test-small.jpg");

ESM:

import { Pixsvg } from "pixsvg";

const image = new Pixsvg({ width: 256, height: 256, color: 0xffffffff });
await image.write("out.png");

SVG

Read and rasterize

Pixsvg.read accepts a .svg file, a buffer, a URL, or an SVG string. The SVG is rasterized so every existing operation (resize, crop, greyscale, …) works.

import { Pixsvg } from "pixsvg";

const image = await Pixsvg.read("icon.svg");
image.resize(128, 128);
await image.write("icon.png");

From markup, at a chosen width:

const image = await Pixsvg.read(
  `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
     <circle cx="50" cy="50" r="40" fill="#e74c3c"/>
   </svg>`,
  { width: 400 }
);

Write SVG

await image.write("out.svg");
const svgBuffer = await image.getBuffer("image/svg+xml");

By default the raster is embedded as PNG inside SVG (looks identical). For pixel rectangles instead:

await image.write("out.svg", { mode: "pixels" });

Process SVG markup (no raster)

import { parseSvg, transformSvg, isSvg } from "pixsvg";

const info = parseSvg(svgString);
// { width, height, viewBox, markup }

const recolored = transformSvg(svgString, {
  width: 256,
  height: 256,
  replace: { "#e74c3c": "#2ecc71" },
  background: "#ffffff",
});

transformSvg can set width, height, viewBox, fill, stroke, opacity, background, and replace (swap fill/stroke/stop-color values).

Rasterize helper

import { rasterizeSvg } from "pixsvg";

const bitmap = await rasterizeSvg(svgString, { width: 512, background: "#ffffff" });
const image = new Pixsvg(bitmap);

Formats

• JPEG
• PNG
• BMP
• TIFF
• GIF
• SVG

MIME helpers

import { Mime } from "pixsvg";

Mime.png; // "image/png"
Mime.svg; // "image/svg+xml"

Other exports

| Export | Purpose | | --- | --- | | Pixsvg | Main image class (read, write, transforms) | | PixsvgInstance | TypeScript type for a Pixsvg image | | Mime | Default format MIME types | | isSvg / parseSvg / transformSvg / rasterizeSvg | SVG helpers | | loadFont / measureText | Bitmap font printing | | diff | Compare two images | | ResizeStrategy, BlendMode, HorizontalAlign, VerticalAlign | Options enums | | intToRGBA, rgbaToInt, cssColorToHex | Color helpers |

Fonts:

import { SANS_32_BLACK } from "pixsvg/fonts";