{"id":51135545,"url":"https://github.com/bmlt-enabled/qrcode-svg","last_synced_at":"2026-06-25T17:30:53.459Z","repository":{"id":364816887,"uuid":"1207486207","full_name":"bmlt-enabled/qrcode-svg","owner":"bmlt-enabled","description":"ES module for generating SVG QR codes in pure JavaScript ","archived":false,"fork":false,"pushed_at":"2026-06-14T15:17:23.000Z","size":252,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T17:14:24.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://qrcode.bmlt.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bmlt-enabled.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-11T02:08:32.000Z","updated_at":"2026-06-14T15:17:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bmlt-enabled/qrcode-svg","commit_stats":null,"previous_names":["bmlt-enabled/qrcode-svg"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bmlt-enabled/qrcode-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmlt-enabled%2Fqrcode-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmlt-enabled%2Fqrcode-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmlt-enabled%2Fqrcode-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmlt-enabled%2Fqrcode-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmlt-enabled","download_url":"https://codeload.github.com/bmlt-enabled/qrcode-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmlt-enabled%2Fqrcode-svg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34786225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-06-25T17:30:53.322Z","updated_at":"2026-06-25T17:30:53.452Z","avatar_url":"https://github.com/bmlt-enabled.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction\n\nAn ES module for generating SVG QR codes in pure JavaScript. Works in the browser and Node.js (\u003e=22).\n\n- pure JavaScript, zero dependencies\n- ESM only\n- SVG output\n\n## Getting Started\n\nInstall the package:\n\n```bash\nnpm install @bmlt-enabled/qrcode-svg\n```\n\nInline example:\n\n```javascript\nimport QRCode from '@bmlt-enabled/qrcode-svg'\n\nconst svg = new QRCode('Hello World!').svg()\n```\n\nMore options:\n\n```javascript\nconst qrcode = new QRCode({\n    content: 'http://github.com/',\n    padding: 4,\n    width: 256,\n    height: 256,\n    color: '#000000',\n    background: '#ffffff',\n    ecl: 'M',\n})\nconst svg = qrcode.svg()\n```\n\n## Options\n\n**List of options:**\n\n- **content** - QR Code content, the only **required** parameter\n- **padding** - white space padding, `4` modules by default, `0` for no border\n- **width** - QR Code width in pixels\n- **height** - QR Code height in pixels\n- **color** - color of modules (squares), color name or hex string, e.g. `#000000`\n- **background** - color of background, color name or hex string, e.g. `white`\n- **ecl** - error correction level: `L`, `M`, `Q`, `H`\n- **join** - join modules (squares) into one shape, into the SVG `path` element, **recommended** for web and responsive use, default: `false`\n- **predefined** - to create a squares as pattern, then populate the canvas, default: `false`, see the output examples below\n- **pretty** - apply indents and new lines, default: `true`\n- **swap** - swap X and Y modules, only if you have issues with some QR readers, default: `false`\n- **xmlDeclaration** - prepend XML declaration to the SVG document, i.e. `\u003c?xml version=\"1.0\" standalone=\"yes\"?\u003e`, default: `true`\n- **container** - wrapping element, default: `svg`, see below\n- **typeNumber** - QR version (1–40), determined automatically if not set\n- **image** - center logo to overlay, as a URL or data URI, see [Center logo](#center-logo)\n- **imageSize** - logo size as a fraction of the QR's shorter side (`0`–`1`), default: `0.2`\n- **imageBackground** - backdrop fill behind the logo, default: the `background` color\n- **imageBackgroundShape** - backdrop shape: `rounded` (default), `circle`, or `none`\n\n**Container options:**\n\n- **svg** - populate squares in a SVG document with `width` and `height` attributes, recommended for converting to raster images or PDF where QR Code is being static (exact size)\n- **svg-viewbox** - populate squares in a SVG document with `viewBox` attribute, **recommended** for responsive web pages\n- **g** - put squares in `g` element, useful when you need to put multiple QR Codes in a single SVG document\n- **none** - no wrapper\n- **path-data** - returns only the raw SVG path data string (join mode is applied automatically)\n\n## SVG output\n\n### Editable squares\n\nThis mode is useful for designers to manipulate with particular squares.\nThus, one can open the QR Code in an editor, select particular modules, move around, change color, etc.\nHowever, some old SVG viewers may generate minor gaps between the squares - the side effect when rendering an image at certain zoom level.\n\nDefault options\n\n```javascript\nconst qrcode = new QRCode({\n    content: 'Pretty Fox',\n    join: false,\n    predefined: false,\n})\n```\n\nOutput with `rect` elements\n\n```xml\n\u003c?xml version=\"1.0\" standalone=\"yes\"?\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"256\" height=\"256\"\u003e\n  \u003crect x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:#ffffff;shape-rendering:crispEdges;\"/\u003e\n  \u003crect x=\"16\" y=\"16\" width=\"8\" height=\"8\" style=\"fill:#000000;shape-rendering:crispEdges;\"/\u003e\n  \u003crect x=\"24\" y=\"16\" width=\"8\" height=\"8\" style=\"fill:#000000;shape-rendering:crispEdges;\"/\u003e\n  \u003crect x=\"32\" y=\"16\" width=\"8\" height=\"8\" style=\"fill:#000000;shape-rendering:crispEdges;\"/\u003e\n  ...\n\u003c/svg\u003e\n```\n\n### Responsive web page\n\nSquares joined into one `path` shape produce a compact file size, i.e. 4-5x reduced compared with `rect` elements.\nA single `path` element will result in an optimized rendering, thus not producing any minor gaps between the squares.\nAlso using the container with `viewBox` attribute may contribute to the responsive scaling on the web.\n\nSet `join` to `true`\n\n```javascript\nconst qrcode = new QRCode({\n    content: 'Pretty Fox',\n    join: true,\n    container: 'svg-viewbox', //Useful but not required\n})\n```\n\nOutput with `path` element\n\n```xml\n\u003c?xml version=\"1.0\" standalone=\"yes\"?\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 256 256\"\u003e\n  \u003crect x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:beige;shape-rendering:crispEdges;\"/\u003e\n  \u003cpath x=\"0\" y=\"0\" style=\"fill:blue;shape-rendering:crispEdges;\" d=\"M35.31,35.31 V44.14 H44.14 V35.31 H35.31 Z...\" /\u003e\n\u003c/svg\u003e\n```\n\n### Predefined pattern\n\nAlgorithm defines the square pattern once before populating a canvas. Useful if you want to generate QR Code with candies.\nHowever, some SVG software and converters do not support `defs` or `use` elements.\n\nSet `predefined` to `true`\n\n```javascript\nconst qrcode = new QRCode({\n    content: 'Pretty Fox',\n    predefined: true,\n})\n```\n\nOutput with `defs` and `use` elements\n\n```xml\n\u003c?xml version=\"1.0\" standalone=\"yes\"?\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"256\" height=\"256\"\u003e\n  \u003cdefs\u003e\u003cpath id=\"qrmodule\" d=\"M0 0 h8.827586206896552 v8.827586206896552 H0 z\" style=\"fill:maroon;shape-rendering:crispEdges;\" /\u003e\u003c/defs\u003e\n  \u003crect x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:beige;shape-rendering:crispEdges;\"/\u003e\n  \u003cuse x=\"35.310344827586206\" y=\"35.310344827586206\" href=\"#qrmodule\" /\u003e\n  \u003cuse x=\"44.13793103448276\" y=\"35.310344827586206\" href=\"#qrmodule\" /\u003e\n  ...\n\u003c/svg\u003e\n```\n\n### Center logo\n\nOverlay a logo in the middle of the QR Code by passing an `image` (a URL or\ndata URI). The image is drawn on top of the modules — it does **not** remove\nany data. The modules it covers are recovered by error correction, so set\n`ecl: 'H'` and keep the logo small (≈20–25%) so the code still scans.\n\n```javascript\nconst qrcode = new QRCode({\n    content: 'https://bmlt.app',\n    ecl: 'H', // high error correction keeps it scannable under the logo\n    image: 'data:image/png;base64,iVBORw0KGgo...', // or 'https://…/logo.png'\n    imageSize: 0.22, // fraction of the shorter side\n    imageBackgroundShape: 'rounded', // 'rounded' | 'circle' | 'none'\n    container: 'svg-viewbox',\n    join: true,\n})\n```\n\nA backdrop in the `background` color (or `imageBackground`) is drawn behind the\nlogo by default so it stays legible against the modules. The logo is emitted as\nan `\u003cimage\u003e` element in the SVG, so it is included in any PNG you rasterize from\nit. The `path-data` container ignores `image` (it returns path data only).\n\n## Usage in the browser\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n        \u003cscript type=\"module\"\u003e\n            import QRCode from 'https://cdn.jsdelivr.net/npm/@bmlt-enabled/qrcode-svg/dist/qrcode.js'\n            const qrcode = new QRCode({\n                content: 'Hello World!',\n                container: 'svg-viewbox',\n                join: true,\n            })\n            document.getElementById('container').innerHTML = qrcode.svg()\n        \u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWhen using a bundler (Vite, Webpack, etc.), you can use the bare specifier instead:\n\n```javascript\nimport QRCode from '@bmlt-enabled/qrcode-svg'\n```\n\n## Credits \u0026 lineage\n\nThis package is a modernized (ESM-only, browser and Node.js, Vite-built, typed) fork of the `qrcode-svg` library. Full lineage:\n\n- Originally created by [papnkukn/qrcode-svg](https://github.com/papnkukn/qrcode-svg).\n- Forked and deobfuscated by [leMaik/qrcode-svg](https://github.com/leMaik/qrcode-svg/)\n- This fork (`@bmlt-enabled/qrcode-svg`) drops the Node CLI, `save()`/`fs` usage, and the ASCII helper; converts to ESM; adds Vite + Vitest + TypeScript declarations.\n\nThanks to [davidshimjs](https://github.com/davidshimjs/qrcodejs) for the base library, and to [Kazuhiko Arase](http://www.d-project.com/) for the original QR Code in JavaScript algorithm.\n\n## Legal notice\n\nLicensed under the [MIT license](https://opensource.org/license/mit).\n\nThe word \"QR Code\" is a registered trademark of [DENSO WAVE INCORPORATED](https://www.qrcode.com/en/patent.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmlt-enabled%2Fqrcode-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmlt-enabled%2Fqrcode-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmlt-enabled%2Fqrcode-svg/lists"}