Is there a way to insert a vectorial (SVG) picture in an Outlook email signature?
Not only insert, but also keep it vectorial (Outlook, Windows), in order that when we zoom in the text, the picture quality should not degrade (no pixelated image).
February 14, 2024
Roady [MVP] - Ron6576 - NoOneCan - Don Varnau ✅
February 9, 2024
Is there a way to insert a vectorial (SVG) picture in an Outlook email signature?
Not only insert, but also keep it vectorial (Outlook, Windows), in order that when we zoom in the text, the picture quality should not degrade (no pixelated image).
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
2 people found this reply helpful
·Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
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
Hello De Paul
I want to include an SVG picture in the Outlook Signature, what is mean, when I create a email ("New email" button in Outlook for Windows) Outlook adds automatically the signature to the end. I don't know what do you mean by "web" signature.
In Outlook, the signatures are editable in the "Signatures and Stationery" settings of the Outlook. We can associate a signature to an account, for new messages or and replies etc.
As I understood from your answer that is not possible, to add an SVG picture to that signature in Outlook (for Windows)
Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
added a request as a feedback on the feedback portal to allow Outlok to use SVG pictures in signature, please vote and share all interested in
Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
Thank you for your comments. Based on your clarifications, I now understand that this is not currently available. As you have already done by reporting this issue in the feedback portal, it will be voted on and may be considered for future releases.
Thanks for your cooperation.
Sincerely,
De Paul | Microsoft Community Moderator
Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
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.
4 people found this reply helpful
·Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
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.
7 people found this reply helpful
·Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
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.
4 people found this reply helpful
·Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
in the HTM file there is the image encoded in hexa format, or it seems like
something like
<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"
o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Graphic_x0020_2" o:spid="_x0000_i1026" type="#_x0000_t75"
style='width:131.25pt;height:39pt;visibility:visible' o:gfxdata="UEsDBBQABgAIAAAAIQCo1seoEwEAAEkCAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbJSSwU7DMBBE
70j8g+UrShx6QAgl6YGUIyBUPsCyN4lFvLa8JrR/j5O2ElRtpR493jc7I7tcbuzARghkHFb8Pi84
A1ROG+wq/rl+yR45oyhRy8EhVHwLxJf17U253noglmikivcx+ichSPVgJeXOA6ab1gUrYzqGTnip
vmQHYlEUD0I5jIAxi5MHr8sGWvk9RLbaJHmXxGPH2fNublpVcWMnftLFSSLAQEeI9H4wSsbUTYyo
j3Jl+0x5IucZ6o2nuxT8zAYaT2dK+gVq8vvf5G+s/ba39ATBaGDvMsRXaVNfoQMJWLjGqfyyx1TN
Uuba1ijIm0CrmTpkOuet3Q8GGK81bxL2AePBXcwfof4FAAD//wMAUEsDBBQABgAIAAAAIQA4/SH/
1gAAAJQBAAALAAAAX3JlbHMvLnJlbHOkkMFqwzAMhu+DvYPRfXGawxijTi+j0GvpHsDYimMaW0Yy
2fr2M4PBMnrbUb/Q94l/f/hMi1qRJVI2sOt6UJgd+ZiDgffL8ekFlFSbvV0oo4EbChzGx4f9GRdb
25HMsYhqlCwG5lrLq9biZkxWOiqY22YiTra2kYMu1l1tQD30/bPm3wwYN0x18gb45AdQl1tp5j/s
FB2T0FQ7R0nTNEV3j6o9feQzro1iOWA14Fm+Q8a1a8+Bvu/d/dMb2JY5uiPbhG/ktn4cqGU/er3p
cvwCAAD//wMAUEsDBBQABgAIAAAAIQBN4DKdtQEAAKcDAAAOAAAAZHJzL2Uyb0RvYy54bWykk81u
2zAMx+8D9g6C7q1jY2tTIU4vQYsBwxYM2wMoMhUL0xco5evtR9lq1p02dAfbpCj9+RNJrx7PzrIj
YDLB97y9XXAGXoXB+H3Pf3x/ullylrL0g7TBQ88vkPjj+v271SkK6MIY7ADISMQncYo9H3OOommS
GsHJdBsieArqgE5mcnHfDChPpO5s0y0Wd80p4BAxKEiJVjdzkK8nfa1B5a9aJ8jM9pzY8vTGni+X
D5ztitesV1LsUcbRqAoi38DhpPGU9iq1kVmyA5o3SEWj8gGB1MgS9FQssv5DrYq4f9JwEn8e4o0K
LspsdsaafJnqXaH8cWvUFmdC9eW4RWaGnneceemozc+1nl0pb7lF2VNOkNsU/w+BnTXxyVhbylfs
Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
Yeah, seems that if the SVG file is larger than a few dozen KB (don't know the exact cutoff), then Outlook will convert it to UUencoded right in the body of the HTM file. Just rip all of that out, replacing the whole block in the pair of angle brackets starting with the <v:shape id... and ending with </v:shape>.
For example:
<v:shape id="Picture_x0020_2" o:spid="_x0000_i1025" type="#_x0000_t75"
alt="<<your preferred Alt Text>>" style='width:<<your preferred width>>pt;height:<<your preferred height>>pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="<<folder and svg file name to the signature file>>" o:title="<<your preferred title -- typically just reuse the Alt text>>"/>
</v:shape>
To populate those individual pieces:
1. Keep the value you currently see for "Picture_x0020_2" o:spid="_x0000_i1025"
2. Replace the values in the <<double angle brackets>> with the values you want. For width and height, you can get these from use a PNG version of the file in the sig and reading those values from the HTM file that Outlook generates.
Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.
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
2 people found this reply helpful
·Was this reply helpful?
Sorry this didn't help.
Great! Thanks for your feedback.
How satisfied are you with this reply?
Thanks for your feedback, it helps us improve the site.
How satisfied are you with this reply?
Thanks for your feedback.