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

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?

Solution 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.

Solution 2:

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."