Skip to content

Latest commit

 

History

History
95 lines (73 loc) · 2.7 KB

README.md

File metadata and controls

95 lines (73 loc) · 2.7 KB

npm version Downloads install size

SvgQr.js

QR code renderer into SVG with rounded edges

Installation

Npm:

npm install svgqr.js

Yarn:

yarn add svgqr.js

Usage

const SvgQr = require('svgqr.js'); // For NodeJS
import SvgQr from 'svgqr.js'; // For Webpack

// Simple usage
let svg = SvgQr('Hello, World!');

// With options
let svg = SvgQr('Hello, World!', {
  correction: 'H'
});

// svg = '<svg ...> ... </svg>'

API Reference

SvgQr(data, opts [optional]) - encode and render QR code into SVG string

  • data — data to encode

  • opts — object with options fields:

    Name Default Description
    version 0 QR code version, 0 (auto) | from 1 to 40
    correction 'M' Error correction level, 'L' (7%) | 'M' (15%) | 'Q' (25%) | 'H' (30%)
    mode 'Byte' Data encoding mode, 'Numeric' | 'Alphanumeric' | 'Byte'
    encoding 'default' Text encoding, 'default' (bytes) | 'UTF-8'
    corners 'None' Corners style, 'None' | 'Rounded' | 'Skew'
    radius 1 Radius for 'Rounded' | 'Skew' styling
    padding 0 Number of clear modules around QR

Advanced styling

You can specialize corners design for all 8 types of turn directions (the first letters of direction, Right-Up will be ru and etc.)

The filled area will always be on the right as you move

SvgQr('Hello, World!', {
    corners: {
        ru: 'Rounded',  // For each corner you can specify style
        ld: 'Skew', // If not specified, the order of the letters does not matter ('dl' == 'ld')
        // Skipped options will be default 'None'
        dr: 'l0.75 0.25l0.25 0.75', // You can specify custom svg path
        rd: 'l0.25 0.25h0.5v0.5l0.25 0.25'
    },
    radius: { // Specifying radius is completely similar
        ru: 1,
        ld: 0.75,
        dl: 0
    }
});

This code will produce:

Todo

  • Optimize 5 paths into 1
  • Add styling options

License

MIT licensed

Copyright (C) 2019 Aleksandr Krotov