SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
SVG is not supported in many email clients.
If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.
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.
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.
Needed to convert our non-profit's logo into SVG to make it look right, so
looked up an online tool (by googling "png to svg" in my case)
The site generated it, but wouldn't let me it download if I won't register.
Opened the SVG image up in the developer console (Chrome: right click on the image and select "Inspect")
copy the entire <svg>
tag into a simple text file and save it with .svg
extension (from this SO thread).
In Outlook, "Go to Insert > Pictures > Picture from file to insert your SVG images."
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With