boleto-barcode-svg
Version:
Generate brazilian boleto barcode in SVG
237 lines (233 loc) • 15.3 kB
JavaScript
import { boletoBarcodeSvg } from "./index.js"
const number = "34195.00008 01233.203189 64221.470004 5 84410000002000"
const svg = boletoBarcodeSvg(number)
const expected = `<svg viewBox="0 0 1264 100">
<rect y="0" height="100%" fill="#000" width="4" x="0"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="4"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="8"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="12"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="16"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="24"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="28"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="36"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="40"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="44"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="52"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="56"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="60"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="64"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="72"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="80"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="84"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="88"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="96"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="100"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="104"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="108"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="116"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="124"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="128"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="136"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="144"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="148"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="152"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="160"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="164"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="168"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="176"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="180"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="184"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="188"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="192"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="196"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="200"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="208"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="216"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="220"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="224"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="232"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="240"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="248"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="252"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="256"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="260"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="264"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="272"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="276"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="284"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="292"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="296"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="300"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="304"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="308"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="312"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="320"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="328"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="336"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="344"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="348"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="352"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="356"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="360"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="364"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="368"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="376"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="384"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="392"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="400"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="404"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="408"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="412"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="416"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="420"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="428"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="436"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="440"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="448"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="452"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="456"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="464"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="468"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="472"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="476"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="480"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="488"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="496"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="504"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="512"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="516"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="520"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="524"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="532"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="536"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="540"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="548"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="556"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="564"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="568"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="572"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="576"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="580"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="584"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="588"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="592"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="600"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="608"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="616"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="624"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="628"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="632"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="636"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="640"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="644"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="648"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="656"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="664"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="672"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="680"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="684"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="688"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="692"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="700"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="704"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="708"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="716"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="720"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="728"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="732"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="736"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="744"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="748"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="756"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="764"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="772"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="776"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="780"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="784"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="788"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="796"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="800"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="808"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="812"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="820"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="828"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="832"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="836"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="840"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="844"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="848"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="856"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="860"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="868"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="872"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="880"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="888"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="892"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="900"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="904"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="908"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="912"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="920"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="928"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="932"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="936"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="940"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="944"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="948"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="956"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="964"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="968"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="972"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="976"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="984"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="988"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="996"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1004"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1008"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1012"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1016"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1024"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1028"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1032"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1040"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1048"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1052"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1056"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1060"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1064"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1072"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1080"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1088"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1092"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1096"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1100"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1104"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1112"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1116"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1120"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1128"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1136"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1140"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1144"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1148"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1152"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1156"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1164"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1172"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1180"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1188"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1192"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1196"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1200"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1204"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1208"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1216"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1224"></rect>
<rect y="0" height="100%" fill="#fff" width="8" x="1232"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1240"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1244"></rect>
<rect y="0" height="100%" fill="#000" width="8" x="1248"></rect>
<rect y="0" height="100%" fill="#fff" width="4" x="1256"></rect>
<rect y="0" height="100%" fill="#000" width="4" x="1260"></rect>
</svg>`
console.assert(svg === expected, "wrong barcode!")