{"_id":"@adrien-powder/qrcode-svg","_rev":"1-d86e7f8427e85f20255e71e396e68035","name":"@adrien-powder/qrcode-svg","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@adrien-powder/qrcode-svg","version":"1.0.0","description":"A simple QR Code generator in pure JavaScript","author":{"name":"papnkukn"},"contributors":[{"name":"adrien-powder","email":"adrien@powder.gg"}],"license":"MIT","main":"lib/qrcode.js","scripts":{"minify":"node minify.js","test":"nodeunit test"},"keywords":["qrcode","svg"],"repository":{"type":"git","url":"git+https://github.com/adrien-powder/qrcode-svg.git"},"bugs":{"url":"https://github.com/adrien-powder/qrcode-svg/issues"},"homepage":"https://github.com/adrien-powder/qrcode-svg","devDependencies":{"minify":"^4.1.3","nodeunit":"^0.11.3"},"gitHead":"9fd391cdcd995ed6a1c034d1ef9070a07522ec95","_id":"@adrien-powder/qrcode-svg@1.0.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-55Om+pqL7Ze2xoNpnlk911JieXFk3ZECr9PfQCzGdP2EDadQsBdVmxCqpM6lhMGowskN9MFAB+LYSt4uU1SCTQ==","shasum":"db45040226b01409296bd853f3ce21931028a7d8","tarball":"https://registry.npmjs.org/@adrien-powder/qrcode-svg/-/qrcode-svg-1.0.0.tgz","fileCount":5,"unpackedSize":56659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2f/mCRA9TVsSAnZWagAARVgP/iijNT95EI+3CamcRIu4\nNRlZrsyRWAQ4WB4NwN1UHniQhFCX+/2j0X0AlHhzj7Fpqw0gww6jCef/hIHx\nbKxKOoqz+/Swj4t9K4RCRAkbCJT2CIdXzMYpxJijCrYkr2FGFslL17kCPGGW\naIe34WJRnpqq9ju3SYyyjqT5TKCnbcbphCUwbjOmoIK0ovSg1tY/+NVpmJTB\nGgPGcQnLsFPjqCQiM1ADpnqDB7QY6OSUjcy0Dv+Xu63GfNSuGyNKgDdduYNw\neurncGBHyX82yBEHjpfai9/tUwheN/D9ZMO32wP8F/mtYvgwG+JC9Sb4u23+\n0QSTmHu5L3hmm481z3EvBVSF9piiwNjrg+bd/xvvlj51bUJLNdGrVLHzjXJ6\nu2f5ZP/WqYQhfrvgHT1bJar0Elsw8F/vrTvJfr9pVIFtlcxMrpSrHYHP8B1N\nlAe2RIoyk/kXomm2vY2ERVIFyCwEfzdLTJNckt9BGQbRQjj98v1jMWwaGLzL\nD5Xp/Dv9Asr2a1Ho3xAjRoovNFR/mivt6RhNZknubsJEB/Jx8o0t1m3FImKX\nKbwfnLkY8OrDy1VkKvBfv9kpWKveWdMgjqdtYPWDIxO6Q13TgQSgiVChb8ke\negnvFpd+m/9AkmG5GUPO3DjQgYmkx8Bz+v58iOpN78NL5UvBmDxHdqe02gxE\nnyeq\r\n=UkBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl2mSdDrNmOoJUnw6yw20k7P6X7WDGwkFnjnXlIyy7jAIhAKGfHX1eAAQ669MnOLFO3ypfkKnpzieQA/pdh5fOqXN2"}]},"_npmUser":{"name":"adrien-powder","email":"adrien@powder.gg"},"directories":{},"maintainers":[{"name":"adrien-powder","email":"adrien@powder.gg"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/qrcode-svg_1.0.0_1624899558049_0.7131022777502809"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-28T16:59:17.996Z","1.0.0":"2021-06-28T16:59:18.185Z","modified":"2022-04-04T11:37:34.594Z"},"maintainers":[{"name":"adrien-powder","email":"adrien@powder.gg"}],"description":"A simple QR Code generator in pure JavaScript","homepage":"https://github.com/adrien-powder/qrcode-svg","keywords":["qrcode","svg"],"repository":{"type":"git","url":"git+https://github.com/adrien-powder/qrcode-svg.git"},"contributors":[{"name":"adrien-powder","email":"adrien@powder.gg"}],"author":{"name":"papnkukn"},"bugs":{"url":"https://github.com/adrien-powder/qrcode-svg/issues"},"license":"MIT","readme":"## Introduction\r\n\r\nThis library has been written to generate a SVG image of QR Code in Node.js, goals:\r\n* pure JavaScript\r\n* no browser requirement\r\n* no external dependencies\r\n* generate SVG output\r\n\r\n## Getting Started\r\n\r\nInstall the package:\r\n```bash\r\nnpm install qrcode-svg\r\n```\r\n\r\nInline example:\r\n```javascript\r\nvar QRCode = require(\"qrcode-svg\");\r\nvar svg = new QRCode(\"Hello World!\").svg();\r\n```\r\n\r\nMore options:\r\n```javascript\r\nvar qrcode = new QRCode({\r\n  content: \"http://github.com/\",\r\n  padding: 4,\r\n  width: 256,\r\n  height: 256,\r\n  color: \"#000000\",\r\n  background: \"#ffffff\",\r\n  ecl: \"M\",\r\n});\r\nqrcode.svg();\r\n```\r\n\r\n## Options\r\n\r\n**List of options:**\r\n* **content** - QR Code content, the only **required** parameter\r\n* **padding** - white space padding, `4` modules by default, `0` for no border\r\n* **width** - QR Code width in pixels\r\n* **height** - QR Code height in pixels\r\n* **color** - color of modules (squares), color name or hex string, e.g. `#000000`\r\n* **background** - color of background, color name or hex string, e.g. `white`\r\n* **ecl** - error correction level: `L`, `M`, `H`, `Q`\r\n* **join** - join modules (squares) into one shape, into the SVG `path` element, **recommended** for web and responsive use, default: `false`\r\n* **predefined** - to create a squares as pattern, then populate the canvas, default: `false`, see the output examples below\r\n* **pretty** - apply indents and new lines, default: `true`\r\n* **swap** - swap X and Y modules, only if you have issues with some QR readers, default: `false`\r\n* **xmlDeclaration** - prepend XML declaration to the SVG document, i.e. `<?xml version=\"1.0\" standalone=\"yes\"?>`, default: `true`\r\n* **container** - wrapping element, default: `svg`, see below\r\n\r\n**Container options:**\r\n* **svg** - populate squares in a SVG document with `width` and `height` attriute, recommended for converting to raster images or PDF where QR Code is being static (exact size)\r\n* **svg-viewbox** - populate squares in a SVG document with `viewBox` attriute, **recommended** for responsive web pages\r\n* **g** - put squares in `g` element, useful when you need to put multiple QR Codes in a single SVG document\r\n* **none** - no wrapper\r\n\r\n## SVG output\r\n\r\n### Editable squares\r\n\r\nThis mode is useful for designers to manipulate with particular squares.\r\nThus, one can open the QR Code in an editor, select particular modules, move around, change color, etc.\r\nHowever, some old SVG viewers may generate minor gaps between the squares - the side effect when rendering an image at certain zoom level.\r\n\r\nDefault options\r\n```javascript\r\nvar qrcode = new QRCode({\r\n  content: \"Pretty Fox\",\r\n  join: false,\r\n  predefined: false\r\n});\r\n```\r\n\r\nOutput with `rect` elements\r\n```xml\r\n<?xml version=\"1.0\" standalone=\"yes\"?>\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"256\" height=\"256\">\r\n  <rect x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:#ffffff;shape-rendering:crispEdges;\"/>\r\n  <rect x=\"16\" y=\"16\" width=\"8\" height=\"8\" style=\"fill:#000000;shape-rendering:crispEdges;\"/>\r\n  <rect x=\"24\" y=\"16\" width=\"8\" height=\"8\" style=\"fill:#000000;shape-rendering:crispEdges;\"/>\r\n  <rect x=\"32\" y=\"16\" width=\"8\" height=\"8\" style=\"fill:#000000;shape-rendering:crispEdges;\"/>\r\n  ...\r\n</svg>\r\n```\r\n\r\n### Responsive web page\r\n\r\nSquares joined into one `path` shape produce a compact file size, i.e. 4-5x reduced compared with `rect` elements.\r\nA single `path` element will result in an optimized rendering, thus not producing any minor gaps between the squares.\r\nAlso using the container with `viewBox` attribute may contribute to the responsive scaling on the web.\r\n\r\nSet `join` to `true`\r\n```javascript\r\nvar qrcode = new QRCode({\r\n  content: \"Pretty Fox\",\r\n  join: true,\r\n  container: \"svg-viewbox\" //Useful but not required\r\n});\r\n```\r\n\r\nOutput with `path` element\r\n```xml\r\n<?xml version=\"1.0\" standalone=\"yes\"?>\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 256 256\">\r\n  <rect x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:beige;shape-rendering:crispEdges;\"/>\r\n  <path x=\"0\" y=\"0\" style=\"fill:blue;shape-rendering:crispEdges;\" d=\"M35.31,35.31 V44.14 H44.14 V35.31 H35.31 Z...\" />\r\n</svg>\r\n```\r\n\r\n### Predefined pattern\r\n\r\nAlgorithm defines the square pattern once before populating a canvas. Useful if you want to generate QR Code with candies.\r\nHowever, some SVG software and converters do not support `defs` or `use` elements.\r\n\r\nSet `predefined` to `true`\r\n```javascript\r\nvar qrcode = new QRCode({\r\n  content: \"Pretty Fox\",\r\n  predefined: true\r\n});\r\n```\r\n\r\nOutput with `defs` and `use` elements\r\n```xml\r\n<?xml version=\"1.0\" standalone=\"yes\"?>\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"256\" height=\"256\">\r\n  <defs><path id=\"qrmodule\" d=\"M0 0 h8.827586206896552 v8.827586206896552 H0 z\" style=\"fill:maroon;shape-rendering:crispEdges;\" /></defs>\r\n  <rect x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:beige;shape-rendering:crispEdges;\"/>\r\n  <use x=\"35.310344827586206\" y=\"35.310344827586206\" href=\"#qrmodule\" />\r\n  <use x=\"44.13793103448276\" y=\"35.310344827586206\" href=\"#qrmodule\" />\r\n  <use x=\"52.96551724137931\" y=\"35.310344827586206\" href=\"#qrmodule\" />\r\n  <use x=\"61.79310344827586\" y=\"35.310344827586206\" href=\"#qrmodule\" />\r\n  <use x=\"70.62068965517241\" y=\"35.310344827586206\" href=\"#qrmodule\" />\r\n  ...\r\n</svg>\r\n```\r\n\r\n## Usage Scenarios\r\n\r\n### Convert to other formats\r\n\r\nUsing [html-pdf](https://www.npmjs.com/package/html-pdf) to convert SVG to PDF (or PNG or JPEG)\r\n```javascript\r\nvar QRCode = require('qrcode-svg');\r\nvar svg = new QRCode('hello').svg();\r\n...\r\nvar pdf = require('html-pdf');\r\npdf.create(svg, { border: 0, type: 'pdf' }).toFile('output.pdf', function(err, res) {\r\n  ...\r\n});\r\n```\r\n\r\n### ASCII modules\r\n\r\nQR Code in ASCII to output in a shell\r\n```javascript\r\nvar QRCode = require('qrcode-svg');\r\n\r\nvar hello = new QRCode(\"Hello World!\");\r\nvar modules = hello.qrcode.modules;\r\n\r\nvar ascii = '';\r\nvar length = modules.length;\r\nfor (var y = 0; y < length; y++) {\r\n  for (var x = 0; x < length; x++) {\r\n    var module = modules[x][y];\r\n    ascii += (module ? 'x' : ' ');\r\n  }\r\n  ascii += '\\r\\n';\r\n}\r\nconsole.log(ascii);\r\n```\r\n\r\n```\r\n\r\n\r\n    xxxxxxx xx    x x xxxxxxx\r\n    x     x  xxxx x x x     x\r\n    x xxx x xx  xx  x x xxx x\r\n    x xxx x       xx  x xxx x\r\n    x xxx x  x   x  x x xxx x\r\n    x     x  x  xx xx x     x\r\n    xxxxxxx x x x x x xxxxxxx\r\n            xx     xx        \r\n    x x  xx    x x   xx   x x\r\n       x x  xx x    xx x xx x\r\n     x  x xx   x x x  xx   xx\r\n     x xx  xxx xx x x  x  x x\r\n     xx  xxxx       xxxx    x\r\n    x x  x xx x xx xx x xx xx\r\n    x    xx   xxxx    xxxx   \r\n    xx xx   x  x  x x xx    x\r\n       xxxx xxxx    xxxxxx  x\r\n                    x   x x  \r\n    xxxxxxx  x  xxx x x x   x\r\n    x     x xxx  x xx   x  x \r\n    x xxx x        xxxxxxxxxx\r\n    x xxx x  xxxxxxxxx  x xx \r\n    x xxx x xxx  xx  x    x x\r\n    x     x    x    x     x  \r\n    xxxxxxx xxx xxx   x   x x\r\n\r\n\r\n```\r\n\r\n### Web browser\r\n\r\nUse on a HTML page with JavaScript\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<div id=\"container\"></div>\r\n<script src=\"dist/qrcode.min.js\"></script>\r\n<script>\r\nvar qrcode = new QRCode({\r\n  content: \"Hello World!\",\r\n  container: \"svg-viewbox\", //Responsive use\r\n  join: true //Crisp rendering and 4-5x reduced file size\r\n});\r\nvar svg = qrcode.svg();\r\ndocument.getElementById(\"container\").innerHTML = svg;\r\n</script>\r\n</body>\r\n</html>\r\n```\r\n\r\n## Thanks\r\n\r\nThanks to [davidshimjs](https://github.com/davidshimjs/qrcodejs) for the base library.\r\n\r\nThanks to [Kazuhiko Arase](http://www.d-project.com/) for the original QR Code in JavaScript algorithm.\r\n\r\nThanks to [papnkukn](https://github.com/papnkukn/qrcode-svg) for the original QR Code SVG library\r\n\r\nThanks to all contributors on the GitHub.\r\n\r\n## Legal notice\r\n\r\n```\r\nLicensed under the MIT license:\r\nhttp://www.opensource.org/licenses/mit-license.php\r\n\r\nThe word \"QR Code\" is registered trademark of DENSO WAVE INCORPORATED\r\nhttp://www.denso-wave.com/qrcode/faqpatent-e.html\r\n```","readmeFilename":"README.md"}