feat: improve rendered svg

antfu · antfu · commit 1b15e012d88e · 2023-08-07T12:27:27.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ lib-cov
 logs
 node_modules
 temp
+play/out.svg
diff --git a/play/run.ts b/play/run.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import { renderANSI, renderUnicode, renderUnicodeCompact } from '../src'
+import fs from 'node:fs'
+import { renderANSI, renderSVG, renderUnicode, renderUnicodeCompact } from '../src'
 
 const text = 'qrcode'
 
@@ -11,3 +12,5 @@ console.log()
 
 console.log(renderUnicodeCompact(text))
 console.log()
+
+fs.writeFileSync('./play/out.svg', renderSVG(text), 'utf8')
diff --git a/src/generate.ts b/src/generate.ts
@@ -49,7 +49,7 @@ function addBorder(input: QrCodeGenerateResult, border = 1): QrCodeGenerateResul
   if (!border)
     return input
 
-  const { size, data } = input
+  const { size } = input
   const newSize = size + border * 2
 
   input.size = newSize
diff --git a/src/svg.ts b/src/svg.ts
@@ -10,23 +10,29 @@ export function renderSVG(
 ) {
   const result = encode(data, options)
   const {
-    pixelSize = 5,
+    pixelSize = 10,
     whiteColor = 'white',
     blackColor = 'black',
   } = options
   const height = result.size * pixelSize
   const width = result.size * pixelSize
 
-  let svg = `<svg xmlns="http://www.w3.org/2000/svg" height="${height}" width="${width}">`
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">`
+
+  const pathes: string[] = []
 
   for (let row = 0; row < result.size; row++) {
     for (let col = 0; col < result.size; col++) {
       const x = col * pixelSize
       const y = row * pixelSize
-      const fillColor = result.data[row][col] ? blackColor : whiteColor
-      svg += `<rect x="${x}" y="${y}" width="${pixelSize}" height="${pixelSize}" fill="${fillColor}"/>`
+      if (result.data[row][col])
+        pathes.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`)
     }
   }
+
+  svg += `<rect fill="${whiteColor}" width="${width}" height="${height}"/>`
+  svg += `<path fill="${blackColor}" d="${pathes.join('')}"/>`
+
   svg += '</svg>'
   return svg
 }
diff --git a/src/types.ts b/src/types.ts
@@ -101,7 +101,7 @@ export interface QrCodeGenerateSvgOptions extends QrCodeGenerateOptions {
   /**
    * Size of each pixel
    *
-   * @default 5
+   * @default 20
    */
   pixelSize?: number
 
diff --git a/test/output/out1.svg b/test/output/out1.svg

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ export interface QrCodeGenerateSvgOptions extends QrCodeGenerateOptions {`
`101`	`101`	`/**`
`102`	`102`	`* Size of each pixel`
`103`	`103`	`*`
`104`		`- * @default 5`
	`104`	`+ * @default 20`
`105`	`105`	`*/`
`106`	`106`	`pixelSize?: number`
`107`	`107`