75

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?

ztforster
  • 1,369
  • 2
  • 10
  • 20
  • 2
    https://css-tricks.com/a-guide-on-svg-support-in-email/ – CBroe Jun 10 '16 at 17:23
  • 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. – ztforster Jun 10 '16 at 19:11
  • 2
    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 `` not possible due to prehistoric-ness of rendering engine, etc. pp.) – CBroe Jun 10 '16 at 19:57
  • https://answers.microsoft.com/en-us/outlook_com/forum/all/add-a-vectorial-svg-picture-in-outlook-signature/6c9722d6-6bd5-46bb-953b-002248ba142c – serge Jul 05 '22 at 15:37
  • https://feedbackportal.microsoft.com/feedback/idea/5c129d86-e1e8-ec11-a81b-000d3a03dba2 – serge Jul 05 '22 at 15:37

2 Answers2

84

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.

Marnix.hoh
  • 1,556
  • 1
  • 15
  • 26
Ted Goas
  • 7,051
  • 1
  • 35
  • 42
  • 8
    Can we get an update on this reply, seeing it is 4 years old? – George Vasilopoulos Jan 15 '20 at 11:21
  • 25
    @GeorgeVasilopoulos unfortunately there is no major update. Email clients don't update like browsers and support is largely the same as 2016. – Ted Goas Jan 15 '20 at 13:27
  • 3
    Thanks a lot @Ted, I really appreciate it. – George Vasilopoulos Jan 16 '20 at 12:11
  • 1
    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. – deweydb May 18 '22 at 17:02
  • 2
    @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](https://www.caniemail.com/features/html-svg/). – Ted Goas May 18 '22 at 22:04
  • https://feedbackportal.microsoft.com/feedback/idea/5c129d86-e1e8-ec11-a81b-000d3a03dba2 – serge Jul 05 '22 at 15:37
  • It is 2022. They (Gmail) still don't support SVG. Does anyone know why? – DxTx Oct 04 '22 at 04:57
5

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

toraritte
  • 6,300
  • 3
  • 46
  • 67
  • 1
    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. – gilly3 Jun 19 '19 at 23:14
  • SVG drag and drop does not work for email signatures in Outlook for Windows – serge Jun 10 '22 at 06:23
  • 5
    This answer is irrelevant to the question. – Aaron C Jul 26 '22 at 15:34
  • 1
    It does not embed the svg tag, it just embeds a png version of the svg file – Matias Masso Feb 23 '23 at 17:31