RocketChat / RocketChat/Rocket.Chat

Custom SVG emojis are converted to png and they look blurry

Open
#23,754 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

You can upload emojis in svg, but they are converted to png and look blurry.

Tested from the electron app and native web app via Chrome.

Emojis seem to look fine in an Android app, but I didn't debug the output.

Steps to reproduce:
  1. Create a custom emoji and upload svg icon of your choice.
  2. Post this emoji to some channel.
  3. Emoji is posted, but it doesn't look sharp because it's converted to png.
Expected behavior:
  1. To be able to see sharp emoji in a native svg.
Actual behavior:
  1. Emoji is posted, but it doesn't look sharp because it's converted to png.
    30corny5D
Server Setup Information:
  • Version of Rocket.Chat Server: 4.1.1
  • Operating System: Ubuntu 18.04
  • Deployment Method: Docker image
  • Number of Running Instances: 1
  • DB Replicaset Oplog: rs0
  • NodeJS Version: 1.28.1
  • MongoDB Version: 4.0.12 / mmapv1
Client Setup Information
  • Desktop App or Browser Version: Desktop App, 3.6.6

  • Operating System: Windows 11

Additional context
  • No additional context.
Relevant logs:
No logs at that time.

Contributor guide

Open the contributing guide

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.

Research direction

No file or test is named. Reproduce the upload-and-post flow in the web and Electron clients, then trace the custom emoji upload and display entry points to find where SVG becomes PNG; done means uploaded SVG emojis remain sharp in the affected clients with coverage for the reported flow.

Written by the indexing model from the issue text.

Assessment

Tech stack
electron, typescript
Domain
full-stack
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.