SVG not rendering correctly

[mrtom]

• Component or Package Name: @jsx-email/all
• Component or Package Version: 2.2.2
• @jsxp-email/cli Version?: @jsx-email/cli (without the p, assuming that's a template typo?) v1.1.1
• Operating System (or Browser): MacOS, Chrome
• Node Version: 20.9.0
• Link to reproduction (⚠️ read below):

StackBlitz link 404s unfortunately. There is a repo you can play with here.

This repo contains the code created when you use the quick start in the JSX Email docs, with a single SVG JSX file added into the starter template.

Expected Behavior

Here is what that SVG looks like when rendered in my Next app (first) and when sent using react-email (second)

Actual Behavior

Here is what the SVG looks like rendered by the JSX Email preview server (first) and an email generated by JSX Email (second)

Note the white 'tick' is missing in both cases.

Additional Information

[grahamplace]

I don't know the exact limitations, but as I'm starting to work with emails for the first time, my current stance is "we don't use SVG" to avoid confusion / issues

https://css-tricks.com/a-guide-on-svg-support-in-email/

[shellscape]

SVG support is extremely dicey. See https://www.caniemail.com/features/image-svg/

That site is also awesome for viewing compatibility of features across clients.

StackBlitz link 404s unfortunately.

Fixed the bad link. Thanks for raising it.

[mrtom]

Wow, I had no idea it would be so poor in 2023. OK, time to use PNGs in emails! Thanks.