Render SVG in Email body using SendGrid C#

GauravSgh commented 6 years ago

I am trying to put svg inside email body, but it is not rendering.

So basically I want to put a image inside a email body, initially I tried with tag but it didnt worked later I tried by using SVG but still i am not getting any image in the received email.

Code to send email:

`

public async Task SendEmailAsync(EmailDeliveryModel model) { var response = new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest); var client = new SendGridClient(ConfigurationManager.AppSettings[CommonObject.SendGridKey]); var msg = new SendGridMessage(); msg.SetFrom(new EmailAddress(model.SourceEmail)); var recipients = new List();
//multiple recipients foreach(string emailAddress in model.DestinationEmail.Trim(',').Split(',')) { recipients.Add(new EmailAddress(emailAddress.Trim())); } msg.AddTos(recipients); msg.SetSubject(model.Subject); if (model.ContentType.Equals(CommonObject.ContHTML, StringComparison.OrdinalIgnoreCase)) { msg.AddContent(MimeType.Html, model.EmailContent + "\n \n \n \n \n"); } else { msg.AddContent(MimeType.Html, model.EmailContent + "\n \n \n \n \n"); } var sendGridresponse = await client.SendEmailAsync(msg); if (sendGridresponse.StatusCode == System.Net.HttpStatusCode.Accepted) { response.StatusCode = System.Net.HttpStatusCode.OK; } return response; }

`

And in EmailContent i am injecting html as:

<!DOCTYPE html><html><body><table><tbody><tr><td align='left'><div id="myDIV"><svg SVG_CONTENT</svg></div><label style='font-size:14px;font-family:Roboto-Regular;font-weight:normal;color:#676767;'></td><td align='left'><p><a href = 'SOME_URL'>SOMETEXT</a></p></label></td></tr></tbody></table></body></html>

Need a quick help. Let me know if any other information is required.

thinkingserious commented 6 years ago

Hello @GauravSgh,

You will want to add the image as an inline attachment. Please try that and let me know how it goes. Thanks!

With Best Regards,

Elmer

GauravSgh commented 6 years ago

@thinkingserious I want to display image in email body instead of adding attachment,
Thanks

thinkingserious commented 6 years ago

Yes, here is the relevant code:

            var attachments = new List<Attachment>()
            {
                new Attachment()
                {
                    Content = "base64 encoded string",
                    Type = "image/png",
                    Filename = "banner.png",
                    Disposition = "inline",
                    ContentId = "Banner"
                },
                new Attachment()
                {
                    Content = "base64 encoded string",
                    Type = "image/png",
                    Filename = "banner2.png",
                    Disposition = "inline",
                    ContentId = "Banner2"
                }
            };
            msg.AddAttachments(attachments);

These would be displayed inline using the following HTML:

<img src="cid:Banner"/>
<img src="cid:Banner2"/>

I hope that helps!

GauravSgh commented 6 years ago

Yes it worked, thanks but still I am unable to control the size of image. I tried it in img tag by giving height and width but it was same as before. Is there any other way to control the size. Also can we use ico file type as well.

thinkingserious commented 6 years ago

Hello @GauravSgh,

With regards to image sizes, perhaps this will help.

For .ico files, I believe you will have to convert it to an image format such as .jpeg or .png first.

With Best Regards,

Elmer

GauravSgh commented 6 years ago

Hello @thinkingserious Thanks for the help its working fine. Just one last question, it supports multiple images as well right ?

thinkingserious commented 6 years ago

Hello @GauravSgh,

Yes, you may pass in multiple Attachment objects as demonstrated in the example code above.

Thanks!

With Best Regards,

Elmer

sendgrid / sendgrid-csharp

Render SVG in Email body using SendGrid C# #705