tinysvg-js

library1.4.0jsnpmunverified

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.

serialization data

npm install tinysvg-js

github ↗package ↗

INSTALL

IMPORT

SIG · TINYSVG-JS

tinysvg-js

serializationjavascriptv1.4.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

tinySVG

✓ import { tinySVG } from 'tinysvg-js'

✗ import tinysvg from 'tinysvg-js'

Default export not available; always use named import.

tinySVG.toTinySVG

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

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

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.

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);

Debug

Known issues

gotchaColours 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaWhen 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

affects: >=1.0.0

Errors

Common errors & fixes

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

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

fix

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

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

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.

tinySVG.toSVG returns undefined or unexpected output

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.

Upgrade

Version history

1.4.0latest on npm

Audit

Dependencies

lz-stringoptionalUsed for LZ compression of SVG data

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/0x0zAgency/TinySVG-JS ↗

packagehttps://www.npmjs.com/package/tinysvg-js ↗