Repository navigation
Add SVG download to demo and embed images in SVG downloads - #650
Merged
Merged
Conversation
Turn the demo's Download PNG button into a split button with a dropdown offering PNG and SVG. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UUJ8UiTaVBBcDZj7nK9WSi
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UUJ8UiTaVBBcDZj7nK9WSi
Downloaded SVGs linked to the image URL, so the image was missing when the file was opened offline or printed. Fetch each linked image and inline it as a data URL, keeping the original href if the fetch fails. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UUJ8UiTaVBBcDZj7nK9WSi
LGLabGreg
changed the title
LGLabGreg
marked this pull request as ready for review
October 11, 2026 12:05
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Greg · project thread
Before: the demo page only offered "Download PNG". In the library, a downloaded SVG linked to its image by URL, so the logo was missing when the file was opened offline or printed. The demo logo was also a 60px PNG, so it looked blurry when the SVG was scaled up.
After: "Download PNG" is a split button, and its dropdown offers PNG and SVG. SVG downloads embed linked images as data URLs, so they work offline. The demo uses a new
logo.svg, so its logo stays sharp at any size.How:
download.ts):downloadSVGnow fetches each<image>href on the cloned SVG and inlines it as a data URL. It keeps the original href when the fetch fails or returns an HTTP error, for example because of CORS. Requests send credentials when the image usescrossOrigin: 'use-credentials'. This includes unit tests and a patch changeset.@radix-ui/react-dropdown-menu, a shadcn-styleui/dropdown-menu.tsx, andpublic/images/logo.svg, built from the header logo. The demo now points athttps://reactqrcode.com/images/logo.svg, so the Vercel preview shows a broken logo until this merges.Tested in Chromium against a local docs build: