Fix transparent QR code patterns in SVG exports when background is disabled

[Copilot]

SVG exports had completely transparent QR code patterns (dots, corners, eyes) when "With background" was unchecked, making the entire QR code invisible. The issue was that the dom-to-svg library wasn't preserving fill colors correctly when converting the QR code's SVG elements.

Changes

• Added explicit backgroundOptions to qrCodeProps to pass background color setting to the QR code library
• Added post-processing logic in getSvgString() to ensure QR code pattern elements have visible fill colors
• Detects QR code patterns by checking for clip-path attributes
• Preserves custom colors from user settings
• Falls back to black (#000000) for standard QR code patterns
• Excludes background elements from modification

// In QRCodeCreate.vue
const qrCodeProps = computed<StyledQRCodeProps>(() => ({
  // ... other props
  backgroundOptions: {
    color: styleBackground.value
  }
}))

// In convertToImage.ts - getSvgString()
// Post-process SVG to add explicit fill attributes to pattern elements
const shapes = svgDocument.querySelectorAll('rect, path, circle, ellipse')
shapes.forEach((shape) => {
  // Logic to detect QR code patterns and add fill colors
  // while preserving custom colors and excluding backgrounds
})

Result

Before: Exported SVG with unchecked background had invisible QR code patterns (all transparent)

After:

• Background remains transparent when unchecked (as intended)
• QR code patterns (dots, corners, eyes) are visible with proper fill colors
• Custom pattern colors are preserved

Original prompt

---

This section details on the original issue you should resolve

<issue_title>SVG export is invisible if "With background" is unselected</issue_title>
<issue_description>Hi,

Awesome project, thanks so much for making it. I just wanted to report a minor bug.

If the "with background" checkbox is deselected, exported SVG files are completely invisible. All the objects seem to be present, they are just completely transparent.

I have reproduced this when running mini-qr in both Firefox and Chrome. I tried opening the exported SVG files in both Inkscape and Firefox. PNG and JPG exports are unaffected.

This is easy enough to workaround. I just enable "with background", then open the SVG in Inkscape and delete the background. But I figured you might like to know.

Thanks,
Yoshi</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes SVG export is invisible if "With background" is unselected #240

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mini-qr	Ready	Preview, Comment	Mar 5, 2026 1:19pm

[lyqht]

@copilot this doesn't fix the issue because there are times where we do want the background to be invisible. The user's bug is that the entire SVG is transparent, even the lines/eyes in the qr code when the background is invisible.

[Copilot]

@copilot this doesn't fix the issue because there are times where we do want the background to be invisible. The user's bug is that the entire SVG is transparent, even the lines/eyes...

You're absolutely right - my initial fix was incorrect. I've updated the solution in commit e6af95d.

The new fix:

1. Keeps the background transparent when "With background" is unchecked
2. Ensures QR code patterns (dots, corners, eyes) remain visible by adding explicit fill attributes during SVG export
3. Preserves your custom colors for dots/corners

The issue was that dom-to-svg wasn't preserving fill colors correctly, causing the entire QR code to be transparent. The fix post-processes the SVG to ensure all pattern elements have explicit fill attributes while leaving the background transparent as intended.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.npmjs.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)