URI encoding in the svg function results in a broken data URI

Open
#130 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
52/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start in packages/public-api/src/apis/ui/helpers/svg.ts at lines 51-53 and inspect how the svg helper constructs its data URI. Verify the encoding behavior across the Shreddit and Android consumers, then confirm that the resulting SVG renders instead of showing a missing-image placeholder.

Written by the indexing model from the issue text.

Description

blocks

The svg helper function calls encodeURIComponent on the provided SVG before returning it. Based on the comment above the return line, that appears to be intentional as a fix for some different issue. Encoding the data like this completely breaks the data URI, resulting in a missing image placeholder on both Shreddit and the Android app (iOS untested).

https://github.com/reddit/devvit/blob/1ac06fd996891a7babb06a50d5d6ed5e039d43d7/packages/public-api/src/apis/ui/helpers/svg.ts#L51-L53

If the point of the URI encoding is to avoid issues with special characters, perhaps it would be best to instead encode it as a base64 string? From testing with local modifications, changing the return line to this appears to work as far as the SVG actually showing up is concerned:

return `data:image/svg+xml;base64,${Buffer.from(str).toString('base64')}`;
Dominant language
TypeScript
Stars
210
Forks
88
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reddit/devvit

All issues in reddit/devvit

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.