How can I embed SVG into HTML in an email, so that it's visible in most/all email browsers?

Question

I want to generate graphs in SVG, and email an HTML page with those graphs embedded in it (not stored on a server and shown with linked images).

I've tried directly embedding the SVG, using the Object element, and serializing and URI encoding the SVG and specifying the whole string as a background image on a div. Nothing seems to display in Outlook 2013. Any ideas?

Janijania

css-tricks.com/a-guide-on-svg-support-in-email – Issykkul

I found that page earlier. I don't think I'm able to use JPEG backups for these graphs, because they're dynamically generated. What I'm inquiring about is any cool hack that allows be to use only SVG. – Janijania

I doubt that you can "cool hack" anything that uses the MS Word layout engine to render HTML into displaying SVG properly, considering the additional restrictions that are placed on images in email (often not downloaded from external resources for privacy reasons, embedding as an inline image or via <svg> not possible due to prehistoric-ness of rendering engine, etc. pp.) – Issykkul

answers.microsoft.com/en-us/outlook_com/forum/all/… – Indictment

feedbackportal.microsoft.com/feedback/idea/… – Indictment

Answer 1

SVG is not supported in many email clients. The best guide I’ve seen is on Style Campaign. It’s a short read that I vouch for (Anna is super smart!).

TL;DR: A variety of techniques will work in iOS mail clients and (amazingly) Blackberry. But Android, Outlook, and pretty much every other desktop and webmail client does not support SVG and requires a fallback.

Cobaltous

Can we get an update on this reply, seeing it is 4 years old? – Muskeg

@GeorgeVasilopoulos unfortunately there is no major update. Email clients don't update like browsers and support is largely the same as 2016. – Cobaltous

Thanks a lot @Ted, I really appreciate it. – Muskeg

Just FYI the answer here is based on a link which surveys mail clients in 2013. It is nearly a full decade out of date. It talks about android 4, blackberry, and other irrelevant clients by 2022 standards. – Quiet

@deweydb Unfortunately email clients stick around longer than web browsers and support for embedded SVG is still very poor in 2022. Here are more updated stats. – Cobaltous

feedbackportal.microsoft.com/feedback/idea/… – Indictment

It is 2022. They (Gmail) still don't support SVG. Does anyone know why? – Multinational

It is 2024 Gmail still doesn't support SVG) – Garnett

Answer 2

The best you can do is to embed a base64 image e.g.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWklEQVR4nO2WTU7DMBCF3yVY8FPEdZAAcQ0oKRdpZxKxAVE2tN2wD3ATijgFLTsCg+y2IkKKPU4clUVHGsmKlHx5z+MZA5v4byEp9oWQCOFZCFNhfNg0a/MsxYX00YkHHGBXGDdCKIQhnvwSwoMwDppBGadCmCuAf3MmjJN6UMKlVRAO/VXP6IUr5UbQMlynXDLsKew1ezla5rfX9ivsaCy+8yohjErujBXKbzVHpogOJhTGSZfaRLV3C3sNcKKwevVOtxrMeIpQUFXg3AV+axE8dVmtbhaln9WC5+sCv7usfm0NzHiJUlw1FOfVYDPa2lN8Vg3uo6Mcf6HgT2cDsR8iDKODCddOaGnwzwIs9FazELa94KWKQ63liil2rIKW4L3GFwFCEgRdhRnitWw39qY4QpOQDFtCyGxlalQy7tV7GnAz6Qrh0XQh214XLdascxng3HtkNoE1xA8aXn+8yqffgQAAAABJRU5ErkJggg==">

check out icons at https://icons8.com/icons

Circumfuse

This doesn't help the original question. The question is concerned with SVG images, not PNG. To add clarity to this answer, you cannot use SVG images even if they're based64 encoded and you can use PNG images whether they're base64 encoded or not. – Timmi

Thanks for the clarification. Embedded images are good for email clients that prevent your html to load external resources. – Circumfuse

How can i give bounty on this answer? it saved my time – Micamicaela

Answer 3

Update: "Microsoft Word, PowerPoint, Outlook, and Excel for Office 365 on Windows, Mac, Android and Windows Mobile support inserting and editing scalable vector graphics (.SVG) files in your documents, presentations, emails, and workbooks." (Edit SVG images in Microsoft Office 365)

From the "Insert SVG files" section in the Insert icons in Microsoft Office guide

Insert SVG files

SVG stands for scalable vector graphic file, which means you can rotate, color, and resize the file without losing image quality. Office apps, including Word, PowerPoint, Outlook, and Excel, support inserting and editing SVG files.

• Insert an SVG file in Office for Windows: Drag and drop the file from Windows File Explorer into your document.

• Insert an SVG file in Office for Mac: Go to Insert > Pictures > Picture from file to insert your SVG images.

• Insert an SVG file in Office on Android or Windows Mobile: See Add pictures or videos to a file by using your mobile device for more information.

---

An example

Needed to convert our non-profit's logo into SVG to make it look right, so

1. looked up an online tool (by googling "png to svg" in my case)

2. The site generated it, but wouldn't let me it download if I won't register.

3. Opened the SVG image up in the developer console (Chrome: right click on the image and select "Inspect")

4. copy the entire <svg> tag into a simple text file and save it with .svg extension (from this SO thread).

5. In Outlook, "Go to Insert > Pictures > Picture from file to insert your SVG images."

Bharat

On Windows, drag and drop from the file explorer results in an attachment for me, not an embedded image. Choosing Insert > Picture from the ribbon allows me to select an SVG, but upon sending, it's plain that it has been converted to JPEG. – Bairam

SVG drag and drop does not work for email signatures in Outlook for Windows – Indictment

This answer is irrelevant to the question. – Prohibitory

It does not embed the svg tag, it just embeds a png version of the svg file – Castellatus

Maybe not embedded, but it allows a user to take an SVG image into an HTML email that is visible on most/all email browsers, as per the original question. This answer got an upvote from me. – Pantelleria