@liquid-js/qr-code-styling 5.1.0 → 5.3.0

package/README.md

@@ -84,6 +84,7 @@ While the old API only supports a single extension, it is now possible to apply
 
 ```ts
 import BorderPlugin from '@liquid-js/qr-code-styling/border-plugin'
+import FontFacesPlugin from '@liquid-js/qr-code-styling/font-faces-plugin'
 
 const qrCode = new QRCodeStyling({
     plugins: [
@@ -107,7 +108,17 @@ const qrCode = new QRCodeStyling({
                     content: 'QR code'.toUpperCase()
                 }
             }
-        })
+        }),
+        /**
+         * Embed fonts used with BorderPlugin
+         * 
+         * Not needed when using standard or local fonts, but recommended for portability and consistency; use
+         * subsetting if possible to reduce the generated file size.
+         */
+        new FontFacesPlugin([{
+            font: 'sans-serif',
+            src: `url(data:font/otf;base64,d09GMgABAA...)`
+        }])
     ]
     // ...other options
 })

package/lib/border-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"border-plugin.js","sources":["../src/plugins/border.ts"],"sourcesContent":["import { Options, Plugin } from '../utils/options.js'\r\nimport { extendSVG, numToAttr, svgPath } from './utils.js'\r\n\r\nenum TextPosition {\r\n    top = 'top',\r\n    bottom = 'bottom',\r\n    left = 'left',\r\n    right = 'right'\r\n}\r\n\r\nexport interface TextConfig {\r\n    font?: string\r\n    color?: string\r\n    size?: number\r\n    fontWeight?: 'normal' | 'bold' | number\r\n    fontStyle?: 'normal' | 'italic' | 'oblique'\r\n}\r\n\r\nexport interface BorderPluginOptions {\r\n    /** Border roundnes, from 0 (square) to 1 (circle) */\r\n    round?: number\r\n    size: number\r\n    color: string\r\n    dasharray?: string\r\n    margin?: number\r\n    /**\r\n     * If true, all dimensions are proportional to the code size,\r\n     * i.e. `size: 0.1` means the border thickness is 1/10 of the QR code size\r\n     *\r\n     * This is useful to keep the border visually consistent regardless of the amount of data\r\n     *\r\n     * Note: if using dasharray, use percentage values to maintain consistency\r\n     */\r\n    proportional?: boolean\r\n    text?: TextConfig & {\r\n        [key in TextPosition]?: TextConfig & {\r\n            content: string\r\n        }\r\n    }\r\n    /** A string of embedded CSS @font-face rules */\r\n    fontFaces?: string\r\n}\r\n\r\nexport default class BorderPlugin implements Plugin {\r\n\r\n    constructor(\r\n        private readonly pluginOptions: BorderPluginOptions,\r\n        /** @ignore Create unique id for SVG elements to prevent naming collisions; specify your own if neccesary e.g. for testing */\r\n        private readonly idSuffix = Math.random().toFixed(10).substring(2)\r\n    ) { }\r\n\r\n    postProcess(svg: SVGSVGElement, options: Options) {\r\n        const { document } = options\r\n        const sizeFactor = this.pluginOptions.proportional ? options.size : 1\r\n\r\n        const margin = (this.pluginOptions.margin || 0) * sizeFactor\r\n        let thickness = (this.pluginOptions.size) * sizeFactor\r\n        const drawArea = extendSVG(svg, thickness + margin)\r\n        if (!drawArea)\r\n            return\r\n\r\n        thickness = Math.abs(thickness)\r\n\r\n        const cx = (drawArea.left + drawArea.right) / 2\r\n        const cy = (drawArea.top + drawArea.bottom) / 2\r\n        const lineSize = options.size / 2 * (1 - (this.pluginOptions.round || 0))\r\n        const r = (Math.min(drawArea.right - drawArea.left - 2 * thickness, drawArea.bottom - drawArea.top - 2 * thickness) / 2) - lineSize + thickness / 2\r\n\r\n        let pathR = this.pluginOptions.round ? r : 0\r\n        let pathL = this.pluginOptions.round ? lineSize : lineSize + r\r\n\r\n        const borderEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\r\n        borderEl.setAttribute('width', numToAttr((pathL + pathR) * 2))\r\n        borderEl.setAttribute('height', numToAttr((pathL + pathR) * 2))\r\n        borderEl.setAttribute('x', numToAttr(cx - pathL - pathR))\r\n        borderEl.setAttribute('y', numToAttr(cy - pathL - pathR))\r\n        borderEl.setAttribute('rx', numToAttr(pathR))\r\n        borderEl.setAttribute('fill', 'none')\r\n        borderEl.setAttribute('stroke', this.pluginOptions.color)\r\n        borderEl.setAttribute('stroke-width', numToAttr(thickness))\r\n        if (this.pluginOptions.dasharray) {\r\n            borderEl.setAttribute('stroke-dasharray', this.pluginOptions.dasharray)\r\n        }\r\n\r\n        svg.appendChild(borderEl);\r\n\r\n        [TextPosition.left, TextPosition.top, TextPosition.right, TextPosition.bottom].forEach(postion => {\r\n            const textCfg = this.pluginOptions.text\r\n            const config = textCfg?.[postion]\r\n            if (config) {\r\n                let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n                if (!defs) {\r\n                    defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n                    svg.appendChild(defs)\r\n                }\r\n                const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')\r\n                const size = (config.size || textCfg.size || 1) * sizeFactor\r\n                pathR = this.pluginOptions.round ? r - size / 3 : 0\r\n                pathL = this.pluginOptions.round ? lineSize : lineSize + (r - size / 3)\r\n                switch (postion) {\r\n                    case TextPosition.top:\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx} ${cy + pathR + pathL}\r\n                          h ${-pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n                          v ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n                          v ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n                          h ${-pathL}`\r\n                        )\r\n                        break\r\n                    case TextPosition.bottom:\r\n                        if (this.pluginOptions.round)\r\n                            pathR += size * 2 / 3\r\n                        else\r\n                            pathL += size * 2 / 3\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx} ${cy - pathR - pathL}\r\n                          h ${-pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${-pathR} ${pathR}\r\n                          v ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${pathR} ${pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${pathR} ${-pathR}\r\n                          v ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${-pathR} ${-pathR}\r\n                          h ${-pathL}`\r\n                        )\r\n                        break\r\n                    case TextPosition.left:\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx + pathR + pathL} ${cy}\r\n                          v ${pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n                          h ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n                          v ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n                          v ${pathL}`\r\n                        )\r\n                        break\r\n                    case TextPosition.right:\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx - pathR - pathL} ${cy}\r\n                          v ${-pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n                          v ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n                          h ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n                          v ${-pathL}`\r\n                        )\r\n                        break\r\n                }\r\n                const id = `border-text-${postion}-${this.idSuffix}`\r\n                element.setAttribute('id', id)\r\n                element.setAttribute('fill', 'none')\r\n\r\n                const span = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')\r\n                span.setAttribute('font-family', config.font || textCfg.font || 'sans-serif')\r\n                span.setAttribute('fill', config.color || textCfg.color || '#000')\r\n                span.setAttribute('font-weight', numToAttr(config.fontWeight || textCfg.fontWeight || 'normal'))\r\n                span.setAttribute('font-style', config.fontStyle || textCfg.fontStyle || 'normal')\r\n                span.setAttribute('font-size', numToAttr(size))\r\n                span.textContent = config.content\r\n\r\n                const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath')\r\n                textPath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id)\r\n                textPath.setAttribute('startOffset', '50%')\r\n                textPath.setAttribute('text-anchor', 'middle')\r\n                textPath.appendChild(span)\r\n\r\n                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')\r\n                text.appendChild(textPath)\r\n\r\n                defs.appendChild(element)\r\n                svg.appendChild(text)\r\n            }\r\n        })\r\n\r\n        if (this.pluginOptions.fontFaces) {\r\n            let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n            if (!defs) {\r\n                defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n                svg.appendChild(defs)\r\n            }\r\n            const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')\r\n            style.textContent = this.pluginOptions.fontFaces\r\n            defs.appendChild(style)\r\n        }\r\n    }\r\n}\r\n"],"names":["extendSVG","numToAttr","TextPosition","g","v","top","bottom","left","right","pluginOptions","idSuffix","constructor","Math","random","toFixed","substring","this","postProcess","svg","options","document","sizeFactor","proportional","size","thickness","drawArea","margin","abs","cx","cy","round","min","lineSize","pathR","r","pathL","createElementNS","setAttribute","borderEl","color","dasharray","appendChild","forEach","postion","text","textCfg","config","defs","Array","from","childNodes","find","tagName","toUpperCase","element","svgPath","id","span","font","fontWeight","fontStyle","textContent","content","textPath","setAttributeNS","fontFaces","style"],"mappings":"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"}
+{"version":3,"file":"border-plugin.js","sources":["../src/plugins/border.ts"],"sourcesContent":["import { Options, Plugin } from '../utils/options.js'\r\nimport { extendSVG, numToAttr, svgPath } from './utils.js'\r\n\r\nenum TextPosition {\r\n    top = 'top',\r\n    bottom = 'bottom',\r\n    left = 'left',\r\n    right = 'right'\r\n}\r\n\r\nexport interface TextConfig {\r\n    font?: string\r\n    color?: string\r\n    size?: number\r\n    fontWeight?: 'normal' | 'bold' | number\r\n    fontStyle?: 'normal' | 'italic' | 'oblique'\r\n}\r\n\r\nexport interface BorderPluginOptions {\r\n    /** Border roundnes, from 0 (square) to 1 (circle) */\r\n    round?: number\r\n    size: number\r\n    color: string\r\n    dasharray?: string\r\n    margin?: number\r\n    /**\r\n     * If true, all dimensions are proportional to the code size,\r\n     * i.e. `size: 0.1` means the border thickness is 1/10 of the QR code size\r\n     *\r\n     * This is useful to keep the border visually consistent regardless of the amount of data\r\n     *\r\n     * Note: if using dasharray, use percentage values to maintain consistency\r\n     */\r\n    proportional?: boolean\r\n    text?: TextConfig & {\r\n        [key in TextPosition]?: TextConfig & {\r\n            content: string\r\n        }\r\n    }\r\n    /**\r\n     * A string of embedded CSS @font-face rules\r\n     *\r\n     * @deprecated Use @liquid-js/qr-code-styling/font-faces-plugin\r\n     */\r\n    fontFaces?: string\r\n}\r\n\r\nexport default class BorderPlugin implements Plugin {\r\n\r\n    constructor(\r\n        private readonly pluginOptions: BorderPluginOptions,\r\n        /** @ignore Create unique id for SVG elements to prevent naming collisions; specify your own if neccesary e.g. for testing */\r\n        private readonly idSuffix = Math.random().toFixed(10).substring(2)\r\n    ) { }\r\n\r\n    postProcess(svg: SVGSVGElement, options: Options) {\r\n        const { document } = options\r\n        const sizeFactor = this.pluginOptions.proportional ? options.size : 1\r\n\r\n        const margin = (this.pluginOptions.margin || 0) * sizeFactor\r\n        let thickness = (this.pluginOptions.size) * sizeFactor\r\n        const drawArea = extendSVG(svg, thickness + margin)\r\n        if (!drawArea)\r\n            return\r\n\r\n        thickness = Math.abs(thickness)\r\n\r\n        const cx = (drawArea.left + drawArea.right) / 2\r\n        const cy = (drawArea.top + drawArea.bottom) / 2\r\n        const lineSize = options.size / 2 * (1 - (this.pluginOptions.round || 0))\r\n        const r = (Math.min(drawArea.right - drawArea.left - 2 * thickness, drawArea.bottom - drawArea.top - 2 * thickness) / 2) - lineSize + thickness / 2\r\n\r\n        let pathR = this.pluginOptions.round ? r : 0\r\n        let pathL = this.pluginOptions.round ? lineSize : lineSize + r\r\n\r\n        const borderEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\r\n        borderEl.setAttribute('width', numToAttr((pathL + pathR) * 2))\r\n        borderEl.setAttribute('height', numToAttr((pathL + pathR) * 2))\r\n        borderEl.setAttribute('x', numToAttr(cx - pathL - pathR))\r\n        borderEl.setAttribute('y', numToAttr(cy - pathL - pathR))\r\n        borderEl.setAttribute('rx', numToAttr(pathR))\r\n        borderEl.setAttribute('fill', 'none')\r\n        borderEl.setAttribute('stroke', this.pluginOptions.color)\r\n        borderEl.setAttribute('stroke-width', numToAttr(thickness))\r\n        if (this.pluginOptions.dasharray) {\r\n            borderEl.setAttribute('stroke-dasharray', this.pluginOptions.dasharray)\r\n        }\r\n\r\n        svg.appendChild(borderEl);\r\n\r\n        [TextPosition.left, TextPosition.top, TextPosition.right, TextPosition.bottom].forEach(postion => {\r\n            const textCfg = this.pluginOptions.text\r\n            const config = textCfg?.[postion]\r\n            if (config) {\r\n                let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n                if (!defs) {\r\n                    defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n                    svg.appendChild(defs)\r\n                }\r\n                const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')\r\n                const size = (config.size || textCfg.size || 1) * sizeFactor\r\n                pathR = this.pluginOptions.round ? r - size / 3 : 0\r\n                pathL = this.pluginOptions.round ? lineSize : lineSize + (r - size / 3)\r\n                switch (postion) {\r\n                    case TextPosition.top:\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx} ${cy + pathR + pathL}\r\n                          h ${-pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n                          v ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n                          v ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n                          h ${-pathL}`\r\n                        )\r\n                        break\r\n                    case TextPosition.bottom:\r\n                        if (this.pluginOptions.round)\r\n                            pathR += size * 2 / 3\r\n                        else\r\n                            pathL += size * 2 / 3\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx} ${cy - pathR - pathL}\r\n                          h ${-pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${-pathR} ${pathR}\r\n                          v ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${pathR} ${pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${pathR} ${-pathR}\r\n                          v ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 0 ${-pathR} ${-pathR}\r\n                          h ${-pathL}`\r\n                        )\r\n                        break\r\n                    case TextPosition.left:\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx + pathR + pathL} ${cy}\r\n                          v ${pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n                          h ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n                          v ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n                          v ${pathL}`\r\n                        )\r\n                        break\r\n                    case TextPosition.right:\r\n                        element.setAttribute(\r\n                            'd',\r\n                            svgPath`M ${cx - pathR - pathL} ${cy}\r\n                          v ${-pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n                          h ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n                          v ${2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n                          h ${-2 * pathL}\r\n                          a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n                          v ${-pathL}`\r\n                        )\r\n                        break\r\n                }\r\n                const id = `border-text-${postion}-${this.idSuffix}`\r\n                element.setAttribute('id', id)\r\n                element.setAttribute('fill', 'none')\r\n\r\n                const span = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')\r\n                span.setAttribute('font-family', config.font || textCfg.font || 'sans-serif')\r\n                span.setAttribute('fill', config.color || textCfg.color || '#000')\r\n                span.setAttribute('font-weight', numToAttr(config.fontWeight || textCfg.fontWeight || 'normal'))\r\n                span.setAttribute('font-style', config.fontStyle || textCfg.fontStyle || 'normal')\r\n                span.setAttribute('font-size', numToAttr(size))\r\n                span.textContent = config.content\r\n\r\n                const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath')\r\n                textPath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id)\r\n                textPath.setAttribute('startOffset', '50%')\r\n                textPath.setAttribute('text-anchor', 'middle')\r\n                textPath.appendChild(span)\r\n\r\n                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')\r\n                text.appendChild(textPath)\r\n\r\n                defs.appendChild(element)\r\n                svg.appendChild(text)\r\n            }\r\n        })\r\n\r\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\r\n        if (this.pluginOptions.fontFaces) {\r\n            let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n            if (!defs) {\r\n                defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n                svg.appendChild(defs)\r\n            }\r\n            const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')\r\n            // eslint-disable-next-line @typescript-eslint/no-deprecated\r\n            style.textContent = this.pluginOptions.fontFaces\r\n            defs.appendChild(style)\r\n        }\r\n    }\r\n}\r\n"],"names":["extendSVG","numToAttr","TextPosition","g","v","top","bottom","left","right","pluginOptions","idSuffix","constructor","Math","random","toFixed","substring","this","postProcess","svg","options","document","sizeFactor","proportional","size","thickness","drawArea","margin","abs","cx","cy","round","min","lineSize","pathR","r","pathL","createElementNS","setAttribute","borderEl","color","dasharray","appendChild","forEach","postion","text","textCfg","config","defs","Array","from","childNodes","find","tagName","toUpperCase","element","svgPath","id","span","font","fontWeight","fontStyle","textContent","content","textPath","setAttributeNS","fontFaces","style"],"mappings":"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"}

package/lib/core/qr-svg.d.ts

@@ -7,11 +7,8 @@ export declare class QRSVG {
     get element(): SVGSVGElement;
     private defs;
     private backgroundMask?;
-    private backgroundMaskGroup?;
     private dotsMask?;
-    private dotsMaskGroup?;
     private lightDotsMask?;
-    private lightDotsMaskGroup?;
     private qr?;
     private document;
     private imageTools;

package/lib/figures/dot-elements.d.ts

@@ -22,4 +22,5 @@ export declare const DotElements: {
         innerRadius?: number | undefined;
     }) => SVGElement;
     weave: (args: BasicFigureDrawArgs) => SVGElement;
+    blob: (args: BasicFigureDrawArgs, corners: Record<"tl" | "tr" | "bl" | "br", "round" | "out" | "square">) => SVGElement;
 };

package/lib/font-faces-plugin.js

@@ -0,0 +1,2 @@
+export default class{fontFaces;constructor(t){this.fontFaces=t.map(t=>"string"==typeof t?t:`@font-face { font-family: ${JSON.stringify(t.font)}; src: ${t.src}; ${t.fontStyle?`font-style: ${t.fontStyle};`:""} ${t.fontWeight?`font-weight: ${t.fontWeight};`:""} }`).join("\n")}postProcess(t,e){let o=e.document;(e=Array.from(t.childNodes).find(t=>"DEFS"==t.tagName.toUpperCase()))||(e=o.createElementNS("http://www.w3.org/2000/svg","defs"),t.appendChild(e)),(t=o.createElementNS("http://www.w3.org/2000/svg","style")).textContent=this.fontFaces,e.appendChild(t)}}
+//# sourceMappingURL=font-faces-plugin.js.map

package/lib/font-faces-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-faces-plugin.js","sources":["../src/plugins/font-faces.ts"],"sourcesContent":["import { Options, Plugin } from '../utils/options.js'\r\nimport { TextConfig } from './border.js'\r\n\r\nexport interface FontFace extends Pick<TextConfig, 'font' | 'fontWeight' | 'fontStyle'> {\r\n    /**\r\n     * Base64 encoded font, e.g. `url(data:font/otf;base64,...)`\r\n     */\r\n    src: string\r\n}\r\n\r\n/**\r\n * Embed font faces into the generated SVG\r\n *\r\n * Use as the last plugin when using BorderPlugin({ text: { ... } })\r\n * or other plugins that insert text.\r\n */\r\nexport default class FontFacesPlugin implements Plugin {\r\n    private readonly fontFaces: string\r\n    constructor(fontFaces: Array<FontFace | string>) {\r\n        this.fontFaces = fontFaces.map(v => {\r\n            if (typeof v == 'string')\r\n                return v\r\n            return `@font-face { font-family: ${JSON.stringify(v.font)}; src: ${v.src}; ${v.fontStyle ? `font-style: ${v.fontStyle};` : ''} ${v.fontWeight ? `font-weight: ${v.fontWeight};` : ''} }`\r\n        }).join('\\n')\r\n    }\r\n\r\n    postProcess(svg: SVGSVGElement, options: Options) {\r\n        const document = options.document\r\n        let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n        if (!defs) {\r\n            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n            svg.appendChild(defs)\r\n        }\r\n        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')\r\n        style.textContent = this.fontFaces\r\n        defs.appendChild(style)\r\n    }\r\n}\r\n"],"names":["fontFaces","constructor","this","map","v","JSON","stringify","font","src","fontStyle","fontWeight","join","postProcess","svg","options","document","defs","Array","from","childNodes","find","tagName","toUpperCase","createElementNS","appendChild","style","textContent"],"mappings":"eAgBc,MACOA,UACjBC,WAAAA,CAAYD,GACRE,KAAKF,UAAYA,EAAUG,IAAIC,GACX,iBAALA,EACAA,EACJ,6BAA6BC,KAAKC,UAAUF,EAAEG,eAAeH,EAAEI,QAAQJ,EAAEK,UAAY,eAAeL,EAAEK,aAAe,MAAML,EAAEM,WAAa,gBAAgBN,EAAEM,cAAgB,QACpLC,KAAK,KALmC,CAQ/CC,WAAAA,CAAYC,EAAoBC,GAC5B,IAAAC,EAAcD,EAAGC,UACbC,EAAOC,MAAMC,KAAKL,EAAIM,YAAYC,KAAKhB,GAAiD,QAA3CA,EAAkBiB,QAAQC,kBAEvEN,EAAOD,EAASQ,gBAAgB,6BAA8B,QAC9DV,EAAIW,YAAYR,KAEpBS,EAAWV,EAAGQ,6CAAqD,UAC7DG,YAAcxB,KAAKF,UACzBgB,EAAKQ,YAAYC,EAT2B"}

package/lib/plugins/border.d.ts

@@ -33,7 +33,11 @@ export interface BorderPluginOptions {
             content: string;
         };
     };
-    /** A string of embedded CSS @font-face rules */
+    /**
+     * A string of embedded CSS @font-face rules
+     *
+     * @deprecated Use @liquid-js/qr-code-styling/font-faces-plugin
+     */
     fontFaces?: string;
 }
 export default class BorderPlugin implements Plugin {

package/lib/plugins/font-faces.d.ts

@@ -0,0 +1,19 @@
+import { Options, Plugin } from '../utils/options.js';
+import { TextConfig } from './border.js';
+export interface FontFace extends Pick<TextConfig, 'font' | 'fontWeight' | 'fontStyle'> {
+    /**
+     * Base64 encoded font, e.g. `url(data:font/otf;base64,...)`
+     */
+    src: string;
+}
+/**
+ * Embed font faces into the generated SVG
+ *
+ * Use as the last plugin when using BorderPlugin({ text: { ... } })
+ * or other plugins that insert text.
+ */
+export default class FontFacesPlugin implements Plugin {
+    private readonly fontFaces;
+    constructor(fontFaces: Array<FontFace | string>);
+    postProcess(svg: SVGSVGElement, options: Options): void;
+}

package/lib/qr-code-styling-node.js

@@ -51,7 +51,8 @@ function sanitizeGradient(gradient) {
     DotType.diamond = "diamond", DotType.wave = "wave", DotType.heart = "heart", DotType.star = "star", 
     DotType.weave = "weave", DotType.pentagon = "pentagon", DotType.hexagon = "hexagon", 
     DotType.zebraHorizontal = "zebra-horizontal", DotType.zebraVertical = "zebra-vertical", 
-    DotType.blocksHorizontal = "blocks-horizontal", DotType.blocksVertical = "blocks-vertical";
+    DotType.blocksHorizontal = "blocks-horizontal", DotType.blocksVertical = "blocks-vertical", 
+    DotType.blobs = "blobs";
 }(DotType || (DotType = {})), function(CornerDotType) {
     CornerDotType.dot = "dot", CornerDotType.square = "square", CornerDotType.heart = "heart", 
     CornerDotType.extraRounded = "extra-rounded", CornerDotType.classy = "classy", CornerDotType.inpoint = "inpoint", 
@@ -227,6 +228,21 @@ let DotElements = {
         const {size, x, y, document} = args, thickness = .6 * size, notch = (size - thickness) / 2, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
         return element.setAttribute("d", svgPath`M ${x + notch} ${y} l ${thickness} 0 l 0 ${notch} l ${notch} 0 l 0 ${thickness} l ${-notch} 0 l 0 ${notch} l ${-thickness} 0 l 0 ${-notch} l ${-notch} 0 l 0 ${-thickness} l ${notch} 0 z`), 
         element;
+    },
+    blob: (args, corners) => {
+        const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path"), parts = [ svgPath`M ${x} ${y + 2.5 * dotSize}` ];
+        let l = 2 * dotSize;
+        return "round" == corners.bl ? (parts.push(svgPath`v ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize}`), 
+        l = 2 * dotSize) : "out" == corners.bl ? (parts.push(svgPath`v ${5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = 2 * dotSize) : (parts.push(svgPath`v ${2.5 * dotSize + l}`), l = 4.5 * dotSize), 
+        "round" == corners.br ? (parts.push(svgPath`h ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = -2 * dotSize) : "out" == corners.br ? (parts.push(svgPath`h ${5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${-2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = -2 * dotSize) : (parts.push(svgPath`h ${2.5 * dotSize + l}`), l = -4.5 * dotSize), 
+        "round" == corners.tr ? (parts.push(svgPath`v ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${-2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = -2 * dotSize) : "out" == corners.tr ? (parts.push(svgPath`v ${-5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${-2.5 * dotSize} ${2.5 * dotSize}`), 
+        l = -2 * dotSize) : (parts.push(svgPath`v ${-2.5 * dotSize + l}`), l = -4.5 * dotSize), 
+        "round" == corners.tl ? parts.push(svgPath`h ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${-2.5 * dotSize} ${2.5 * dotSize}`) : "out" == corners.tl ? parts.push(svgPath`h ${-5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${2.5 * dotSize} ${2.5 * dotSize}`) : parts.push(svgPath`h ${-2.5 * dotSize + l}`), 
+        element.setAttribute("d", parts.join(" ") + " z"), element;
     }
 }, qrCornerDotFigures = {
     [CornerDotType.dot]: args => rotateFigure({
@@ -313,7 +329,7 @@ let SquareElements = {
         [ element, fill ];
     },
     centerCircle: args => {
-        const {x, y, size} = args, circleRadius = size / 2.5, cx = x + size / 2, cy = y + size / 2, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        const {x, y, size, document} = args, circleRadius = size / 2.5, cx = x + size / 2, cy = y + size / 2, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
         element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y} h ${size} v ${size} h ${-size} z M ${cx - circleRadius} ${cy} a ${circleRadius} ${circleRadius} 0 1 0 ${2 * circleRadius} 0 a ${circleRadius} ${circleRadius} 0 1 0 ${2 * -circleRadius} 0 z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
         return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - dotSize} ${y - dotSize} h ${size + 2 * dotSize} v ${size + 2 * dotSize} h ${-size - 2 * dotSize} z`), 
@@ -580,7 +596,19 @@ let qrDotFigures = {
                 height
             });
         }
-    })
+    }),
+    [DotType.blobs]: ({getNeighbor, ...args}) => {
+        const tl = getNeighbor?.(-1, -1), t = getNeighbor?.(0, -1), tr = getNeighbor?.(1, -1), r = getNeighbor?.(1, 0), br = getNeighbor?.(1, 1), b = getNeighbor?.(0, 1), bl = getNeighbor?.(-1, 1), l = getNeighbor?.(-1, 0), corners = {
+            tl: "square",
+            tr: "square",
+            bl: "square",
+            br: "square"
+        };
+        return !l && tl && (corners.tl = "out"), !t && tr && (corners.tr = "out"), !r && br && (corners.br = "out"), 
+        !b && bl && (corners.bl = "out"), l || tl || t || (corners.tl = "round"), t || tr || r || (corners.tr = "round"), 
+        r || br || b || (corners.br = "round"), b || bl || l || (corners.bl = "round"), 
+        DotElements.blob(args, corners);
+    }
 };
 
 function getQrDotFigure(type, plugins) {
@@ -684,11 +712,8 @@ class QRSVG {
     }
     defs;
     backgroundMask;
-    backgroundMaskGroup;
     dotsMask;
-    dotsMaskGroup;
     lightDotsMask;
-    lightDotsMaskGroup;
     qr;
     document;
     imageTools;
@@ -799,27 +824,26 @@ class QRSVG {
                 name: "background-color"
             });
             let element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            [this.backgroundMask, this.backgroundMaskGroup] = this.createMask("mask-background-color"), 
-            this.defs.appendChild(this.backgroundMask), element.setAttribute("x", numToAttr(0)), 
-            element.setAttribute("y", numToAttr(0)), element.setAttribute("width", numToAttr(options.size)), 
-            element.setAttribute("height", numToAttr(options.size)), element.setAttribute("rx", numToAttr(options.size / 2 * (options.backgroundOptions.round || 0))), 
-            this.backgroundMaskGroup.appendChild(element);
+            this.backgroundMask = this.createMask("mask-background-color"), this.defs.appendChild(this.backgroundMask), 
+            element.setAttribute("x", numToAttr(0)), element.setAttribute("y", numToAttr(0)), 
+            element.setAttribute("width", numToAttr(options.size)), element.setAttribute("height", numToAttr(options.size)), 
+            element.setAttribute("rx", numToAttr(options.size / 2 * (options.backgroundOptions.round || 0))), 
+            this.backgroundMask.appendChild(element);
         }
     }
     drawDots(filter) {
         if (!this.qr) throw new Error("QR code is not defined");
         let options = this.options, count = this.qr.getModuleCount();
         if (count > options.size) throw new Error("The canvas is too small");
-        let dotSize = this.options.dotsOptions.size;
-        options.imageOptions.mode == ImageMode.background && (options.size -= 2 * dotSize * (options.imageOptions.margin || 0));
+        let dotSize = this.options.dotsOptions.size, size = options.size;
+        options.imageOptions.mode == ImageMode.background && (size -= 2 * dotSize * (options.imageOptions.margin || 0));
         let beginning = Math.floor((options.size - count * dotSize) / 2), draw = getQrDotFigure(options.dotsOptions.type, options.plugins);
-        [this.dotsMask, this.dotsMaskGroup] = this.createMask("mask-dot-color"), this.defs.appendChild(this.dotsMask), 
-        options.imageOptions.mode == ImageMode.background && ([this.lightDotsMask, this.lightDotsMaskGroup] = this.createMask("mask-light-dot-color"), 
+        this.dotsMask = this.createMask("mask-dot-color"), this.defs.appendChild(this.dotsMask), 
+        options.imageOptions.mode == ImageMode.background && (this.lightDotsMask = this.createMask("mask-light-dot-color"), 
         this.defs.appendChild(this.lightDotsMask));
         let margin = 0, additionalDots = 0, fakeCount = count;
         options.shape === ShapeType.circle ? (margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0, 
-        additionalDots = Math.floor((options.size / dotSize - count - 2 * margin) / 2), 
-        fakeCount = count + 2 * additionalDots) : options.imageOptions.mode == ImageMode.background && (additionalDots = 1, 
+        additionalDots = Math.floor((size / dotSize - count - 2 * margin) / 2), fakeCount = count + 2 * additionalDots) : options.imageOptions.mode == ImageMode.background && (additionalDots = 1, 
         fakeCount = count + 2 * additionalDots);
         let fakeBeginning = beginning - additionalDots * dotSize, colorCount = count + 2 * additionalDots;
         this._fakeMatrix = new Array(fakeCount);
@@ -841,14 +865,14 @@ class QRSVG {
             for (let j = 0; j < fakeCount; j++) {
                 let jAlign = alignment.find(v => j - additionalDots > v - 3 && j - additionalDots < v + 3);
                 null != this._fakeMatrix[i][j] && (this.lightDotsMask && (draw = iAlign && jAlign && (iAlign != alignment[0] && jAlign != alignment[0] || jAlign != alignment[0] && jAlign != alignment[alignment.length - 1] || iAlign != alignment[0] && iAlign != alignment[alignment.length - 1]) ? getQrDotFigure(DotType.square) : getQrDotFigure(DotType.tinySquare)), 
-                this._fakeMatrix[i][j] ? this.dotsMaskGroup && this.dotsMaskGroup.appendChild(draw({
+                this._fakeMatrix[i][j] ? this.dotsMask && this.dotsMask.appendChild(draw({
                     x: fakeBeginning + i * dotSize,
                     y: fakeBeginning + j * dotSize,
                     size: dotSize,
                     document: this.options.document,
                     getNeighbor: (xOffset, yOffset) => !0 === this._fakeMatrix[i + xOffset]?.[j + yOffset],
                     getPRandom: getRng(this._fakeMatrix, i, j)
-                })) : this.lightDotsMask && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(draw({
+                })) : this.lightDotsMask && this.lightDotsMask && this.lightDotsMask.appendChild(draw({
                     x: fakeBeginning + i * dotSize,
                     y: fakeBeginning + j * dotSize,
                     size: dotSize,
@@ -884,9 +908,9 @@ class QRSVG {
         if (!element) throw new Error("Element code is not defined");
         let count = this.qr.getModuleCount(), dotSize = this.options.dotsOptions.size, cornersSquareSize = 7 * dotSize, cornersDotSize = 3 * dotSize, beginning = Math.floor((options.size - count * dotSize) / 2);
         [ [ 0, 0, 0 ], [ 1, 0, Math.PI / 2 ], [ 0, 1, -Math.PI / 2 ] ].forEach(([column, row, rotation]) => {
-            let x = beginning + column * dotSize * (count - 7), y = beginning + row * dotSize * (count - 7), cornersSquareMask = this.dotsMask, cornersSquareMaskGroup = this.dotsMaskGroup, cornersDotMask = this.dotsMask, cornersDotMaskGroup = this.dotsMaskGroup;
-            (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) && ([cornersSquareMask, cornersSquareMaskGroup] = this.createMask(`mask-corners-square-color-${column}-${row}`), 
-            this.defs.appendChild(cornersSquareMask), cornersDotMask = cornersSquareMask, cornersDotMaskGroup = cornersSquareMaskGroup, 
+            let x = beginning + column * dotSize * (count - 7), y = beginning + row * dotSize * (count - 7), cornersSquareMask = this.dotsMask, cornersDotMask = this.dotsMask;
+            (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) && (cornersSquareMask = this.createMask(`mask-corners-square-color-${column}-${row}`), 
+            this.defs.appendChild(cornersSquareMask), cornersDotMask = cornersSquareMask, cornersDotMask = cornersSquareMask, 
             this.createColor({
                 options: options.cornersSquareOptions?.gradient,
                 color: options.cornersSquareOptions?.color,
@@ -912,20 +936,20 @@ class QRSVG {
             var plugins, type, val;
             if (pluinCornerSquare) {
                 let [cornerElement, cornerFill] = pluinCornerSquare;
-                cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornerElement), this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornerFill);
+                cornersSquareMask && cornersSquareMask.appendChild(cornerElement), this.lightDotsMask && this.lightDotsMask.appendChild(cornerFill);
             } else if (val = options.cornersSquareOptions?.type, val && cornerSquareTypes.has(val)) {
                 let draw = (type = options.cornersSquareOptions.type, qrCornerSquareFigures[type] || qrCornerSquareFigures[CornerSquareType.square]), [cornerElement, cornerFill] = draw(squareArgs);
-                cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornerElement), this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornerFill);
+                cornersSquareMask && cornersSquareMask.appendChild(cornerElement), this.lightDotsMask && this.lightDotsMask.appendChild(cornerFill);
             } else {
                 let draw = getQrDotFigure(options.cornersSquareOptions?.type || options.dotsOptions.type, options.plugins);
-                for (let i = 0; i < squareMask.length; i++) for (let j = 0; j < squareMask[i].length; j++) squareMask[i]?.[j] ? cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(draw({
+                for (let i = 0; i < squareMask.length; i++) for (let j = 0; j < squareMask[i].length; j++) squareMask[i]?.[j] ? cornersSquareMask && cornersSquareMask.appendChild(draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
                     document: this.options.document,
                     getNeighbor: (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset],
                     getPRandom: getRng(this._fakeMatrix, x / dotSize + i, y / dotSize + j, !1)
-                })) : this.lightDotsMask && !dotMask[i]?.[j] && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(draw({
+                })) : this.lightDotsMask && !dotMask[i]?.[j] && this.lightDotsMask && this.lightDotsMask.appendChild(draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
@@ -933,7 +957,7 @@ class QRSVG {
                     getNeighbor: (xOffset, yOffset) => !squareMask[i + xOffset]?.[j + yOffset] && !dotMask[i + xOffset]?.[j + yOffset],
                     getPRandom: getRng(this._fakeMatrix, x / dotSize + i, y / dotSize + j, !1)
                 }));
-                if (this.lightDotsMask) for (let i = -1; i < 8; i++) for (let j = -1; j < 8; j++) -1 != i && 7 != i && -1 != j && 7 != j || this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(draw({
+                if (this.lightDotsMask) for (let i = -1; i < 8; i++) for (let j = -1; j < 8; j++) -1 != i && 7 != i && -1 != j && 7 != j || this.lightDotsMask && this.lightDotsMask.appendChild(draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
@@ -945,7 +969,7 @@ class QRSVG {
                     getPRandom: getRng(this._fakeMatrix, x / dotSize + i, y / dotSize + j, !1)
                 }));
             }
-            (options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) && ([cornersDotMask, cornersDotMaskGroup] = this.createMask(`mask-corners-dot-color-${column}-${row}`), 
+            (options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) && (cornersDotMask = this.createMask(`mask-corners-dot-color-${column}-${row}`), 
             this.defs.appendChild(cornersDotMask), this.createColor({
                 options: options.cornersDotOptions?.gradient,
                 color: options.cornersDotOptions?.color,
@@ -970,16 +994,16 @@ class QRSVG {
                     }
                 };
             }(options.plugins)(dotArgs) : void 0;
-            if (pluinCornerDot) cornersDotMaskGroup && cornersDotMaskGroup.appendChild(pluinCornerDot); else if (function(val) {
+            if (pluinCornerDot) cornersDotMask && cornersDotMask.appendChild(pluinCornerDot); else if (function(val) {
                 return !(!val || !cornerDotTypes.has(val));
             }(options.cornersDotOptions?.type)) {
                 let draw = function(type) {
                     return qrCornerDotFigures[type] || qrCornerDotFigures[CornerDotType.square];
                 }(options.cornersDotOptions.type);
-                cornersDotMaskGroup && cornersDotMaskGroup.appendChild(draw(dotArgs));
+                cornersDotMask && cornersDotMask.appendChild(draw(dotArgs));
             } else {
                 let draw = getQrDotFigure(options.cornersDotOptions?.type || options.dotsOptions.type, options.plugins);
-                for (let i = 0; i < dotMask.length; i++) for (let j = 0; j < dotMask[i].length; j++) dotMask[i]?.[j] && cornersDotMaskGroup && cornersDotMaskGroup.appendChild(draw({
+                for (let i = 0; i < dotMask.length; i++) for (let j = 0; j < dotMask[i].length; j++) dotMask[i]?.[j] && cornersDotMask && cornersDotMask.appendChild(draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
@@ -1014,7 +1038,7 @@ class QRSVG {
         let rect = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
         if (rect.setAttribute("x", numToAttr(x)), rect.setAttribute("y", numToAttr(y)), 
         rect.setAttribute("height", numToAttr(height)), rect.setAttribute("width", numToAttr(width)), 
-        rect.setAttribute("style", `mask:url(#mask-${name})`), options) {
+        rect.setAttribute("clip-path", `url(#mask-${name})`), options) {
             let gradient;
             if (options.type === GradientType.radial) gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"), 
             gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"), 
@@ -1046,12 +1070,9 @@ class QRSVG {
         this._element.appendChild(rect);
     }
     createMask(id) {
-        let options = this.options, mask = this.document.createElementNS("http://www.w3.org/2000/svg", "mask");
-        mask.setAttribute("id", id), mask.setAttribute("maskUnits", "userSpaceOnUse"), mask.setAttribute("x", "0"), 
-        mask.setAttribute("y", "0"), mask.setAttribute("width", numToAttr(options.size)), 
-        mask.setAttribute("height", numToAttr(options.size));
-        let group = this.document.createElementNS("http://www.w3.org/2000/svg", "g");
-        return group.setAttribute("fill", "#fff"), mask.appendChild(group), [ mask, group ];
+        let mask = this.document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
+        return mask.setAttribute("id", id), mask.setAttribute("clipPathUnits", "userSpaceOnUse"), 
+        mask;
     }
 }
 
@@ -1145,11 +1166,13 @@ let QRCodeStyling$1 = class {
     }
 };
 
-var FileExtension;
+var KernelType, FileExtension;
 
 let browserUtils;
 
-!function(FileExtension) {
+!function(KernelType) {
+    KernelType.Lanczos = "lanczos", KernelType.Linear = "linear";
+}(KernelType || (KernelType = {})), KernelType.Lanczos, KernelType.Linear, function(FileExtension) {
     FileExtension.svg = "svg", FileExtension.png = "png", FileExtension.jpeg = "jpeg", 
     FileExtension.webp = "webp";
 }(FileExtension || (FileExtension = {}));