Add a vectorial SVG picture in Outlook signature

Yes, you can do this. EricMMinor's response is essentially correct. I found this thread after I had done something similar, so I'll also provide my notes and detailed steps here:

One of the advantages of SVG over PNG or JPG for a signature is that as vector images they can be much smaller files at a high resolution for something simple like a logo, so perfect for embedding in the email (note that if you embed bitmap/raster graphic inside the SVG, you lose all of the benefits of SVG and create compatibility problems for your mail recipients, so ONLY use SVG for true vector images). However, by default, Outlook will replace any SVG files you put in your signature with PNG files rendered from the SVG. I assume Outlook does this because historically, SVG was not universally supported, so this could be a compatibility benefit. However, in 2022, I can't find any programs that don't support SVG natively including testing in: Outlook on Windows or Android, any web-based mail in Firefox, Chrome, Edge, Opera, or Safari, and in iOS Mail (I suspect there still are some older mail systems in use though that won't display SVG, so be careful).

First, you should already be familiar with Outlook signatures. The easiest way in 2022 to modify and save a signature in Outlook is to just set it up how you want it to appear in the Outlook message, then copy the signature, open Signatures... from the Ribbon (opens the "Signatures and Stationery" window, be sure you're on the "E-mail Signature" tab at the top), hit New, then paste what you had copied from your Outlook message into the Edit signature area and hit Save. I recommend NOT trying to edit or construct the signature in the Edit signature block in this. This editor is a bit of a mess. I don't trust it.

Also note that even after constructing it in Outlook, not all mail recipients will see it exactly as you set it up. I recommend sending to multiple domains and mail programs to confirm it looks decent to you on all before you finalize and save it as your sig. For variety, I use outlook.com, gmail, and yahoo. Yahoo is always the worst, but with some effort you can get it work pretty well on all of them.

OK, onto the SVG specific steps. This may look like a lot of steps, but that's just because I've tried to include every little step. Assuming you already have a sig designed the way you want in Outlook (that's the hard part), the process to ensure it uses SVG files only takes about 1 minute in total and is VERY simple:

1. For any images you'll have in your signature, in the Outlook message where you're creating the signature, use the SVG images you will ultimately want to store. Outlook will convert them to PNG, but that's OK. Using them here ensures they display at the correct size later. To insert an SVG image into the signature, just go to the Insert tab in the Ribbon -> Pictures -> Pictures... Browse to your SVG image and insert it. Size and position it how you want. (advanced positioning tip (optional): using a table can be a good way to get vertical positioning to work better across diverse mail systems)
2. When you have the text and SVG image(s) set up how you like, copy the block to be saved as the signature. Be sure not to copy anything above or below what you want saved as the signature.
3. Hit the Signature button on the Message tab of the Ribbon bar (you may need to hit the three dots on the right to see it, depending on your window width and Ribbon configuration) and select Signatures...
4. Hit New and name your signature.
5. Paste the stuff you copied from your Outlook message in step #2 into the "Edit signature" block. Do NOT make any changes here and don't worry if it looks different from what you did. This display (as of this writing at least) is not reliable. Ignore it. Trust that your signature is actually stored to look like what you had originally copied.
6. Hit Save below the list of signatures. If you want this signature to be added automatically to some or all messages, specify your preferences in the drop-downs in the upper right.
7. Hit OK to close the window.
8. Confirm the signature is saved and available for use through the Signature button in the Ribbon. If you don't see it, then you missed something in the above steps (or I've missed something minor here). Repeat those steps carefully to set up the signature and confirm it works.
9. In Windows Explorer, go to %appdata%\Microsoft\Signatures
10. You will see 3 files and a subfolder for every Signature you have created. You may want to back these up if you're concerned about damaging them, or you can always just delete everything here and recreate any signatures by repeating steps 1-8 above. We're focused on the file <sig_name_as_saved_in_outlook>.HTM and the folder <sig_name_as_saved_in_outlook_files>.
11. Open the <sig_name_as_saved_in_outlook_files> folder and put your SVG file(s) here. If an SVG file has a complex name with spaces, rename it/them so there are no spaces in the file name (you can just replace them with underscores if you wish). Spaces in the filename will cause the changes made in step #13 to fail.
12. You will see image001.png (and image002.png, image003.png, etc. for every image you had put in your signature). Open it to confirm it's a PNG of the image in your SVG file. If there is only 1 PNG file, it will be. If you have multiple SVG and PNG files, be clear which is which so you know which PNG file came from which SVG file. Delete all the ****.png file(s).
13. Using Notepad or Notepad++ (or any other text or HTML editor) open <sig_name_as_saved_in_outlook>.HTM. Do a global search and replace on image001.png to the name of your SVG file. If there is more than 1 image, do the same for image002.png to the matching SVG file, etc. for each image. Do NOT make any other changes to the HTML (unless you know HTML and know what you're doing, in which case, you can go ahead and edit to your heart's content -- this is the file that defines how your signature will appear).
14. Save and close the <sig_name_as_saved_in_outlook>.HTM file.

Note that the above steps assume that you want all PNG files replaced with SVG files. If you need some of each, then just don't delete the PNG files you want to keep and don't replace their name(s) in the HTM file.

That's it. You're done. Test this by going into Outlook, creating a message, and adding this signature. If you zoom in on the image to 500% (Outlook's max zoom), now you'll notice that the images are still absolutely sharp with no jagged edges or curves.

Just remember that some older mail programs may still choke on an SVG image in a sig, so you may want to keep a copy of the original sig to use with any recipients you learn have trouble with your SVG sig. However, given that I couldn't find any mail programs as of July 2022 that failed, I suspect this problem will fade away to effectively zero in the relatively near future.

I find the best way to do is to create your signature without the SVG image in Outlook and save that signature (in this example "mySignature"). Then close outlook.

Create your SVG image and ensure it is truly a scalable vector graphic and doesn't do something like embedding a photo file or bitmap inside of the vector file.

Then you'll want to embed this SVG file into your HTML file. For Instructions on how to embed SVG into HTML check out here. Adding vector graphics to the web - Learn web development | MDN (mozilla.org)

The html signature file that you will need to edit is contained here on Windows machines: %UserProfile%\AppData\Roaming\Microsoft\Signatures\mySignature.html . Embed your new SVG file inside of the HTML file by copying and pasting from a text editor. Save your html file. Now reopen outlook and your signature should now be modified to include your scalable vector graphic.

Hi There,

Thanks for this detailed instruction on how to do this.

I have managed to go through the process and add the SVG to my own signature however when testing this out (emailing another collegue) it converted back to a PNG and what he saw was blurry. Do you know why this is?

Thanks,

Katrina

Minor update, you may also want to update the filenames in the filelist.xml file in the folder where you put the SVG and removed the PNG files. I haven't found this to be necessary, but it seems like it may matter for forwarding or copying the signature.

Also, be aware that the current version of Outlook CANNOT display SVG's encoded with UTF-16. It only supports UTF-8. If you're exporting SVG and Outlook won't display the SVG when you insert the image, confirm your application is exporting in UTF-8.

Dear serge83,

Good Day!

Thank you for posting in Microsoft Community.

Based on your description, I understand that you want to insert a vectorial (SVG) picture in an Outlook email signature. Before we can proceed, we want further information about the situation you are now experiencing. Are you referring to add a SVG picture in Outlook on the web signature?

As far as I know the It is an XML based vector image format which can be used for a variety of web graphics so the default Mail or Outlook client don’t support SVG pictures in signatures.

In outlook on the web, an SVG image can be added by following this steps:

• Navigate to the SVG image and right-click it, then choose Copy image address.
• Open the email in which you want to include this signature. Right-click in an empty spot and choose Inspect. This will launch a new dialogue box with a lot of HTML code.
• By highlighting various portions of the HTML code, it will highlight that element on the web-page, you will view all of the code for the layout of the web-page.
• In the HTML source code editor, add an additional space after your final line to create an empty element.
• Select Edit as HTML from the context menu when you right-click on that element. Insert the HTML code (image address copied in first step) once you have cleared all of its previous contents.

We look forward to your response. Thanks for your cooperation.

Sincerely,

De Paul | Microsoft Community Moderator