{"id":25228974,"url":"https://github.com/rahatool/svg","last_synced_at":"2025-04-05T14:12:27.878Z","repository":{"id":276868338,"uuid":"930569842","full_name":"rahatool/svg","owner":"rahatool","description":"cross-browser and lightweight ESM-only modules to generate SVG for QR Code and 128 Barcode.","archived":false,"fork":false,"pushed_at":"2025-02-25T20:22:48.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"development","last_synced_at":"2025-02-25T21:27:52.759Z","etag":null,"topics":["barcode","barcode-generator","barcode-writer","esm","javascript","javascript-vanilla","qrcode","qrcode-encoder","qrcode-generator","standalone","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rahatool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-02-10T21:05:26.000Z","updated_at":"2025-02-25T20:22:52.000Z","dependencies_parsed_at":"2025-02-10T22:35:37.461Z","dependency_job_id":null,"html_url":"https://github.com/rahatool/svg","commit_stats":null,"previous_names":["rahatool/svg"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahatool%2Fsvg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahatool%2Fsvg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahatool%2Fsvg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahatool%2Fsvg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rahatool","download_url":"https://codeload.github.com/rahatool/svg/tar.gz/refs/heads/development","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345847,"owners_count":20924102,"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":["barcode","barcode-generator","barcode-writer","esm","javascript","javascript-vanilla","qrcode","qrcode-encoder","qrcode-generator","standalone","svg"],"created_at":"2025-02-11T10:46:33.902Z","updated_at":"2025-04-05T14:12:27.873Z","avatar_url":"https://github.com/rahatool.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"These modules generate SVG for QR Codes and 128 Bar Codes written in pure JavaScript.\n\n## Usage\n\n### 128 BarCode\n```js\nimport {BarCode} from 'https://tool.raha.group/svg/barcode.js';\n\ndocument.body.append(\n\tBarCode.generate({\n\t\tmessage: 'https://raha.group',\n\t\twidth: 320, // 0 is used for auto-width. auto-width depends on the length of generated barcode.\n\t\theight: 80, // 0 is used for auto-height.\n\t\thorizontalPadding: 20, // in pixel\n\t\tverticalPadding: 16, // in pixel\n\t\tforeground: '#000', // line color\n\t\tbackground: '#fff',\n\t})\n);\n```\n- **`horizontalPadding` or `verticalPadding`**: Set `0` to discard padding. If (any) padding value is more than relative dimension (`width` or `height`) value then barcode will be rotated by 180 degrees respectively.\n\n### QRCode\n```js\nimport {QRCode} from 'https://tool.raha.group/svg/qrcode.js';\n\ndocument.body.append(\n\tQRCode.generate({\n\t\tmessage: 'https://raha.group',\n\t\tsize: 256, // in pixel\n\t\tpadding: 16, // in pixel\n\t\tecl: 'M', // ECL is a short form for \"error correction levels\" and is used for \"recovery capacity\" based on \"L\" = low (7%), \"M\" = medium (15%), \"Q\" = quartile (25%) and \"H\" = high (30%).\n\t\tswap: false, // swap the X and Y modules, some users have problems with the QRCode\n\t\tforeground: \"#000000\",\n\t\tbackground: \"#f2f4f8\",\n\t})\n);\n```\n\n## Low-Level Mechanisms of QR Codes and Barcodes\nQR Codes and Code 128 barcodes encode data using distinct low-level mechanisms. Below is a detailed breakdown of their structures, encoding processes, and error-handling methods:\n\n### **Code 128 Barcodes (Linear)**\n1. **Structure**:\n   - **Bars/Spaces**: Each character is represented by **3 bars and 3 spaces**, with widths of 1–4 modules (units). Each bar/space is 1–4 modules wide.\n   - **Character Set**: Encodes all 128 ASCII characters via three code sets (A, B, C). Start character (A/B/C) selects the initial set.\n   - **Symbol Components**: \n     - **Start Character**: Determines code set.\n     - **Data Characters**: Encoded sequentially.\n     - **Checksum**: Weighted modulo-103 sum of start + data characters.\n     - **Stop Character**: 13-module pattern (2 bars, 2 spaces).\n\n2. **Encoding Process**:\n   - **Code Set Selection**: Choose A (control chars), B (text), or C (numeric pairs for compression).\n   - **Checksum Calculation**:\n     - Sum = Start value + Σ (Character value × Position).\n     - Checksum = Sum mod 103.\n   - **Pattern Mapping**: Each character maps to a predefined 11-module pattern of bars/spaces.\n\n3. **Error Detection**:\n   - Checksum validates data integrity. Invalid checksum triggers a rescan.\n\n4. **Scanning**:\n   - Scanners measure bar/space widths, convert to characters, verify checksum, and output data.\n\n---\n\n### **QR Codes (2D Matrix)**\n1. **Structure**:\n   - **Modules**: Black/white squares arranged in a grid. Size depends on version (1–40, up to 177×177 modules).\n   - **Functional Patterns**:\n     - **Finder Patterns**: Three squares at corners for orientation.\n     - **Alignment Patterns**: Smaller squares to correct distortion.\n     - **Timing Patterns**: Alternating modules to calibrate grid size.\n   - **Data Regions**: Encoded data and error correction codewords.\n\n2. **Encoding Process**:\n   - **Data Analysis**: Choose mode (numeric, alphanumeric, byte, Kanji) and error correction level (L/M/Q/H).\n   - **Data Encoding**:\n     - Convert input to bitstream with mode indicator, character count, and data.\n     - Split into blocks for Reed-Solomon error correction.\n   - **Error Correction**: Add Reed-Solomon codewords (per block) based on error correction level.\n   - **Matrix Construction**:\n     - Place functional patterns.\n     - Fill data codewords in zigzag pattern, avoiding reserved areas.\n   - **Masking**: Apply one of 8 mask patterns to minimize scanning issues (e.g., large blank areas). Format/version info is encoded around finders.\n\n3. **Error Correction**:\n   - Reed-Solomon codes correct errors/damage. Higher correction levels (e.g., H) allow up to 30% data recovery.\n\n4. **Scanning**:\n   - Locate finder/alignment patterns to align the grid.\n   - Read format/version info to determine masking.\n   - Unmask data, decode bitstream, correct errors, and output content.\n\n---\n\n### **Key Differences**\n| **Aspect**          | **Code 128**                          | **QR Code**                              |\n|----------------------|---------------------------------------|------------------------------------------|\n| **Dimensionality**   | 1D (linear)                           | 2D (matrix)                              |\n| **Data Capacity**    | ~20–25 chars                          | Up to 3KB (numeric)                      |\n| **Error Handling**   | Checksum (detection only)             | Reed-Solomon (detection + correction)    |\n| **Use Case**         | Simple text (e.g., product labels)    | Complex data (URLs, Wi-Fi credentials)   |\n| **Structure**        | Bars/spaces with start/stop patterns  | Grid with functional and data modules    |\n\n### **Summary**\n- **Code 128**: Linear encoding via bar/space widths, limited capacity, checksum-based validation.\n- **QR Code**: 2D matrix with functional patterns, high capacity, robust error correction, and Reed-Solomon codes. Both rely on precise low-level pattern mapping and scanning algorithms.\n\n## License\nThis work is licensed by [RahaGroup](https://raha.group) under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahatool%2Fsvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frahatool%2Fsvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahatool%2Fsvg/lists"}