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

為{幸葍}努か 提交于 2019-12-03 10:52:16

问题


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?


回答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 technique will work in iOS mail clients and (amazingly) Blackberry. But Android, Outlook, and pretty much every desktop webmail email SVG does not support SVG and requires a fallback.




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



来源:https://stackoverflow.com/questions/37753911/how-can-i-embed-svg-into-html-in-an-email-so-that-its-visible-in-most-all-emai

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!