Add gmail inline SVG to compatibility checker

[hackjamin]

Hey folks,
thanks for that great piece of code btw. 💌

I recently sent some mails with inline svg elements representing brand logos i worked for.
Should have been tested that before i sent my "0 brands i worked for" mail 🫠
For some reason gmail webclient decided to strip that out of the mail html wich is kinda weird as always.
converting it to base64 and using img tag is a possible workaround wich a medium post provided as an solution ( https://medium.com/@muhammadabdullahkhalil/why-your-svg-icons-break-in-gmail-and-how-to-fix-it-in-rails-with-one-line-of-code-eb4f62fdb073 ), but didnt work on my end with the following:

<img
    alt=""
    className="h-[34px] pt-6 fill-white mr-8 pb-2"
    style={{ borderBottom: "2px solid #7F27FB" }}
    src="data:image/svg+xml;base64,PHN2ZwogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgdmVyc2lvbj0iMS4xIgogICAgdmlld0JveD0iMCAwIDY1Mi4xNiAxMDIuMjYiCj4KICAgIDxwb2x5Z29uIGZpbGw9IndoaXRlIiBwb2ludHM9IjIyOC44NiA2MC42NSAyMjguODYgMjQuNjUgMjM3LjQ2IDI0LjY1IDIzNy40NiA3NC4wOCAyMjkuNjYgNzQuMDggMTk5LjI4IDM4LjA4IDE5OS4yOCA3NC4wOCAxOTEuMjEgNzQuMDggMTkxLjIxIDI0LjY1IDE5OS4wMSAyNC42NSAyMjguODYgNjAuNjUiIC8+CiAgICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTMyMS4zNywzOS4xNWgtNy44Yy0uMjksMC0yLjc3LTMuNTMtMy43Ny00LjMtNS44LTQuNDctMTYuNzUtNS4wNS0yMi44Mi0uNzctOS4wNiw2LjM3LTkuNzMsMjIuMDUtMS4zNywyOS4yNCw3LjMyLDYuMjksMjEuNCw1Ljc4LDI2LjI4LTMuMjcuNzEtMS4zMiwyLjQzLTQuODEsMS4xNC01Ljg1aC0xNC43OXYtNy41MmgyMy42N2MuOTUsMTUuMTQtNS42NiwyNy4zLTIxLjg1LDI4LjQxLTM4LjQ0LDIuNjQtMzguOTEtNTUuMDYsMS4xNC01MS41LDkuMDYuOCwxNy45MSw2LjQ2LDIwLjE4LDE1LjU3WiIgLz4KICAgIDxwb2x5Z29uIGZpbGw9IndoaXRlIiBwb2ludHM9IjU4OS43NSAyNC42NSA1ODkuNzUgNDkuOSA2MTcuOTkgMjQuNjUgNjMwLjYzIDI0LjY1IDYwNS4zOSA0Ny4wMiA2MzEuMTcgNzQuMDggNjIwLjE0IDc0LjA4IDU5OC42MyA1Mi41OSA1ODkuNzUgNjAuMzggNTg5Ljc1IDc0LjA4IDU4MS4xNSA3NC4wOCA1ODEuMTUgMjQuNjUgNTg5Ljc1IDI0LjY1IiAvPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMTMuMjIsMjQuNjV2MjQuOTljMCwxMi44MiwxNC41MiwyMi44NywyNS43OCwxNS4wMSwzLjA0LTIuMTIsNy41Ni04LjY3LDcuNTYtMTIuMzJ2LTI3LjY3aDguNjF2MjYuNmMwLDEyLjc2LTEyLjQ4LDIzLjg1LTI1LjAxLDIzLjk2LTExLjc0LjEtMjUuMDEtMTAuOC0yNS4wMS0yMi44OHYtMjcuNjdoOC4wN1oiIC8+CiAgICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTQyNy4zMiwyNC42NXYyNi42YzAsMi4zOSwyLjcyLDguMjMsNC4zMiwxMC4yLDkuNzYsMTIuMDYsMjkuMDMsMy43NiwyOS4wMy0xMC43M3YtMjYuMDZoOC42MWMtLjYzLDEwLjYzLDEuNDcsMjMuMjQtMS43NywzMy40My01Ljk4LDE4Ljg2LTMwLjk5LDIyLjg4LTQzLjEsNy4zNi0xLjYzLTIuMDktNS4xNS05LjA5LTUuMTUtMTEuNTF2LTI5LjI4aDguMDdaIiAvPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik01NDguMzQsMzkuMTVoLTcuOGMtLjMyLDAtMy4wOC0zLjk0LTQuMy00Ljg0LTE2LjE0LTExLjktMzUuOTgsNy41NS0yNS40NSwyNS40Myw1LjIzLDguODcsMTkuNDgsMTAuMzcsMjYuNzQsMy4yNi45My0uOTEsMi4wMS0zLjQzLDIuMjEtMy40M2g4LjYxYy00LjE0LDE0LjYtMjEuOTgsMTkuMTktMzQuODksMTMuMDktMTcuNTktOC4zLTE4LjctMzUuNi0yLjA0LTQ1LjQyLDEyLjY3LTcuNDgsMzIuOTQtMy43NSwzNi45MywxMS45MVoiIC8+CiAgICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTY5LjEyLDI0LjY1djI5LjI4YzAsNy43Ny03LjgxLDE3LjM5LTE1LjE4LDE5Ljc2LTE3LjkzLDUuNzYtMzMuNDctNy4wNC0zMi42OS0yNS40aDguMDdjLTIuMDEsMTQuMTMsMTQuNjQsMjUuNDUsMjYuMDcsMTUuNTcsMS45Mi0xLjY2LDUuMTItNyw1LjEyLTkuMzl2LTIyLjNoLTIxLjUxdi03LjUyaDMwLjEyWiIgLz4KICAgIDxwb2x5Z29uIGZpbGw9IndoaXRlIiBwb2ludHM9IjM2Ni4wMSAyNC42NSAzNjYuMDEgNjYuNTYgMzk2LjEzIDY2LjU2IDM5Ni4xMyA3NC4wOCAzNTcuNCA3NC4wOCAzNTcuNCAyNC42NSAzNjYuMDEgMjQuNjUiIC8+CiAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iNDQwLjIzIiB5PSIyNC42NSIgd2lkdGg9IjkuMTQiIGhlaWdodD0iOC4wNiIgLz4KPC9zdmc+"
/>

Would have been neat if compatibility checker would notice that one and warns me about that.
Even better would be if react mail detects svg tags and converts them into base64 img tags and could opt out or opt in for that feature. But that decisions are on your end of course.

react-mail version: 4.0.16
Shortest svg i used in mail:

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  viewBox="0 0 652.16 102.26"
  className="h-[34px] pt-6 fill-white mr-8 pb-2"
  style={{ borderBottom: "2px solid #7F27FB" }}
>
  <g>
    <g>
      <polygon points="228.86 60.65 228.86 24.65 237.46 24.65 237.46 74.08 229.66 74.08 199.28 38.08 199.28 74.08 191.21 74.08 191.21 24.65 199.01 24.65 228.86 60.65" />
      <path d="M321.37,39.15h-7.8c-.29,0-2.77-3.53-3.77-4.3-5.8-4.47-16.75-5.05-22.82-.77-9.06,6.37-9.73,22.05-1.37,29.24,7.32,6.29,21.4,5.78,26.28-3.27.71-1.32,2.43-4.81,1.14-5.85h-14.79v-7.52h23.67c.95,15.14-5.66,27.3-21.85,28.41-38.44,2.64-38.91-55.06,1.14-51.5,9.06.8,17.91,6.46,20.18,15.57Z" />
      <polygon points="589.75 24.65 589.75 49.9 617.99 24.65 630.63 24.65 605.39 47.02 631.17 74.08 620.14 74.08 598.63 52.59 589.75 60.38 589.75 74.08 581.15 74.08 581.15 24.65 589.75 24.65" />
      <path d="M113.22,24.65v24.99c0,12.82,14.52,22.87,25.78,15.01,3.04-2.12,7.56-8.67,7.56-12.32v-27.67h8.61v26.6c0,12.76-12.48,23.85-25.01,23.96-11.74.1-25.01-10.8-25.01-22.88v-27.67h8.07Z" />
      <path d="M427.32,24.65v26.6c0,2.39,2.72,8.23,4.32,10.2,9.76,12.06,29.03,3.76,29.03-10.73v-26.06h8.61c-.63,10.63,1.47,23.24-1.77,33.43-5.98,18.86-30.99,22.88-43.1,7.36-1.63-2.09-5.15-9.09-5.15-11.51v-29.28h8.07Z" />
      <path d="M548.34,39.15h-7.8c-.32,0-3.08-3.94-4.3-4.84-16.14-11.9-35.98,7.55-25.45,25.43,5.23,8.87,19.48,10.37,26.74,3.26.93-.91,2.01-3.43,2.21-3.43h8.61c-4.14,14.6-21.98,19.19-34.89,13.09-17.59-8.3-18.7-35.6-2.04-45.42,12.67-7.48,32.94-3.75,36.93,11.91Z" />
      <path d="M69.12,24.65v29.28c0,7.77-7.81,17.39-15.18,19.76-17.93,5.76-33.47-7.04-32.69-25.4h8.07c-2.01,14.13,14.64,25.45,26.07,15.57,1.92-1.66,5.12-7,5.12-9.39v-22.3h-21.51v-7.52h30.12Z" />
      <polygon points="366.01 24.65 366.01 66.56 396.13 66.56 396.13 74.08 357.4 74.08 357.4 24.65 366.01 24.65" />
      <rect x="440.23" y="24.65" width="9.14" height="8.06" />
    </g>
  </g>
</svg>

Proposal

I would love to contribute here but i really lack the time actually and thought it would maybe be helpful to just place a flag on it.

Edit:

It also exsists here:
https://www.caniemail.com/features/image-svg/