TinySVG-JS

1.4.0 verified Fri May 01 auth: no javascript

A Web3-inspired SVG transpiler that minimizes SVG code for blockchain/NFT use, version 1.4.0. It converts SVG into a compact token format (tinySVG) suitable for smart contract storage, with optional LZ compression. Key differentiators: designed for NFT contracts (InfinityMint), separates colors from paths, allows programmatic whitelist/blacklist of SVG tags. Aims to reduce gas costs. Also supports converting tinySVG back to SVG. Ships TypeScript types. Release history sparse; primarily maintained by 0x0zAgency.

Common errors

error import tinysvg from 'tinysvg-js'; // TypeError: tinysvg.toTinySVG is not a function ↓

cause Default import is not supported; the library only exports a named object.

fix

Change to: import { tinySVG } from 'tinysvg-js';

error const { toTinySVG } = require('tinysvg-js'); // Module not found ↓

cause The library is ESM-only and does not support CommonJS require().

fix

Use ES module import syntax or ensure your project is set up for ESM.

error tinySVG.toSVG returns undefined or unexpected output ↓

cause The input string might not be valid TinySVG format (e.g., missing header or incorrect syntax).

fix

Ensure the input is exactly as produced by toTinySVG (including leading '/' and bracket structure). Test with a known working output first.

Warnings

gotcha Colours are separated from SVG paths and returned as an array. You must store colours separately if needed. ↓

fix Capture the third return value (colours) and persist it alongside the tiny SVG code.

gotcha The toTinySVG function removes fill attributes and style fill statements. Colours are returned in a separate array as numeric values. ↓

fix Be aware that the resulting tiny SVG will not contain colour info; use the colours array to reapply colours when converting back.

gotcha The library is ESM-only. Using require() or importing as default will fail. ↓

fix Use import { tinySVG } from 'tinysvg-js' instead of require or default import.

gotcha When using toSVG with a compressed tiny SVG (wrapped in <...>), compression via lz-string is assumed but lz-string is an optional dependency. ↓

fix Ensure lz-string is installed if you plan to decompress: npm install lz-string

Install

npm install tinysvg-js

yarn add tinysvg-js

pnpm add tinysvg-js

Imports

tinySVG

wrong

import tinysvg from 'tinysvg-js'

correct

import { tinySVG } from 'tinysvg-js'

Default export not available; always use named import.

tinySVG.toTinySVG

wrong

const { toTinySVG } = require('tinysvg-js');

correct

import { tinySVG } from 'tinysvg-js'; const result = tinySVG.toTinySVG(svgString);

ESM-only. toTinySVG is a method on the imported object, not a separate named export.

tinySVG.toSVG
```
import { tinySVG } from 'tinysvg-js'; const result = tinySVG.toSVG(tinySvgString);
```
Converts tinySVG back to SVG. Takes optional parameters for colours and headers.

Quickstart

Demonstrates converting an SVG string to TinySVG format (with optional compression) and back to SVG.

import { tinySVG } from 'tinysvg-js';

const svgInput = `
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>`;

// Convert SVG to TinySVG
const [tinyCode, pathSize, colours, compressed] = tinySVG.toTinySVG(svgInput);
console.log('TinySVG:', tinyCode);
console.log('Colours:', colours);
console.log('Compressed:', compressed);

// Convert back to SVG
const [svgResult, , ] = tinySVG.toSVG(tinyCode);
console.log('Reconstructed SVG:', svgResult);