{"id":16758135,"url":"https://github.com/foo123/img2svg","last_synced_at":"2025-07-13T04:31:13.313Z","repository":{"id":191787648,"uuid":"683952937","full_name":"foo123/img2svg","owner":"foo123","description":"Vectorize Image Data to SVG using POTRACE. Based on multilabel-potrace by Hugo Raguet, which is based on potrace by Peter Selinger.","archived":false,"fork":false,"pushed_at":"2024-11-13T10:39:29.000Z","size":1372,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-13T11:32:33.066Z","etag":null,"topics":["image-to-svg","multilabel-potrace","potrace"],"latest_commit_sha":null,"homepage":"https://foo123.github.io/examples/img2svg/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-28T06:17:48.000Z","updated_at":"2024-11-13T11:26:15.000Z","dependencies_parsed_at":"2024-11-13T11:26:58.366Z","dependency_job_id":"e6adbed9-8e45-4507-8b0c-fb7bf31d85fa","html_url":"https://github.com/foo123/img2svg","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"547cb161d69a2929ec942711e3d9bfb9f7e18a29"},"previous_names":["foo123/img2svg"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fimg2svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fimg2svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fimg2svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fimg2svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo123","download_url":"https://codeload.github.com/foo123/img2svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225855966,"owners_count":17534966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-to-svg","multilabel-potrace","potrace"],"created_at":"2024-10-13T04:04:15.043Z","updated_at":"2025-07-13T04:31:13.279Z","avatar_url":"https://github.com/foo123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# img2svg\n\nVectorize Image Data to SVG using POTRACE  \n\nBased on [multilabel-potrace by Hugo Raguet](https://gitlab.com/1a7r0ch3/multilabel-potrace), which is based on [potrace by Peter Selinger](https://potrace.sourceforge.net/)\n\n**version 2.0.1** (25 kB minified)\n\n**demo in nodejs with `CanvasLite`:**\n\n```js\nconst CanvasLite = require('./CanvasLite.js');\nconst img2svg = require('../build/img2svg.js');\nconst img = new CanvasLite.Image(), canvas = new CanvasLite();\nimg.onload = () =\u003e {\n    canvas.width = img.width;\n    canvas.height = img.height;\n    canvas.getContext('2d').drawImage(img, 0, 0);\n    const imgData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height);\n    console.log(img2svg(imgData, {depth:16}));\n};\nimg.src = __dirname + '/test.jpeg';\n```\n\n**demo in browser:**\n\n```js\nfunction el(html)\n{\n    const container = document.createElement('div');\n    container.innerHTML = html.trim();\n    return container.firstChild;\n}\nconst img = new Image(), canvas = document.createElement('canvas');\nimg.onload = () =\u003e {\n    canvas.width = img.width;\n    canvas.height = img.height;\n    canvas.getContext('2d').drawImage(img, 0, 0);\n    const imgData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height);\n    const svg = img2svg(imgData, {depth:16});\n    document.body.appendChild(img);\n    document.body.appendChild(el(svg));\n};\nimg.src = './test.jpeg';\n```\n\n**Result:**\n\n![img2svg demo](./img2svg.png)\n\n\n**Options:**\n\n* `depth`: depth of color quantization for all channels (default `16`)\n* `depthR`,`depthG`,`depthB`: depth of color quantization per separate image channel (default `depth`)\n* `transparency`: level of ALPHA channel, from 0 to 100, under which area is considered transparent and is ignored (default `50`)\n* `layered`: separate into layers of overlapping connected components instead of isolated connected components (default `false`)\n* `outline`: line width to generate outline of image only (default `0`)\n* `outlinecolor`: line color to generate outline of image if set, else the color of the area is used (default `null`)\n\n**POTRACE Options:**\n\n* `minpathsegments`: ignore areas with less number of segments than this (default `0`)\n* `turdsize`: ignore areas with size smaller or equal to this (default `0`)\n* `linetolerance`: straight line tolerance (default `0.5`)\n* `alphamax`: balance between more smooth curves vs more lines and corners (default `1.0`)\n* `opttolerance`: tolerance for generating optimum curves if \u003e 0.0 (default `0.2`)\n\n**see also:**\n\n* [CanvasLite](https://github.com/foo123/CanvasLite) an html canvas implementation in pure JavaScript\n* [Rasterizer](https://github.com/foo123/Rasterizer) stroke and fill lines, rectangles, curves and paths, without canvaσ\n* [Gradient](https://github.com/foo123/Gradient) create linear, radial, conic and elliptic gradients and image patterns without canvas\n* [Geometrize](https://github.com/foo123/Geometrize) Computational Geometry and Rendering Library for JavaScript\n* [Plot.js](https://github.com/foo123/Plot.js) simple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML\n* [MOD3](https://github.com/foo123/MOD3) 3D Modifier Library in JavaScript\n* [HAAR.js](https://github.com/foo123/HAAR.js) image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)\n* [HAARPHP](https://github.com/foo123/HAARPHP) image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)\n* [FILTER.js](https://github.com/foo123/FILTER.js) video and image processing and computer vision Library in pure JavaScript (browser and node)\n* [css-color](https://github.com/foo123/css-color) simple class to parse and manipulate colors in various formats\n* [img2svg](https://github.com/foo123/img2svg) vectorize image data to svg\n* [svg2json](https://github.com/foo123/svg2json) parse svg to json\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Fimg2svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo123%2Fimg2svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Fimg2svg/lists"}