{"id":26484,"library":"tinysvg-js","title":"TinySVG-JS","description":"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.","status":"active","version":"1.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/0x0zAgency/TinySVG-JS","tags":["javascript","svg","typescript"],"install":[{"cmd":"npm install tinysvg-js","lang":"bash","label":"npm"},{"cmd":"yarn add tinysvg-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add tinysvg-js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for LZ compression of SVG data","package":"lz-string","optional":true}],"imports":[{"note":"Default export not available; always use named import.","wrong":"import tinysvg from 'tinysvg-js'","symbol":"tinySVG","correct":"import { tinySVG } from 'tinysvg-js'"},{"note":"ESM-only. toTinySVG is a method on the imported object, not a separate named export.","wrong":"const { toTinySVG } = require('tinysvg-js');","symbol":"tinySVG.toTinySVG","correct":"import { tinySVG } from 'tinysvg-js'; const result = tinySVG.toTinySVG(svgString);"},{"note":"Converts tinySVG back to SVG. Takes optional parameters for colours and headers.","wrong":"","symbol":"tinySVG.toSVG","correct":"import { tinySVG } from 'tinysvg-js'; const result = tinySVG.toSVG(tinySvgString);"}],"quickstart":{"code":"import { tinySVG } from 'tinysvg-js';\n\nconst svgInput = `\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n  <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n</svg>`;\n\n// Convert SVG to TinySVG\nconst [tinyCode, pathSize, colours, compressed] = tinySVG.toTinySVG(svgInput);\nconsole.log('TinySVG:', tinyCode);\nconsole.log('Colours:', colours);\nconsole.log('Compressed:', compressed);\n\n// Convert back to SVG\nconst [svgResult, , ] = tinySVG.toSVG(tinyCode);\nconsole.log('Reconstructed SVG:', svgResult);","lang":"typescript","description":"Demonstrates converting an SVG string to TinySVG format (with optional compression) and back to SVG."},"warnings":[{"fix":"Capture the third return value (colours) and persist it alongside the tiny SVG code.","message":"Colours are separated from SVG paths and returned as an array. You must store colours separately if needed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware that the resulting tiny SVG will not contain colour info; use the colours array to reapply colours when converting back.","message":"The toTinySVG function removes fill attributes and style fill statements. Colours are returned in a separate array as numeric values.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import { tinySVG } from 'tinysvg-js' instead of require or default import.","message":"The library is ESM-only. Using require() or importing as default will fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure lz-string is installed if you plan to decompress: npm install lz-string","message":"When using toSVG with a compressed tiny SVG (wrapped in <...>), compression via lz-string is assumed but lz-string is an optional dependency.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to: import { tinySVG } from 'tinysvg-js';","cause":"Default import is not supported; the library only exports a named object.","error":"import tinysvg from 'tinysvg-js'; // TypeError: tinysvg.toTinySVG is not a function"},{"fix":"Use ES module import syntax or ensure your project is set up for ESM.","cause":"The library is ESM-only and does not support CommonJS require().","error":"const { toTinySVG } = require('tinysvg-js'); // Module not found"},{"fix":"Ensure the input is exactly as produced by toTinySVG (including leading '/' and bracket structure). Test with a known working output first.","cause":"The input string might not be valid TinySVG format (e.g., missing header or incorrect syntax).","error":"tinySVG.toSVG returns undefined or unexpected output"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}