CODEWITHSUNDEEP
c#html.netemailoutlook
Curtis
Curtis

Reputation: 5882

How do you get special HTML code to work in outlook emails?

I'm using an SmtpClient to send e-mails programatically. I use a MailMessage in the SmtpClient.SendAsync() call. I set MailMessage.IsBodyHtml=true.

I am able to use simple html tags like <font> but am having trouble using tags like:

<svg width="600" height="100">
   <rect x="0" y="0" rx="4" ry="4" width="20" height="50" style="fill:red" />
   <rect x="20" y="0" rx="4" ry="4" width="20" height="100" style="fill:green" />
   <rect x="40" y="0" rx="4" ry="4" width="20" height="100" style="fill:green" />
   <rect x="60" y="0" rx="4" ry="4" width="20" height="100" style="fill:green" />
   Sorry, your browser does not support inline SVG.
</svg>

My end goal here is to send an e-mail that has a simple graph I was able to get it to show up using the above html in a web page, but it's not working on the e-mails I send that are opened in Outlook.

<svg> and <canvas> don't appear to be supported in emails being displayed in Microsoft Outlook. Is there something else I could be using to get the same results as above? Is there some special header I need to be using for the <svg> and/or <canvas> to be supported in the e-mails I'm sending?

I don't want anything too complicated here. I just have a set of true/false values that I want to display in a graph of some sort. I can programatically draw a bunch of rectangles or whatever, but need graphics that will actually be visible in the email when opened with an Outlook Client.

Upvotes: 1

Views: 767

Answers (1)

gwally
gwally

Reputation: 3527

SVG Does not work in Outlook.

It doesn't work in Gmail, AOL, Yahoo, Notes, Thunderbird or most versions of Android.

VML works in Outlook. It's a dead-end technology that has spotty support and few examples. It can do what you like as long as it's not too complicated.

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:42px;v-text-anchor:middle;width:500px;" strokecolor="#6f5a95" fillcolor="#563d82">
<w:anchorlock/>
<center style="color:#ffffff;font-family: Arial,sans-serif;font-size:18px;">See Your Choices</center>
</v:rect>
<![endif]-->

You can definitely make boxes. A graph would not be hard, but you will save yourself a lot of trouble if you just make the Outlook version a jpg image.

I don't have an example of some data points I did in VML. But if you search and look for things around the year 2000, you might find an example of what you're looking for. There's absolutely no new examples because I don't think even Microsoft is planning on supporting it in the future.

Good luck.

Late Addition Edit:

I found the web site that has samples of how you can create graphs with VML. You could use CSS animation and create something that works in most email clients and Outlook as well. But if it doesn't you always have this:

Good Luck.

Upvotes: 2

Related Questions