html5和svg本身不能生成可扫码的条形码/二维码，必须依赖符合国际标准的编码库；jsbarcode适用于一维码（如ean-13），qrcode.js适用于二维码，均支持svg输出；纯手写svg/css无法满足校验位、静区、容错等扫码必需条件。
HTML5 本身不提供条形码或二维码的生成能力，SVG 是一种矢量图形容器，它能清晰呈现图形，但“画出可扫码的条形码/二维码”必须依赖符合国际标准（如 ISO/IEC 16022、ISO/IEC 18004）的编码逻辑。纯手写 SVG 路径或 CSS 拼接出来的“条形码”无法被扫码设备识别——因为缺少校验位、模块宽度比例、静区（quiet zone）、容错结构等关键要素。
用 JsBarcode 在 SVG 中生成合规条形码
JsBarcode 是目前最成熟、轻量、专为一维码设计的前端库，支持 EAN-13、CODE128、ITF-14 等主流格式，并原生输出 SVG 元素（非图片），保证无损缩放和打印精度。
- 引入库：
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>（注意：v4+ 已放弃 IE 支持，生产环境建议锁定 v3.11.5） - HTML 结构需含一个空容器，例如：
<svg id="my-barcode"></svg> - JS 调用前确保 DOM 就绪，且容器有明确宽高（SVG 默认宽高为 0，不设则不可见）：
JsBarcode("#my-barcode", "0123456789012", {<br> format: "EAN13",<br> width: 2,<br> height: 80,<br> displayValue: true<br> }); - 关键细节：data-value 属性非必需，但若使用，值必须合法；传入字符串长度须匹配格式要求（如 EAN-13 必须是 13 位数字，不足自动补零或报错）
用 QRCode.js 或 qrcode-generator 生成 SVG 格式二维码
二维码与条形码不同，其生成逻辑更复杂（含数据编码、掩码、纠错等级、定位图案等）。qrcode-generator 和 QRCode.js 均支持直接输出 SVG 字符串或 DOM 元素，避免 canvas 抗锯齿导致的扫码失败问题。
- 推荐 QRCode.js（更轻、ESM 友好）：
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script> - 生成 SVG 并插入页面：
QRCode.toSVG("https://example.com", {<br> width: 256,<br> height: 256,<br> errorCorrectionLevel: 'M'<br> }).then(svg => {<br> document.getElementById("qrcode").innerHTML = svg;<br> }); - 务必设置足够留白（quiet zone）：SVG 外容器应加 margin ≥ 20px；内部二维码自身需保留至少 4 模块宽度的空白边，否则微信扫一扫等引擎会拒绝识别
- URL 类内容必须 encodeURIComponent 编码，尤其含中文、#、? 时，否则生成结果可能截断或解析错误
为什么不能用纯 SVG/CSS 手动画？
扫码设备（超市枪、微信、支付宝）只认经过严格校验的栅格化图像或 SVG 路径，其底层依赖的是模块宽度比、起始/终止符、校验算法等。手动拼矩形：
- 无法动态计算校验位（如 EAN-13 的第 13 位），扫出来一定是错码
- 缩放后线条像素化或间隙失真，破坏模块边界定义
- 缺少静区（quiet zone），多数扫码器在检测到边缘前就放弃识别
- 不支持纠错机制（二维码的 L/M/Q/H 四级容错），轻微污损即失效
服务端生成更适合哪些场景？
当需要统一管理规则、规避 JS 禁用、提升首屏性能或对接 ERP/打印系统时，服务端生成更稳妥：
- Python 后端可用
python-barcode+qrcode库，返回 SVG 或 PNG，前端仅用<img src="/api/barcode?text=xxx&type=code128"> - Node.js 可用
bwip-js，支持 90+ 条码格式，API 返回 SVG 字符串，前端 innerHTML 插入即可 - 优势：缓存友好（CDN 可缓存 /api/barcode?xxx）、兼容性 100%、便于审计和日志追踪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
